How To Add Wordpress/Blogger Subscription Form To Sidebar
Here am going to share with you a smart subscription form that include just everything a blogger could ever think of. This subscription widget am about to release is a well known wordpress subscription form which was converted to blogger compatible widget by "MBT" long ago before been launched recently. This widget contains Facebook link, Twitter link, google+ link and RSS link. It also contain a beautiful subscription form where readers can easily subscribe for the latest updates!
Note: This widget is made compatible to work with all browsers including (IE8+).
Follow this easy steps to apply the subscription form to your "Blogger" blog.
Happy blogging pals.
Note: This widget is made compatible to work with all browsers including (IE8+).
- Must Read:- Add Related Post Widget For Blogger Blog.
Follow this easy steps to apply the subscription form to your "Blogger" blog.
- Goto blogger ==>Design
- Layout ==>Add Gadget
- Select==> HTML/JavaScript
- Add the following code to the "HTML/JavaScript" content box.
<style type="text/css">4. Save the widget and you're done! Check your blog and confirm the new installed "Subscription Widget" first, before proceeding to the last step.
.mbtbar{width: 100%; float: left;}
.mbtbar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: #fff; height: 45px; line-height: 45px; vertical-align: middle; width: 100%; padding: 0 10px 0 4px;}
.mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: top; padding-right:3px;}
.mbtbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 14px;}
.mbtbar .subicons a{text-decoration: none; color:#333333;}
.mbtbar .subicons a:hover{text-decoration: underline; color:#333333;}
.mbtbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw4eB_L8-tTt9tjgaH6PKH6R84dxJjj34HZE_1prATU8BsCwZJW-P-cPb3j07Q2PjzgZvySnt1yCi5FvWMnDberDltJiyCVfOG4ksaY5Mu2vWl0HeQJTbKw40-cydfbHj4KdrIu5OigVw/s400/rss.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.mbtbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWj6FDLciSQcHdItkp69vUUUE354u0uFKvMpDAAw2_HdhoO_ZZesIkVeBCjub96o__bMkJkm04XmmcEcNV1BjX-iMCmgX87IqNDAOpGrZvdtsR6wXBG5CEyIet6Ns4ZJi29qeKyEmfs2A/s400/facebook.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.mbtbar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUW2uYjm673uoHJMMjRLGoCmeEbuZnohAp0XHzzbuvGYpcqUZo55XTGGuzFlrE0HPmahwjKEYXinUPFGxGj4DhXTKWVmExyWoNvidCzuJ2rcpBMC9xf9abmUK_9k6_Op5jpxFtTBTBHHQ/s400/twitter.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.mbtbar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
.mbtbar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqRZSlXCooOBgj4hZgsyHBh8O-WsYFWzPbwG_-THWKGHuuJjT3pN4TcY9K-rIhbUqJQQpNzjJ6sFDMqcZoZQEfWSYVA60O0mLALG7IS7Wbl9Vyt_8TX7rL_xDhDWO55R4cJhfhtK-wf4g/s400/email.png) no-repeat left center; float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; vertical-align: middle; font-size: 14px; color: #333; }
.mbtbar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 200px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: uppercase; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
</style>
<!--[if IE 7]>
<style>
.mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; }
</style>
<![endif]-->
<div class="mbtbar"><div class="count">Join <span class="bigcount">100+</span> People Following Softvie</div><div class="subicons"><div class="rssicon"><a href="http://feeds.feedburner.com/BlogStable" target="_blank">RSS</a></div><div class="fbicon"><a href="http://www.facebook.com/BlogStable" target="_blank" rel="nofollow">Facebook</a></div><div class="twittericon"><a href="http://twitter.com/BlogStable" target="_blank" rel="nofollow">Twitter</a></div></div>
<div class="emailsub">
<div class="emailicon">Stay Updated via Email Newsletter</div>
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BlogStable', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email..." onblur="if (this.value == '') {this.value = 'Enter your email...';}" onfocus="if (this.value == 'Enter your email...') {this.value = '';}" type="text" /><input value="Softvie" name="uri" type="hidden" /><input value="Join" class="joinemailupdates" type="submit" /></form></div></div></div> <p style="font-family:Arial;font-size:8px;font-style:italic;font-color:blue;text-align:left;float:left;"><a href="http://www.blogstable.com/2013/05/how-to-add-wordpressblogger.html">Get This Widget!</a></p>
Final Step
You need to make some changes to the above code which include the following:- Replace the 100+ with your current feed count and also do well to be updating it at least every 2weeks. To change it color edit this #F17C18.
- Replace the <a href="http://feeds.feedburner.com/BlogStable with your RSS feed link.
- Replace the http://www.facebook.com/BlogStable with your facebook profile link or your fan page.
- Replace the http://twitter.com/BlogStable your twitter profile link.
- Finally, Replace http://feedburner.google.com/fb/a/mailverify?uri=BlogStable with your feedburner RSS link.
Happy blogging pals.
0 comments:
Post a Comment