In this tutorial i'm going to explain how to add Rss Feed Widget With social media network share buttons this widget have social media profile Facebook,Twitter,Rss,Google Plus,Pinterest and subscribe your blog or website and its also have feed burner reader counter.it is very easy to add to your website,just follow the steps mentioned below.
DEMO
1. Log in to blogger account.
2. Now select "Layout"
3. Click Add Gadget and select 'HTML/Javascript
4. Paste below code
<style>
.subscribebtrix {
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;
}
.subscribebtrix: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;
}
.btrixsubmit {
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;
}
.btrixsubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.btrixsubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>
<br />
<div class="subscribebtrix">
<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=bloggersstand', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow">
<input name="uri" type="hidden" value="bloggersstand" />
<input name="loc" type="hidden" value="en_US" />
<input class="tbimailbox" name="email" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" type="text" value="Enter your email..." />
<input alt="" class="btrixsubmit" 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/bloggersstand" target="_blank" title="Join us on Facebook"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIPQGARBEHnahYN9Pt2tLn-fvCKSpQW3w_3W5hxPZSXdeqKxCDK_HR4xuZxJYf0ZDkM2k2D_gVmhvUsbSu_PhzVkiYWmkdHxPC4hUEpvv2y68GZ-rHpPQ9BZmROx73lZbdSBhSFG1bZeI/s1600/facebook_btrix.png" /></a>
<a href="http://www.twitter.com/bloggersstand" rel="nofollow" target="_blank" title="Follow us on Twitter"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRAUOdtJnzw3c4AryZPGz7dHIrD1RSnTJOt4029i3IMEWE0G3hrp-4lO9btBqJ_2oq8AzXjxGQzxEf8CUnY6RY_N2cZ2VqYaqrFReJLLzqtOesxmBS33vVLbMBlg6S4NVRdip4Z83WvKg/s1600/twitter_btrix.png" /></a>
<a href="https://plus.google.com/115587840274121878323" rel="nofollow" target="_blank" title="Follow us on Google+"><img alt="gplus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg25GH_1Itzdm79M125q2kE4FRjVASjmzXqBGlhpmElP_zLc76XMlm7tz8vu-4Muevkqwq5rsNXzT74W9tbu-MAuV7F_Ogcvu7oTpiFr6rub-qmFARd2dBA6OU6bjbw8orLl3sy2Xg5jiI/s1600/googleplus_btrix.png" /></a>
<a href="http://www.pinterest.com/Username" rel="nofollow" target="_blank" title="Follow us on Pinterest"><img alt="pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz-_cOeJKLfzLL7VSjbruhUB6nUNRrrd6qt2e68dKY5beIVBTado0rYEIiw6Yx_4Lu-5tLSEWOxnEYQm9kIfahuGht1dv3E1_-x30PljO0Y6hsYEpbpHBYUqKmNWqeZWsUTEA-UxdBOfo/s1600/pinterest_btrix.png" /></a>
<a href="http://feeds2.feedburner.com/bloggersstand" rel="nofollow" target="_blank" title="Subscribe to RSS"><img alt="rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgteMkT75EJKfNQbvBdIcDCcMaFoLBaV1YaZd0QW1SGMq0Gny3MtemzzX26VoUtKWnXynj_2_QcQ-MV-qhk7JjGBvdZ-Odcct1x2qJmkoDnOKJ4iReHw8NMPl7ijnbQFiKF0v1rjOfjNFA/s1600/rss_btrix.png" /></a>
</div>
</div>
- Change bloggersstand with your Facebook username.
- Change bloggersstand with your Twitter Username.
- Change bloggersstand with your Feed Username
- Change Username with your Pinterest Username.
- Change 115587840274121878323 with your Google plus id
5. Now save your 'HTML/Javascript'.. Done !