In this tutorial i'm going to explain how to add stylish rss subscription box with social media buttons/icons widget for blogger/blogspot.it is very unique and elegant look,to grab this gadget for your blog or website just follow the steps mentioned below.
DEMO
1.Log in to blogger account
2.Now select "Template"
3.Now Click EDIT HTML Button"
4.Find this tag by using Ctrl+F</head>
5.Paste below code Before</head>
<style type='text/css'>6.Now Find this tag by using Ctrl+F<data:post.body/>
.sub-box{
width: 600px;
background: #fff;
padding: 2px 5px 7px 7px;
border: 2px solid #000;
border-radius: 15px;
}
.sub-box:hover{
border:2px solid #511111;
}
.followlinks h1{
font-family:Cabin Condensed;
font-weight: bold;
color: #000;
padding: 0px 0px 2px 40px;;
font-size:17px;
}
.followlinks ul{
font-family:Cabin Condensed;
font-weight: bold;}
.followlinks ul li{
float:left;
width:90px;
padding-left:40px;
margin:0 0 0 5px !important;
line-height:35px !important;}
.followlinks ul li a{
font-size:20px !important;
text-decoration:none;
font-weight:normal;}
.followlinks ul li.otrss{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFG9UHiBApkKIaAfiHQ8UVPO0pr4YcOG25vp8bGBKZloDjF3aQs7NZ7nf9yswX9VrgQk8pdlf7AYRJO-0X6bPvFSAjpxdq6WmVSRj11wGMBPWJvqasKMGjbtqzHoSIllkMu5NDEFMBHQc/s1600/bloggertrix-rss-icon.png) no-repeat scroll left center transparent;
}
.followlinks ul li.otgoogleplus{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiYHsLkRn6zttkPhZ3MhPO4YOJdo4hgK32xghrR4LDjHWwMKwtzoH_Jb2DhqBy8rEs1TQN2-d96s2H-GUfnBBTFBt1zoN7ngoDd6ilEky8Yayz9sDRNbHVWusswK11NUqCkh4vE_TNAjY/s1600/bloggertrix-google-icon.png) no-repeat scroll left center transparent;
}
.followlinks ul li.ottwitter{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdxGg7Ga05BlwWXe6G-Fr4P9JzLandsxvjwxncusvVnYnlSRjsMwk8NEY1sweVafGTFWbynCIOqnNZ5A_6EGKt7_aaU11oOv8-T9GIVYDLT5s7m7MgCkoaylwoh6VU6ma8n594SvaM150/s1600/bloggertrix-twitter-icon.png) no-repeat scroll left center transparent;
}
.followlinks ul li.otfacebook{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5alHrilAdu0qdISl6GFOQ7YSCzHZTxP7R5zLG9G9zV1CB6gKniszGHc90rqDGg6Y5EtJn88CpBnkFHsr8IMBCMH78pXB0vrgGGo5NWF3KR86CUf20bKy60y-adYoiZLMFubSKuNh4BRI/s1600/bloggertrix-facebook-icon.png) no-repeat scroll left center transparent;
}
form.emailform{
margin:5px 0 0;
display:block;
clear:both;
}
.emailtext{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr1O8NkYQl2-toaNOCEP9I13B8pwmF6k5eU_THwQKpaFolrvC9yVIKK5gTfCBCSlIEZBTgQEFF5ct0hwWIX3clxQzSDziyNQ_OehKimhV_QbnMJRO_3DwmsXAsja6bR2DObmij-k1-ASpD/s1600/ot-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#444;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width: 550px;
}
.emailtext:focus{
outline: none;
}
.sub-button{
color:#444;
font-weight:bold;
text-decoration:none;
padding:6px 10px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-goog-ms-border-radius: 5px;
border-radius: 5px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
.sub-button:hover{
background: -moz-linear-gradient(top, #e7e7e7 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e7e7e7), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
}</style>
<script type='text/javascript'>
WebFontConfig = {
google: { families: [ 'Cabin+Condensed::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
7.Paste below code after <data:post.body/>
<div class='sub-box'>
<div class='followlinks'>
<h1>Get Free Email Updates and Like us on your Social networking site</h1>
<ul>
<li class='otrss'><a href='http://feeds.feedburner.com/bloggersstand' target='_blank'>RSS</a></li>
<li class='otgoogleplus'><a href='http://plus.google.com/115587840274121878323' target='_blank'>Google+</a></li>
<li class='ottwitter'><a href='http://twitter.com/bloggersstand' target='_blank'>Twitter</a></li>
<li class='otfacebook'><a href='https://www.facebook.com/bloggersstand' target='_blank'>Facebook</a></li>
</ul>
</div>
<br/>
<div style='text-align: left; display: inline-block;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=Everfreetech',
'popupwindow',
'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='blogggersstand'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='emailtext' 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='sub-button' title='' type='submit' value='SignUp'/>
</form></div></div>
- Change bloggersstand with your Facebook username.
- Change bloggersstand with your twitter username.
- Change bloggersstand with your Rss Feed username.
- Change 115587840274121878323 with your google plus username.