[Tips] - Tạo nút Social Icon Button xoay 360 độ bằng CSS cho Blogspot Blogger

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/AVvXsEgmYGN0IgZ0TISMWkmi0I2c_Zcg9_CRBtOavOxTB5-o2-qZ9u_iBtTbMifz27eRUmQ68kYiK9n-wli2f3_D5-0MF4SDAYLxMO_u36p743m-4Ej6dWRyaimUANLzBu0KCCT3KXan2DrHZKG-/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/AVvXsEgBz1D6JWyNPKptJPVfE0DYVtHG28qo7kyYSWLN5ZByjxltEc00lTuenz2c3C3inCDIawoDP-5kk63zG_hR3Z6g84A6jSH48JZn8HkNjnF-vRCCiXKguVti17niLZVwYEuyKznFVa9jPnUP/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/AVvXsEgqFtSo-VRk39tWvuU_4_ZzO2ob8DraJ54fFoBpCKX1ZXgmtOaaaYpwNnfrXhIs4Wdknu5y0Fmmt6QiFuMqgHsHBrVxUmzkAkmu7QLMwTvC-UgzxZfqXE1OWn6MmHds1qUtPnMmA8hB57ZU/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/AVvXsEhcRd9jlUwxt2rfvY6vaTtZN_p__u7WQQZnPKRdLTbw5q2Q_51oXGmrPcMd6OgBAtYKvHStNxD61-XgA51wk8h2Rx8VNUmUZ2u-PnOYMTH0R-eksFEBtBQIqLSjTYAqNpHLyTXZ4MIY-y4V/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/AVvXsEgRnAPTDmf5Uf5y4RdrBWtVNFZMlKe6gaOCq8GxO9Cl34Gpp8ClmnjYF6U15vQixJeb4DyDImSOopgrW0oNTSefOgGwTK12_vJCpxHVBsLqBoAI9YWE_hinTAOh7JYWhiPoLwXCrj6hNvyG/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/AVvXsEjMwU4FV78oHo5nKDQZOQkPZ5CDqQJT6Vg5oHfQ34pX90m27GtsBEdFhUDgRI7aYU0urNF7OTKjxA0RkKgvjubiwNwHE8O6XDmvKZHaxsZT8H-Gm0AmT5xOdhter3MY3yCDwAdEsuWubVEG/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.

Nguồn Terocket.com

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..