In this tutorial i'm going to explain how to add beautiful social media,Rss and email Subscription widget For your blogger/blogspot website or blog.It also have a very beautiful Hover spin effect on social media buttons which give awesome look to this gadget,Follow the steps mentioned below to grab this beautiful social media Subscription box usin CSS and HTML for this.
DEMO
1. Log in to blogger account2. Now select "Layout"
3. Click Add Gadget and select 'HTML/Javascript'
4. Paste below code
<style>
#socialnbs{
width:244px;
padding:10px 10px 0px 9px;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhchsv_GbisribXV6DH-P7GJiR6Upl5eN_E-k2pPwHIBSBD3cLOaNbAIa4UtQVFT6tXicblsxg6zr0VQ70yqdFEGBG2jd3iw41auQRgA6RSQk7Jzv8bdvkUakVA1zJklNZmXyhC4cDGrbU/s1600/HP-Laptop-Luster.png)no-repeat top left;
box-shadow:5px 7px 5px #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:20px;}
p#socialnbtrixp img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
padding-right:10px;}
p#socialnbs img:hover {
-moz-transform: rotate(420deg);
-webkit-transform: rotate(420deg);
-o-transform: rotate(420deg);
-ms-transform: rotate(420deg);
transform: rotate(420deg);}
bloggerstandform.emailout{
margin:20px;
display:block;
clear:both;
padding:50px;
float:right;
}
.bloggerstandtxt{
font-size:16px;
color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;
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:240px;
height:30px;
}
.bloggersstandbtn{
color:#666;
font-weight:bold;
text-decoration:none;
padding:10px 20px;
border:4px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 20px;
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%);
}
</style>
<br />
<div id="socialnbs">
<center><p id="socialnbs">
<a href="YOUR RSS FEED URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC999SI5D3AqT6v4qcPHcIge5Rsk6SjE33lZ7_BUsrZ8stIU1aG4UHpgSK8wdpqdX4jPgA0DE0leOD199cYSqdB5AjjHkiVtw7jaWk7aqgi8LUIF90o2K_GR1nHM-sfK9aYB4y9g23p-9w/s1600/RSS-48x48.png " /></a>
<a href="YOUR GOOGLE PLUS URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFTK2VZXlGeLqjW-NAsUj1lcM2_ysnbmq-JFiU1qGNhzpyOrzj87x-ZyoOIge2ukNZb2bsL0nK8_YQNEJ7ip3ucqhbeHldPEF8HlUWq7IypupKmrWQ2oMIFOyOLQ46rIl2J186w0fWWDk/s1600/TNT.png " /></a>
<a href="YOUR TWITTER URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW2DsOeJ18iUB9hO0lwf1NdryBUQtUbckw4ZGwGUripivM3Gj_x4xmFY1ETuXkGdqJGWeXsnCPRp2PfPytobVW2wAjFqgQJYa67ZT-0zLNJt8Vdhe5HrpoqU0S03QFpTfEvq6gFpxnqyk/s1600/TNT.png " /></a>
<a href="YOUR FACEBOOK URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS43dlsLNpJjrx0SzFgGTHPd1o75as8FeHNX7zwwzzCNZAjwMF0PbzQ4deGOtbB8tqyGtA2KD9HRyCEcOc8JPsNF2oUTaQOFyg3RsOlxwxCNdXoYhP6Wx-0vUE_QGQlGA4io-gncsP8Pg/s1600/TNT.png " /></a></p></center>
<p style='color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;'>Get Quality Updates Into Your Inbox FREE !!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailout' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER ID HERE', 'popupwindow', 'scrollbars=yes,width=550,height=550');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR FEEDBURNER URL HERE'/>
<center><input name='loc' type='hidden' value='en_US'/>
<input class='bloggertrixtxt' 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='bloggersstandbtn' title='' type='submit' value='Submit'/>
</form><center>
</div>
- Change Feedburner,Facebook,Twitter,Google Plus with your Username or Link.