CSS Social Icons with Hover Effect for Blogger

ඔන්න යාලුවනේ  මම ඇදත් ඔයාලට ගින්දර වැඩකෑල්ලක් ගෙනාව  දාල බලන්නකෝ........

කොහොමද වැඩේ ගින්දර නේහ් ....  එල.....

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/AVvXsEjzVd1eDsny6gyfvwa66WaUo7FBt5ZXMkP0XI-Fsw_RxO17OSEe0GA5K_afqtJKw37MOEA4ML2Fgex1AiEhz4K23EkU7Br_j1xRZQshUvMyWHPNL8AMro2C8O0JiuHhmD_Ug1dkh9DFre38/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/AVvXsEiI5ib-rgLP4iC7Pb6DUTgQ_4_Reh2zhZNFpz7pLkb0YIuW1-cIBAAjqzzMHMUkFg7ddB6ny8opr0eMIOdsy3V9svz3VLi9xV1Bm_DdStrGOP3K39gL3oU9vpAHe-AmjmbNzU_bZWrYSf1s/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/AVvXsEiwEmaqXNmiE7Kxsu-ZZtbUM7BX5qnparJg8iQJfy1TPBguo0bMk6lVyv1BybiW5fYCGYdCK2SXtAiqdjUaI3szq7ma5QvkwFHh8mAcngAOwlalG4WFD8zFxYuSZSA2j9NI7OwVkfQoA9V-/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/AVvXsEgygcVh1j1tkW_hwxOI9hCxOLe5sfteUnd92TLBl3IXMkKixYBJTe2QGwWjttaxzH7f4WimrTKCiQt_3lE3GXT4U2xqKX-kmNs7xgrccQCjiicdkm0SqTgZVZBzzu83amsCU9U_w_Xz4p96/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/AVvXsEjYg8AK4AEzVJjBTNzVKv1UgQCNjtEYAZg2BAONpQ9ztN2Znc01j8Tdu1KTkggMUvpHl0vAwY4_quMvivSe9UzU5rLrkw4SR3CGzuzyyPh1a-0e1IVdoyi1f07TIS1Xi8puEfDsFjqgjsjY/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/AVvXsEjnKU31lJBKQ7XHINI9YzR9fwxprdCBKf9bLGh4QLp798ua-Bhknh78fk2WFz1_0wYuvgKCIkyoBmXZP_rPT2mETW9180Z3Mvw1r6y7vbsEGOjvppIJPoeSc3uiGr_FdSaK7hOFNXRddmZc/s1600/PINTEREST-48x48.png" style="margin-right: 1px;" /></a></div>
</center>