Professional Magazine Blogger Templates Read More ×

Tuesday, August 02, 2016

2 Best Email Subscribe Widget for Blogger

JSC Result 2016

www.nuedubd.com/jsc16

JSC Result 2016 will publish on 31th December 2016 Under Ministry of Education, Bangladesh. Check Your JSC Exam Result 2016 FAST!
blogger subscribe widget 2 style free

How to add feedburner email subscription widget for blogger. Email subscribe widget is most important part of every blogger. Do you know what is email subscribe widget? Yes! this is collect huge amount traffic for your blog. Today i am share 2 beautiful blogger email subscription widget for your blog. Earlier some days, i shared a another popup subscribe box for blogger and that is Pop up Email Subscribe box for Blogger. But today i am share another 2 creative email subscription widget box for blogger and one subscription widget is with social icons. 

A Feedburner email subscription widget can bring a huge number of visitors on your blog. Visitors are subscribe in your blog by put their email and they always get your new updates on their email. Email subscription form on blogger is a important widget.

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. 
  1. Dark background with social icons
  2. Colorful widget with name box

How it work?

Everyone know about google's feedburner. In short, google feedburner is most popular RSS web service feed. If anyone subscribe on your blog with their email, then feedburner to deliver your latest posts on all subscribed emails. In this tutorial i shared 2 subscribe box widget for blogger. Using these widget you can also grow up your blog's visitors.

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.

Now lets start our tutorial.

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


First you have to need add fontawesome icon and PT Sans google font. If already added then ignore step 1.

Note: If you use our code, then you agree to give proper footer credit.

Step 1: Go to Blogger Dashboard > Template > Edit HTML and past below codes right after <head>
 <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/> 


Step 2: Now need to add CSS Code before </style>
 #subscribebox{background:#576269;padding:20px;font-family:&#39;PT Sans&#39;,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{margin-top:-7px}
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}
.subscribe-email:focus{outline:0}
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}
.subscribe-button:hover{background-color:#f1d640}
.subscribe-button:focus{outline:0}
.creadit a{color: #A7A6A6; float: right; font-size: 8px;} 

Save Template.

Now go to Layout > Add a gadget > HTML/Javascript and past below HTML code and save widget.
 <div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<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>
</ul>
</div>
<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" />
</form>
</div>
<div class="creadit">
<a href="http://msdesignbd.com" rel="dofollow" target="_blank"> Get This Widget</a></div> 

Customization:

  • 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,


blogger feedburner subscribe box widget


Step 1: Firstly need to add CSS code of this widget. So, copy past below css 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 

Save Template.

Now add a new HTML/Javascript gadget from Layout and past below code.
 <div id="subscribe-box">
<center>
Subscribe for our all latest news and updates</center>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}" onfocus="if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Name" />
<input 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;;}" type="text" value="Your Email" />
<input name="uri" type="hidden" value="USER-NAME" />
<input name="loc" type="hidden" value="en_US" />
<input class="submitbutton" type="submit" value="Subscribe Now" />

</form>
</div>
</div>
<div class="creadit">
<a href="http://msdesignbd.com/" rel="dofollow" target="_blank"> Get This Widget</a></div> 


Customization:
  • Change all USER-NAME with your feedburner user name. 

Hope this 2 email subscribe box widget is helped you. If you found any problems, then inform me on comment section, i will try to solve your problems. And finally don't forget to share our posts with your friends. Thanks... 
SHARE THIS
Subcribe for our all latest news and updates

Subscribe Now

Previous Post
Next Post
Monetize your website traffic with yX Media
True Mag

24 comments:

  1. Check out my site and click any story my social buttons doesn't stay the same. can you help with this problem

    ReplyDelete
  2. how to setup this box for one time for earch user??

    ReplyDelete
  3. I like these all widgets but No. 2 widget use for my blog.

    ReplyDelete
  4. The widget appear but always saying The feed does not have subscriptions by email enabled
    please , my url is www.ariseafricaweb.com Thanks

    ReplyDelete
  5. Thax so much for this. How do i change the color of the social media icons?

    ReplyDelete
    Replies
    1. Here is 2 widgets. what you want to change?

      Delete
    2. The social media icons are a bit gray i want to change them to all white. How can i do that?

      Delete
    3. .follow-subscribe-social ul li a {color:#fff!important;} past this code on css section

      Delete
    4. Thank You. Now do i post it in the html of the blog or the html of the widget? Also when i click any post the subscription box disappears. It only shows on pages but not on actual post. How can i fix this?

      Delete
  6. Thank you! Congrats from Brazil.

    ReplyDelete
  7. Great template and easy to set up. Thank you for sharing!

    ReplyDelete
  8. When I tried subscribing with my other account, it popped up The feed does not have subscriptions by email enabled. How to solve?

    ReplyDelete
  9. There are too many tags in my template. Where should I add the code?

    ReplyDelete
  10. Nice Widget,
    i am also use second widget on my blog.
    Thanks

    ReplyDelete
  11. pls you said I should add the css code before STYLE, but, there is no STYLE in my template. I couldn't find style in my template. Where should I then paste the css code? I need your response.

    ReplyDelete
  12. this is good but its not showing good on my blog. the social icon are just vertical. please help me.

    ReplyDelete
  13. I want to use both the widgets in my single blog. Is it possible?

    ReplyDelete