RSS Subscription Widget With Social Buttons For Blogger

Social media is one of the best way to generate traffic for your blog. Every blogger should use the social media widgets on blogs. These are really important thing if you are serious for your blogging profession. In this tutorial I am going to share this new RSS subscription widget. You can give link to your profiles such as  Facebook, Twitter and RSS, Pinterest and Email subscribe form. Also see demo first below and then add it to your blog. Let's start this tutorial

Free Updates to your Inbox

Follow us:

Add RSS Subscription Widget With Social Buttons

1. Go to Blogger Dashboard ›› Design ›› Page Elements.
2. Click Add A Gadget ›› In New Window, Select HTML/Javascript .
3. Copy The Code Given Below and Paste It Inside The Box.
4. Save The Gadget and Its Done

<style>
.subscribeblogsd {
border: 2px solid #000000;
padding: 8px;
width: 310px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.subscribeblogsd:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.blogsdsubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.blogsdsubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.blogsdsubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>
<br />
<div class="subscribeblogsd">
<div style="color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;">
Free Updates to your Inbox</div>
<div style="margin: 10px 0 0 6px;">
<form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BlogsDaddy', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow">
<input name="uri" type="hidden" value="BlogsDaddy" />
<input name="loc" type="hidden" value="en_US" />
<input class="tbimailbox" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" type="text" value="Enter your email..." />
<input alt="" class="blogsdsubmit" title="" type="submit" value="Subscribe" />
</form>
</div>
<div style="border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;">
Follow us:</div>
<div style="margin: -32px 0 0 120px;">
<a href="http://www.facebook.com/BlogsDaddy" target="_blank" title="Join us on Facebook"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1UqLNibGCAoxA2Pgkv7VE-AMerNsEfhAb3glNZ3MoopwJd1A5blW7L8nnI5or8lpAN3rNkCUKoXKCXaC9ahhu8lfr529t17hDB7WUmEFdXzztSbniVvj0_ZfvZTnQNel1lJkNicZ9JfYF/s1600/facebook_blogsdaddy.png" /></a>
<a href="http://www.twitter.com/BlogsDaddy" rel="nofollow" target="_blank" title="Follow us on Twitter"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHgGdqMrq_gY0aLHl73ydmPFuiwj-V3fgOGJXOSj33h6yu7vuLPoQ0E54lOg4vlxbR69At1ro0-5z2xNUVeqifupgpckMfUWtyszzhY7o978h5-3pdUvcBaciZuPogHq0mRPy9ZcoCljbn/s1600/twitter_blogsdaddy.png" /></a>
<a href="https://plus.google.com/UserId" rel="nofollow" target="_blank" title="Follow us on Google+"><img alt="gplus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTOZZi-WjX9_c8c444KoK0uoUny5d7Yg6N9kYN4lmgkRZIoxMOBRApvf_2oYHXCc3FUDE-6aMY5PlZQVjZSw1S_FpUc9ki46XzKty1oMqygyy3d9bbc-D38BK__xQuwQ8VZrgFTFjOzHhX/s1600/googleplus_blogsdaddy.png" /></a>
<a href="http://www.pinterest.com/gaganmasoun" rel="nofollow" target="_blank" title="Follow us on Pinterest"><img alt="pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl3Y9McbjRH7ZL29pEaoAVPwQ5LvMtBHHtuwupTQ4KC2jglR-3hnhSZDY2u4ff6Agl5ilSj9K0knZ9ING0Y3Rj5LX83viLT16V1KskLLRCwHvbRmD3RlG_5fNKyzp3EFE0mWpXvNMtKY0Z/s1600/pinterest_blogsdaddy.png" /></a>
<a href="http://feeds2.feedburner.com/BlogsDaddy" rel="nofollow" target="_blank" title="Subscribe to RSS"><img alt="rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzz7gWqMmSn_iRDN74ES017Yj3DVqBUZ-qycxLjX_TfOUdjqsH5iwC1ep9uCYRf7VfpY6YxHyVIBIAGGGJDL6Ybn4PJAkWxpBCPMCksuJpRJazmxp8VsWLfdnodUERE7uYMKWOZc16U_rW/s1600/rss_blogsdaddy.png" /></a>
</div>
<div align="center">
<a href="http://feeds.feedburner.com/BlogsDaddy"><img alt="" height="26" src="http://feeds.feedburner.com/~fc/BlogsDaddy?bg=FF9900&amp;fg=444444&amp;anim=1" style="border: 0;" width="88" /></a></div>
</div>

Also See - Stylish Premium RSS Feed Subscription Widget

Customization

The social and RSS feed links are highlighted in red color, you need to change these to your own. If you need any kind of help then leave your comments below. Cheers :)