Thursday, February 21, 2013

Stylish Social Subscribe Buttons for Blogger

Today I found this beautiful blogger widget on Netinfozblog.in and decided to share it here. The widget has 4 big size Social buttons of Facebook, Twitter, RSS and Google+, They look really good and professional.

How to Add them to Blogger

Log in to Blogger Account.
Go to Template > Edit HTML (backup your blog first)
Search for ]]></b:skin>
Add the following code just before ]]></b:skin>

#TB { width: 210px; margin: 0 auto; min-height: 200px; }
#TB img { width:100px;
opacity: 0.8;
/*Transition*/ -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
/*Reflection*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1))); }
#TB img:hover { opacity: 1;
/*Reflection*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
/*Glow*/ -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8); }

Save Template

Adding HTML Code

Go to Blogger > Layout > Add a Gadget
Choose HTML/Javascript
Add the following code inside it

<div id="TB"><a href="http://www.facebook.com/trickyblogger">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6RFPJUPR_P6Pebg6GrW4wPVRUhJ3lQDjUu5LxLmuTJ6qal22ZtmN_M7DoiEjZRdKdp-QI8R7KcudCa4rUDq9-6FGnCag59Ofd0JIGfLDGTflOzZCL2VAyz_bjI5cflfto2WnboWIjTb7E/s1600/facebook-icon.png"></img></a><a href="http://www.twitter.com/trickyblogger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhfTpMAZ-jzeQfLaod4Ol-RAJyLY9wmzpecQgaG1z_gVFHGgYFcvFZIUeZGhyphenhyphenHZXT2zFic590od49nz3ujMvyb9Vx7m4xXLrWX02gKZ2CH0Ma1xmm15ElCnJ0mB2CEIK8SezDHifrN7oRy/s1600/twitter-icon.png"></img></a>
<a href="https://plus.google.com/u/0/117521503834739609237">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiowuZVdlNNO3VwWw3M3izC1TSCLb1ZNvOxzAr1mKWU-eBxeOy3dDipB8FSCC2Scni-9vu8-wtsHEuBhQ-qegSMsJvTFaQaIQy8UdYCr1zS749yAgRh7owPclig4w8q2Q9fFTCFm92mqjWH/s1600/google-icon.png"></img>
</a><a href="http://feeds.feedburner.com/trickyblogger/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgb3-6BHEae32Gseleo8M_h45dTXQCu3tew9iuqgaFS9OJQrBKagf_UM9MVVNTBBep7pgMg7u_rSCo1AIMXV8V3xH-sr1YlaUScleUXeihlX-SQj8tmK9RmdrRYIowbXUzvtnAu0vBGlXa/s1600/rss-icon.png"></img>
</a>
</div>