Add Spinning Social CSS3 to Blogspot

Bài viết hướng dẫn tạo Gadget chứa các mạng xã hội của bạn. Khi click vào các icon sẽ có hiệu ứng xoay tròn icon giống Demo dưới đây

Click Here to view DEMO Spinning Social

Add a Gadget

Bước 1: vào menu "Bố cục", ấn vào "Thêm tiện ích"

Bước 2 : Từ cửa sổ Popup hiện ra, bạn click vào "HTML/Javascript"

Bước 3: Copy 1 trong các đoạn mã dưới đây vào hộp HTML/Javascript

<style>p#hb_socialicons img {
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
p#hb_socialicons img:hover {
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
</style>
<center><p id="hb_socialicons">
<a href="https://www.facebook.com/izblogger/">
<img border="0" src="http://3.bp.blogspot.com/-08YDWYRyzc8/VGQ0Q00l1sI/AAAAAAAAC0Y/g-XyPhxku3E/s1600/facebook.png" /></a>
<a href="http://www.twitter.com/blogspotviet/">
<img border="0" src="http://3.bp.blogspot.com/-CGknj7Szmjs/VGQ0Q-WzI5I/AAAAAAAAC0k/Ec_VOrFkV2E/s1600/twitter.png" /></a>
<a href="https://plus.google.com/+WowBlog">
<img border="0" src="http://3.bp.blogspot.com/-zw8uwYsEKeo/VGQ0Qxu9FEI/AAAAAAAAC0c/3jkQ1HcSGG0/s1600/google_plus.png" /></a>
<a href="http://www.youtube.com/user/blogspotviet/">
<img border="0" src="http://1.bp.blogspot.com/-wnlaRAYZEcs/VGQ0RmR-7II/AAAAAAAAC0s/-KmOWNo79xE/s1600/youtube.png" /></a>
</p></center>