Friday, 20 November 2015

How To 'Add Feedburner Email Subscription' Widget In Blogger/blogspot

Today we are going to learn “How To 'Add Feedburner Email Subscription' Widget In Blogger/blogspot” The Widget itself is unique creation, actually it is adapted from Wordpress widgets, but you can install it on blogger for free.

How To Add Stylish Email Subscription Widget / Box In Blogger

To add email or Feed Subscription Form to your blogger blog (blogspot) is very easy. Just follow the next steps: 

  •  Log in to Blogger, then go to Layout > click on "Add a Gadget" link
  • From the pop­up window, scroll down and click on the "HTML/JavaScript" gadget: 

  • . Paste the following code inside the empty box
<style> #nbl-social{float:left; background:#fff;margin:0 0 25px 0}#nbl-social-profiles{float:left;margin:8px 0 0 0; padding-left: 20px;}#nbl-social-profiles ul{list-style:none;float:left;margin:0 7px}#nbl-social-profiles ul li{list-style-type: none;border:0 none;float:left;margin:0;padding:0}#nbl-social-profiles ul li a{display:block;float:left;height:32px;margin:0 10px 0;text-indent: -999em;width:32px}#nbl-social-profiles a.social{background:url("http://4.bp.blogspot.com/-kiwGN-a19cA/VIB5ZhTSxcI/AAAAAAAADkw/nj7l3_bnokc/s1600/soc.png") no-repeat scroll 0 0 transparent}#nbl-social-profiles a.facebook{background-position: -79px -0px;width:32px;height:32px;margin:0 10px 0 0}#nbl-social-profiles a.facebook:hover{background-position: -79px -74px;width:32px;height:32px}#nbl-social-profiles a.twitter{background-position: -5px -111px;width:32px;height:32px}#nbl-social-profiles a.twitter:hover{background-position: -42px -0px;width:32px;height:32px}#nbl-social-profiles a.youtube{background-position: -42px -37px;width:32px;height:32px;margin:0 0 0 10px}#nbl-social-profiles a.youtube:hover{background-position: -5px -37px;width:32px;height:32px}#nbl-social-profiles a.rss{background-position: -42px -74px;width:32px;height:32px}#nbl-social-profiles a.rss:hover{background-position: -79px -37px;width:32px;height:32px}#nbl-social-profiles a.googleplus{background-position: -5px -0px;width:32px;height:32px}#nbl-social-profiles a.googleplus:hover{background-position: -5px -74px;width:32px;height:32px}.optin-text{margin-left: 15px; color: #000;float:left;font-size:13px;line-height:22px;margin:10px 0;margin-top: 10px;padding:0 8px}#optin-sidebar{background:#fff;padding:0 0 10px 0;text-align:center}#optin-sidebar h4{font-weight:bold;margin:10px 0 20px}#optin-sidebar input[type="text"]{background:#fff;border:1px solid #AAA;font-size:13px;margin:0 0 10px 0;height: 25px;padding:5px;width:85%;color:#555}#optin-sidebar input{box-shadow:0 2px 2px #AAA;-moz-box-shadow:0 2px 2px #AAA;-webkit-box-shadow:0 2px 2px #AAA}#optin-sidebar input.email{}#optin-sidebar input[type="submit"]{background:url("http://3.bp.blogspot.com/-5wcFZIZJkN0/VIB5Zjgby-I/AAAAAAAADko/3FYE_NnvoPQ/s1600/Red.png") repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-family:arial;font-size:16px;font-weight:bold;height:40px;margin-top:5px;padding:8px 0;text-transform:capitalize;width:88%;border:0}#optin-sidebar input[type="submit"]:hover{background:none repeat scroll 0 0 #333} #optin-single{background:none repeat scroll 0 0 #F7F7F7;border-bottom: 1px solid #DDD;float:left;padding:15px 0;margin:15px 0;text-align:center;width:100%}#optin-single p{float:left;margin:0 10px 0 18px;padding:5px 0 0}#optin-single input[type="text"]{background:#fff;border:1px solid #AAA;font-size:13px;margin:0;padding:2px;width:30%;color:#555;float:left}#optin-single input{box-shadow:0 2px 2px #AAA;-moz-box-shadow:0 2px 2px #AAA;-webkit-box-shadow:0 2px 2px #AAA}#optin-single input.email{background:#FFF}#optin-single input[type="submit"]{background:url("http://2.bp.blogspot.com/-OB93q7XRC90/VIB5ZFWhkvI/AAAAAAAADkk/sboB95B9BfI/s1600/NBL.png") repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-family:arial;font-size:16px;font-weight:bold;height:37px;padding:5px;text-transform:capitalize;border:0;float:left;margin-left:10px}#optin-single input[type="submit"]:hover{background:none repeat scroll 0 0 #333}</style> <div id="nbl-social">   <div id="nbl-social-profiles">     <ul>       <li>         <a class="social facebook" href="https://www.facebook.com/techrishi.org" title="Facebook FanPage" target="_blank" rel="nofollow">           Facebook         </a>       </li>       <li>         <a class="social twitter" href="https://twitter.com/alltechpeople" title="Twitter Profile" target="_blank" rel="nofollow">           Twitter         </a>       </li>       <li>         <a class="social googleplus" href="https://plus.google.com/+allttechpeopletitle="googleplus" target="_blank" rel="nofollow">           GooglePlus         </a>       </li>       <li>         <a class="social rss" href="http://feeds.feedburner.com/alltechpeoplecom" title="RSS" target="_blank" rel="nofollow">           Rss         </a>       </li>       <li>         <a class="social youtube" href="http://www.youtube.com/user/AllTechPeople" title="YouTube Channel" target="_blank" rel="nofollow">           Youtube         </a>       </li>     </ul>   </div></div> <div class="optin-text"><strong><p><a href="http://feeds.feedburner.com/alltechpeoplecom"><img src="http://feeds.feedburner.com/~fc/alltechpeoplecom?bg=CCCCFF&amp;fg=000033&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a></p><a href="https://twitter.com/AllTechPeople" class="twitter-follow-button" data-show-count="false" data-size="medium">Follow @AllTechPeople</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
   Learn Free Pro Tricks daily
Receive Quality Tutorials Straight in your Inbox   by submitting your Email ID below.</strong>   </div>   <div id="optin-sidebar">     <form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=alltechpeoplecom', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">             <input name="uri" value="alltechpeoplecom" type="hidden" />       <input value="en_US" name="loc" type="hidden" />             <input id="email" class="email" name="email" onfocus="this.value=&#39;&#39;" value="Your Email Address" placeholder="Your Email Address" type="text" />             <input value="Get Started Here!" id="submit" name="submit" type="submit" />     </form>   </div>
Note:- ­ Replace All the url address in RED to change the email icon ­ To change the width or the text area, increase/decrease the 130px value in red ­ replace http://feedburner.google.com/fb/a/mailverify?uri=Alltechpeoplecom with your Feedburner Email Feed link.. 
  • Now Save your widget and check your blog. Enjoy! 

Rishi yadav is the founder of MyTechTalk.A Popular tech blog dediceted for Geeks and blogger You Can Follow Me on Facebook Or You Can Connent With Me On Twitter @alltechpeople Email:mytechtalk99@gmail.com


EmoticonEmoticon