Powered by Blogger.
Menu :

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+). 

Wordpress Like Subscription Form

Follow this easy steps to apply the subscription form to your "Blogger" blog.
  1. Goto blogger ==>Design
  2. Layout ==>Add Gadget
  3. Select==> HTML/JavaScript
  4. Add the following code to the "HTML/JavaScript" content box.
    <style type="text/css">

    .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 == &#39;&#39;) {this.value = &#39;Enter your email...&#39;;}" onfocus="if (this.value == &#39;Enter your email...&#39;) {this.value = &#39;&#39;;}" 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>
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.

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.
I'll be very happy to hear your feedback and suggestions, never hesitate to let me know if you meet any difficulties in applying the widget. 
Happy blogging pals.

0 comments:

Post a Comment