Thủ thuật blogspot tạo nút Social Icon Button xoay 360 độ

Hôm nay, Vinll sẽ hướng dẫn các bạn một thủ thuật blogspot tạo nút Social Icon Button xoay 360 độ bằng CSS rất đẹp và ấn tượng. Thủ thuật blogspot này vô cùng đơn giản, nhưng lại tạo cảm giác thú vị, nhiều màu sắc và sống động cho người dùng, điểm ấn tượng của thủ thuật blogspot này đó là khi chúng ta rê chuột vào, ngoài các hình ảnh ấn tượng và nút button bắt mắt, thì nó sẽ tự động xoay 360 độ rất đẹp. Để thực hiện được thủ thuật blogspot tạo nút Social Icon Button xoay 360 độ rất đơn giản, các bạn chỉ cần làm theo những hướng dẫn mà Vinll chia sẻ dưới đây là sẽ thành công.

Thủ thuật blogspot tạo nút Social Icon Button xoay 360 độ

Bước 1 - Chèn đoạn mã code sau vào một HTML/Javascript

Đầu tiên hãy vào Blog Title → Layout → Add Widget → HTML/JavaScript → Copy đoạn mã code sau vào.

HTML
<style>/* Tips For Blogger by vinll.blogspot.com */
#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/AVvXsEiomNhWP9h7K4e4BgF7iXvUrZWDmLzGL0Ter_S3HJOku6FObtUemqi8grhR-zkGwiaPbI2Ch-wqv531qv_-3tWIq-grIJRj1dx4eMSwlQOK9xB9GjJ_KxMErn5XTCKy2ZRddBJg5AJfQ6nq/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/AVvXsEjkNkNnrJt6iEVRkEg1yTbCV0ljO9tZOJ6nectEu4tVu2-CfXt33eXzIXGsIvpHpdGUnH9G5mW2EqNuUm8ESOqAm52q_ODiIGD3U1kXjsd59eUjUb0cs0mIw6jOzbkN-1lBz-KgscGViedD/s1600/RSS-EMAIL-48x48.png" style="margin-right: 1px;" /></a><a href="http://facebook.com/FacebookPageUrl" rel="nofollow" target="_blank" title="Like Our Facebook Page"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbnJjesvHY6k9yg_hBbEWzYzFnIdFWLgp_xVGVzr5pKxjXCJ3F4Ej5xtVYhRABZPt76NTyrnvzEmCGne-x8wWamku3lToZzD-n_VWnxP85FN_bLv3ViZ2rLBbNaJouLzflu9teR_-dvGLC/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/AVvXsEjt_TgFbxNaVB6j8gRkdOXJ6nFVMSyKXekrb_oRJCTzfCfnw1g6ZHfw5ROuyjoYIlXtdZCiaHTkRxM_vgvj-OOA0UQ5phRtEsctJE8yaDNne02bmP7SDM9vRCwNtyxzo4HSwdARUtdhpgpq/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/AVvXsEgeHbkSho54yDHJpiUIfYnfNb3Ai4dInztYrob0-iX8JEUXI0zm7VSS5-rh_CdKC9spdF_koKeXD_kqR9EdC6hUKNWlSDDHG9WXOzYDC3pzHzyUWsowzt0g9AHkQGunuWF8Qs8UmAQHNA6K/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/AVvXsEis2zAfBXEj6I_6m_yK97qY9w85FC8XI1IU-LBdmQjQ95H0z_dZL_K3V41dkXu5_uBTLJPfJr0OEFHrppl2MPDVcsm4BL7COPZwXeUwJB2vWni1HpG50_U7GMF4Y6wmrFb_GNbSo4zJlpoW/s1600/PINTEREST-48x48.png" style="margin-right: 1px;" /></a></div>
</center>

Bước 2 - Thay URL tương ứng vào cho phù hợp

Các bạn chỉ cần thay đoạn chữ màu xanh trên kia thành đoạn URL của các trang mạng xã hội của mình, sau đó Lưu lại, thế là xong.

Kết quả:

Hy vọng với những hướng dẫn mà Vinll chia sẻ ở trên có thể giúp cho các bạn tạo được Social Icon Button xoay 360 thành công.