Add Customized WordPress Subscription box in Blogger

Ever wanted to have a cool subscription box in your blogger blog.This is possible in Blogger.You need to follow the simple steps.This widget is usually found in WordPress blogs but i t can be added in blogger.This widget can be even more attractive to your readers to subscribe to your blog.It uses three social networks and one RSS.It is designed by simple coding,whatever lets start adding it in your blog.

Customized wordpress Subscription

Lets start by following these simple steps:

1. Go to Blogger>Design>Edit HTML.
2. Find this code ]]></b:skin> (use CTRL+F to search).
3. Just before/above ]]></b:skin> paste the following code.

#HTML6 h2{
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwhHM-jKBkt_SmPZLvxKyEkoCtovmrNQAdbQ3WzLWlN7W48iLO4z4ClaIp9TAzJiYmwRY-JSSsaPWgCEpKEhd-UnaZyrrQQ5POcvAnY5V2FHva575WBOSknPYLTj4CmX828hqXHAVmh-l7/s1600/SUBSCRIBE.gif) no-repeat; height:50px;
margin:0px 0 0px 0;
padding:0px 20px 0px 0px;
font-size:0px;
font-family: Sans-serif, Arial, Helvetica;
font-weight:bold;
text-transform:uppercase;
color:#ffffff; text-shadow:0 1px 0 #fff;
}  

4. After you have done adding code in your template navigate to Design>Page elements.
5.Click on "add a new gadget" and select "HTML/JavaScript".
6.Copy the below code and paste it into HTML/JavaScript.

<style> .mbtbar{width: 300px; float: left;} .mbtbar .count{color:#F17C18; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; height: 40px; line-height: 40px; vertical-align: middle; width: 310px; padding: 0 0px 0 4px; margin:0;} .mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: middle; margin:0px; padding:10px 0px 0px 0;} .mbtbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 12px;} .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/AVvXsEhrMK6EYsziD9hopx9HY0wevHgeIZWAgStdc6zIqTZhn7yFbnIrd3f3N7PodWuY_blp-06LqzJo69MBKjTL0ug8CPaWCzldPQ_K-9OEVPLmCCf7_4QxvJgA5eA_4gBunGgwWJ6d9Hk0g9nz/s400/rsssprite.png) no-repeat; background-position: 0px 5px; min-width: 2px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;} .mbtbar .subicons .googleicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrMK6EYsziD9hopx9HY0wevHgeIZWAgStdc6zIqTZhn7yFbnIrd3f3N7PodWuY_blp-06LqzJo69MBKjTL0ug8CPaWCzldPQ_K-9OEVPLmCCf7_4QxvJgA5eA_4gBunGgwWJ6d9Hk0g9nz/s400/rsssprite.png) no-repeat; background-position: 0px -37px; min-width: 2px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;} .mbtbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrMK6EYsziD9hopx9HY0wevHgeIZWAgStdc6zIqTZhn7yFbnIrd3f3N7PodWuY_blp-06LqzJo69MBKjTL0ug8CPaWCzldPQ_K-9OEVPLmCCf7_4QxvJgA5eA_4gBunGgwWJ6d9Hk0g9nz/s400/rsssprite.png) no-repeat; background-position: 0px -79px; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;} .mbtbar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrMK6EYsziD9hopx9HY0wevHgeIZWAgStdc6zIqTZhn7yFbnIrd3f3N7PodWuY_blp-06LqzJo69MBKjTL0ug8CPaWCzldPQ_K-9OEVPLmCCf7_4QxvJgA5eA_4gBunGgwWJ6d9Hk0g9nz/s400/rsssprite.png) no-repeat; background-position: 0px -121px; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;} .mbtbar .emailsub{border-bottom: 0px solid #e6e6e6; padding: 15px 0 0px 0; float: left; width: 100%; font-family: Helvetica, Arial;} .mbtbar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRFNxX4U6bK0JzwATiIFW4YIiAekxBqa976aoPVbmwn2ruaKPohiwlzAWTW992nZkQCAtAOJ2a9MHX-RTdP3kxntkgTGx3a6Pt9ckaZAO-3XTL4OVcWnQZ5srX5SgxrQLmIiUnotQoBDE/s400/email.png) no-repeat 0 2px; float: left; padding: 0px 15px 0px 40px; margin: 0 0 0 5px; width: 300px; line-height: 20px; 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: 185px; -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; font:bold 12px arial; 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"><span class="bigcount"> <a rel="nofollow" href="http://feeds.feedburner.com/Devilstoolshop"><img src="http://feeds.feedburner.com/~fc/Devilstoolshop?bg=FFFFFF&amp;fg=000000&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a></span>Learn Free Pro Tricks daily </div> <div class="subicons"> <div class="rssicon">&#160;<a rel="nofollow" href="http://feeds.feedburner.com/Devilstoolshop" target="_blank"> RSS</a></div> <div class="googleicon">&#160;<a href="Google+ profile url " rel="author" target="_blank"> G+</a></div> <div class="fbicon"> &#160;<a href="Facebook-Page-Url" target="_blank" rel="nofollow">FB</a></div> <div class="twittericon">&#160;<a href="http://twitter.com/Devilstoolshop" target="_blank" rel="nofollow">Twitter</a></div></div> <div class="emailsub"> <div class="emailicon"><p style=" width:270px; color:#000000; font-size: 13px; font-weight: normal; font-family: Helvetica, Arial; padding:0; margin:0;">Receive Quality Tutorials Straight in your &#160;&#160; Inbox by submitting your Email ID below.</p></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=Devilstoolshop', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="Devilstoolshop" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form></div></div></div>

Make These Changes:

• Find "DevilsToolShop" In the code and replace it with FeedBurner address.
• Find "Google+ profile url" and Replace with your G+ Profile url.
• Find "Twitter.com/DevilsToolShop" and replace with your twitter url.
• Find "Facebook-page-url" and replace with your own Facebook page url. 

Final Word

If you have any problem installing this widget then please lets us know via comments.Till then Comment,Subscribe,Follow us on twitter and Like us on Facebook (Recommended).Kindly share this post with your friends.