[Tips] - Tạo nút Social Icon Button xoay 360 độ bằng CSS cho Blogspot Blogger
Khi rê chuột vào nút Social Icon Button xoay 360 độ bằng CSS cho Blogspot Blogger này sẽ xoay 360 độ. Xem ở Demo nhé!

Hôm nay Terocket sẽ hướng dẫn cả nhà thủ thuật [Tips] - Tạo nút Social Icon Button xoay 360 độ bằng CSS cho Blogspot Blogger rất đẹp và ấn tượng. Thủ thuật 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, sống động cho người dùng, điểm ấn tượng của thủ thuật 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 độ. Tạo sự mới lạ trong trải nghiệm người dùng.

Live Demo

Lợi thế của thủ thuật [Tips] - Tạo nút Social Icon Button xoay 360 độ bằng CSS cho Blogspot Blogger này, đó chính là làm hoàn toàn bằng CSS, tốc độ tải cực nhanh, chuẩn SEO...không làm nặng website, giúp tiết kiệm thời gian tải hơn so với các thủ thuật khác. Nào giờ thì cùng Terocket chúng tớ xử lý và thực hiện thủ thuật này nha!

Bước 1 - Chèn đoạn mã code sau vào một HTML/Javascript hoặc HTML của trang.

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

<style>/* Tips For Blogger by Terocket.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/AVvXsEg4S7IaXTXOFNvt4Km8hETT6vVKtlBZQslezTITW8lCxG1YhtqdsI3SNKwlGbZ48AqvQawZUBrAlt1YLaH7S5lOvy__02zZI87gWmmsK1t_UokF7aJYknhQuZfrSaeDFxSPQDDuS0qY-lad/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/AVvXsEiA8XJpNasa2JYkx6OvSntP-beAylgeVtnjE0Wn_dmWTbbZkh-UsA3Sn0BAxOoPsdCauso32gZBvRQbWof74Y8EmgYfkZpgggFByv9NdbNzs2tg1e3froalR9kRb6Zs67ddMK-6mibiszjb/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/AVvXsEgeJzZwT8ODxLXuxYLAJljCJm1UYvpZB2bBoig-ZPl5IS02eqA7IEl4Ym1BVKcLXGYMm1hWyB51_WPfZJDXw0d-BP30PVw3MtaFWtQ5xTe0GUtokjUNu9-1FirOsXC_eWdbuRevFVIuCKb0/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/AVvXsEhYPCsJtPRago9LGwl5MwItsgtSpTJ47LnHTGus6to-7okfZKXedstfScNfEiNg2T0zIP08IM4xcnYAOfjwNh4ghSnb33uz5opI__kZsB7sOaxTsC2Y-vL6X2BZpb23luT1A6erxO7Ep7Ik/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/AVvXsEgk72le-iS3e7fn_KnPNAIJSWCZz7NxpXGm9nx1OKRLBhSKjYHG4-_u_L9bFJtbrjxBFY0xTT2wX9x5JyrpbOF4iNwUOSxNyH4BJnGwasuoz058lOuvFWR-V4ztkDENd9sqAqSmWhv63QAv/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/AVvXsEiyoG9Dlv9eioS5wSIPZskxCQcDf5GGbsrpvistJ3A3NwvgfFmOnHiNIiQTKG4rBAxkI9_euyxouBH-_zu2khhJluXAWexNAp9GjOkJJ0EXq46b_Lo_hoQXhzFnU5yUG_ZOr53Rs2DOECBw/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 Màu Xanh trên kia thành đoạn URL của các trang cộng đồng của mình, sau đó lưu lại. Thế là xong!

Vậy là xong thủ thuật blog này [Tips] - Tạo nút Social Icon Button xoay 360 độ bằng CSS cho Blogspot Blogger tại Terocket rồi. Chân thành cảm ơn các bạn. Nếu bạn nào đã làm được rồi thì chia sẻ thủ thuật này đến bạn bè nhé, còn nếu chưa được, hãy gửi comment ở dưới đây, Terocket sẽ xem và trả lời các bạn.

Tham khảo một số thủ thuật liên quan đến Nút Button cho Blogspot tại Terocket

  1. [Tips] - Nút mạng xã hội phong cách Metro cho Blogspot Blogger
  2. [Tips] - Nút Huy hiệu / Badge Buttons tròn, hoa văn 7 sắc cầu vòng cho Blogspot Blogger
  3. [Tips] - Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger
  4. [Tips] - Nút Download Buttons bằng CSS hiệu ứng giản ra khi rê chuột cho Blogspot Blogger
  5. [Tips] - Tạo nút Social Buttons lớn kiểu Metro bóng mờ cho Blogspot Blogger
  6. [Tips] - Tạo nút Social Buttons hiệu ứng bong bóng mờ cho Blogspot Blogger
  7. [Tips] - Bộ nút Share Buttons CSS mờ trong suốt cho Blogger/Blogspot
  8. [Tips] - Bộ nút Share Buttons hiệu ứng tự động hiện ở dưới lên cho Blogspot Blogger
  9. [Tips] - Nút Facebook share trượt hai bên cho Blogger
  10. [Tips] - Nút buttons động bằng CSS3 cho Blogger V1
Trứng Vịt - Terocket