2 Stylish Email Subscription Widgets For Blogger - Probloglive

stylish widget for blogger, How to add an email subscription function to Blogger

Email Subscribe Widgets for Blogger

If you place blogger email subscription widget on sidebar then, it will be better. But popup and below of every post is also good place to add email subscribe box in blogger. Today i am share 2 creative sidebar email subscribe box widget for blogger. 

  • Dark background with social icons
  • Colorful widget with name box
  • How to registration on feedburner? Go to the following link and registration with your blog address and your email: feedburner.google.com. If ones done, then collect your feedburner username and note it.

    1- Dark background with social icons

    Its the awesome and cute email newsletter subscribe box widget for blogger that created with pure css with fontawesome icons. By using this email newsletter forms you can also use your social media links like Facebook, twitter, linkedin, google plus, pinterest, vine and instagram social icons. Attractive subscription widget box is better for every blog. Our first widget is more attractive for blogger.
    subscribe box widget for blogspot
    Step 1: Go to Blogger Dashboard > Template > Edit HTMLStep 2: Now need to add CSS Code before </style>
     #subscribebox{background:#576269;padding:20px;font-family:'PT Sans',sans-serif;}
    .widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
    #subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700}
    .follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
    .follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
    .follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
    .follow-subscribe-social ul li:last-child{margin:0}
    .follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
    .follow-subscribe-social ul li a:hover{color:#fff}
    form.subscribe input{display:block;width:100%}
    .subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}
    form.subscribe .placeholder{color:#cacaca}
    form.subscribe input:-ms-input-placeholder{color:#cacaca}
    form.subscribe input::-webkit-input-placeholder{color:#cacaca}
    form.subscribe input:-moz-placeholder{color:#fafafa}
    form.subscribe input::-moz-placeholder{color:#fafafa}
    .subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
    .creadit a{color: #A7A6A6; float: right; font-size: 8px;}
    Save Template. Now go to LayoutAdd a gadgetHTML/Javascript and past below HTML code and save widget.
     <div id="subscribebox">
    <div class="follow-subscribe-social">
    <li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
    <li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
    <li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
    <li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
    <li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
    <li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
    <li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
    <p>Subscribe to my Newsletter</p>
    <form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='YOUR-USER-NAME'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
    <input class="subscribe-button" type="submit" value="Subscribe" />
    <div class="creadit">
    <a href="https://www.probloglive.com" rel="dofollow" target="_blank"> Get This Widget</a></div> 
    • Change all # tag with your all social media link.
    • Change all YOUR-USER-NAME with your feedburner user name.

    2 - Colorful widget with name box

    You can use this widget below of every post. This subscribe box widget is created with simple css with colorful background. In this email subscription widget visitors are able write their name. The name box make this widget more professional. In this widget you can change subscribe box heading. Default heading is: "Subscribe for our all latest news and updates". Now lets start this,
    subscribe box widget for blogspot
    Step 1: Now need to add CSS Code before </style>
     #subscribe-box {background-color:#0CC388;font-family: 'PT Sans', sans-serif;}
    #subscribe-box p {font-size:22px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}
    #subscribe-box .emailfield {padding:0px 20px 10px;}
    #subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;width:91%;border:0;transition:all 0.4s ease-in-out;}
    #subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}
    #subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:700;font-size:18px;font-family: 'PT Sans', sans-serif;;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}
    #subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
    #subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;} 
    .creadit a{color: #A7A6A6; float: right; font-size: 8px }
    • Change all USER-NAME with your feedburner user name. 
    DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain https://www.probloglive.com/. Terima kasih.
    Newer Posts Newer Posts Older Posts Older Posts

    More posts


    Post a Comment