Tạo Social Media Icons với hiệu ứng xoay tròn

Bài này mình sẽ giới thiệu tới các bạn thủ thuật tạo Social Media Icons với hiệu ứng xoay tròn đẹp mắt cho Blogger. Ở bài trước mình đã giới thiệu Black Subscribe Box, widget đó có sử dụng thủ thuật này. Các bạn có thể xem demo tại đây. 

Sau đây là các bước thực hiện thủ thuật: 

Bước 1: Tại trang quản trị blog, các bạn vào Bố cục, tạo một tiện ích HTML/JavaScripts.

Bước 2: Dán đoạn code bên dưới vào phần nội dung:

<!--Spinning Social Icons by kjmagic.blogspot.com-->
<style>
p#kjsocialicons 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;
}
p#kjsocialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
</style>
<center><p id="kjsocialicons">
    <a href="http://www.facebook.com/kj.magician">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8VLmbAg95e3zoroqZqLq6hba4ZE6ZlGUWl_coPAoyv8QTnquQX7zrxUhKkI10pdzgQa7i7Ukv1ozHL_Lb1u31T2R3mtGEnv1KDfKsVw-m8tDFoppsu1fEWpvuFHVCxalnVH9uQa3tZaE/h120/kjmagic-fbook.png" /></a>
<a href="https://plus.google.com/your-id">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_kgd9TP-Hr2K5-eS7ULZBJ7NX7mkvuVrTTHBJxPi0kb73-5SU7JGt20TTgxoF7_OQ7C6Qcqf51LhGJXFSnvfFYVZLljbqO4iu3PN8sHW7XrogwqgnmV2ZDqOfRaFf_KzwckdcLDwuWnM/h120/kjmagic-gp.png" /></a>
<a href="http://www.twitter.com/quocdoantrinh">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj1bw51K6GbPDhUIHpoxlY4AV7t3mOGY4p78G-lRof97mBs0jq4-iQCV6CuD6MpQtHtozNeEDdR0eFZwFzB3tqMjuCvOR6XVMZZfhAqnwTbRN0lesKEX0cA-WYaWBn63ka9pFd3zCocv8/h120/kjmagic-tw.png" /></a>
<a href="http://feeds.feedburner.com/KjMagic">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBfqIsBeurhO_k4q3GLCmFzebpIaWLmMzJsfib4Rd0c6sYDpJEp-i3Jur5Z7vZl2Rd0pwPooCSJ-fZHZF2iqjDNI0ZuIdVdsM697h6uRU6cfg938ym_YZRICRH6jK6nPm7eWhBo3wA5MY/h120/kjmagic-rss.png" /></a>
</p></center>
<!--/Spinning Social Icons by kjmagic.blogspot.com-->

Chỉnh sửa những chỗ mình đánh dấu thành ID tương ứng của bạn và lưu lại.

Chúc thành công !