CSS Social Icons with Hover Effect for Blogger

Today I will tell you how you can add CSS Social Icons which comes with Hover effect in Blogger. When hovered over these icons CSS Transition takes place and these icons move 360 degree round. You can see the same type of icons on the popular blog SpiceUpYourBlog.com.

 You can add icons of RSS, Email, Facebook, Twitter, Google+ and Pinterest.  The live demo of these buttons can be seen below -

So to add these cool Social icons to your blogger blog. Follow below steps -

Step 1 : Adding the HTML

Go to Blog Title → Layout → Add Widget → HTML/JavaScript. Paste the below code in the box.

<style>

#social 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;
}
#social img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.comments .comments-content .icon.blog-author{position:absolute;top:-1px;right:-12px;margin:0;background-image: url(http://cdn2.iconfinder.com/data/icons/crystalproject/16x16/apps/keditbookmarks.png);width:36px;height:36px}
.CSS_LIGHTBOX_BG_MASK
{
background-color:#990000 !important;opacity: 0.8 !important;
}
.post img {max-width:95% !important;}

</style>

<br />
<center>
<div id="social">
<a href="http://feeds.feedburner.com/feedburnerurl" target="_blank" title="Grab Our Rss Feed"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFWm5iKRTmoyqN4UtbCR8H5gp8u6wu8Bo9uwiBHHNjITbgACMP7NxhCLqeGJsr2yhjr_PmhxxVahw_D5uc8vZRgEvDINbt2LzPD174BQr0_1jxZpDu9gG16dX0jCL-_b8dJMwlDpVCb_Yk/s1600/RSS-48x48.png" style="margin-right: 1px;" /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=feedburnerurl&amp;loc=en_US" rel="nofollow" target="_blank" title="Get Free Updates Via Email"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsiADY5F6oMkfrKTxHjYYfMMEn1tZ66NIfJr8G39jsdjqKr-6aCGTFNEu9QfIsi0Y3CLdmK8OOmfHAUn2RSmHeh2QXhAqi8hasC_IiAMmYcr4BXMo0M-Yq0sG2Bim66kWFOywg85XcpYOW/s1600/RSS-EMAIL-48x48.png" style="margin-right: 1px;" /></a><a href="http://facebook.com/fbpageurl" rel="nofollow" target="_blank" title="Like Our Facebook Page"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTxGd2NY4LFig5YjHJCLh9-vuHZZRDTqHAFJKivnxPWnhileTnSieYSM_3TRtP4TPcXXNWPToOc3mr7wFCm2PEPTh2mSlrjFwBBXob2U6cSyWEUaxh9_uqrBEr8nKUAgQM1oKeQ2pWWyAN/s1600/FACEBOOK-48x48.png" style="margin-right: 1px;" /></a><a href="http://twitter.com/twitterurl" rel="nofollow" target="_blank" title="Follow Our Updates On Twitter"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy8TuJ6zkL7z7UJpgMc4-gXhg37ef2HHvt_DdqdDEzOfzDjK22WZz7GWCig3onq2YHT1G_pMdtFbs8u53Hm-8D79by2FavegD3kMip-LWUl1LIzhLnB4JaJncFu_VTW68iWc7mvKtlV0uW/s1600/TWITTER-48x48.png" style="margin-right: 1px;" /></a><a href="https://plus.google.com/googleplusurl" rel="nofollow" target="_blank" title="Follow Us On Google+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLaBzkM2YbhxgLdfWkPIkG0Dss598rVbC23Zb9v0zckaGqIPKyTBCd6AkRuNxvyI_y38wmoRRcsZPgUTPg2axWk4VJfdf-f6brZn1eo4LBZ0mw9dIch5iN-2BEhgZappebGoIX53Pe2r1_/s1600/GOOGLE-PLUS-48x48.png" style="margin-right: 1px;" /></a><a href="http://pinterest.com/pinteresturl/" rel="nofollow" target="_blank" title="Follow Our Pins"><img alt="Follow Me on Pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1IhKPdixIpPx80dM_4nXnkdY1PCelytJ5YGF3ivyY7Pec2gh5_oU29LZP3_sxIBf0dxi-Uxn2xBnvq1fBXVeKSn0idQVyiWIpa4EDbIKGoPW8IFnsRgsZ3cdiwtlHhJGwmwu0wyRZOqaO/s1600/PINTEREST-48x48.png" style="margin-right: 1px;" /></a></div>
</center>

Step 2 : Editing the Links

Edit the text in Red with your desired URL. Save the Widget. After saving the widget, save the template. You are done now. You and your visitors can now see cool Social icons on your blog.