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.
Lợi thế của việc 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
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/AVvXsEiAQtJjdVryN0bbWSnO6xBdlDbdkMQZKv9Hv94t2Wjh4QjDP5k4icuTT2_Fe9J0CDQHePCszrx41I7kyrK7hURFeq9oBpApuW6Frh6GT3UHyK2oF1-9yUxKUKG0jfdRsLC_R88sc41uGvIZ/s1600/RSS-48x48.png" style="margin-right: 1px;" /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=feedburnerurl&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/AVvXsEjhaeXt1vqc4YGhvAQkN8yQkS21yjE8kI9g9w2hTgPftCsu0wIrFnt1AtejCozr0_EaZuwKeUsCxFvuk5MOegDqN63Q0IMeMBIlll9iSROyKP9AzLb03L1k1w3X68FIfmU9YQiRosBn8lt4/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/AVvXsEihQcZ7FNj1yIyKrIdwAv0TTZzOO651PP9c0Y4AQ6zECcA6YOlnc7PBPoeYT4UiGPVPGWGDkRzPwrwkCJW_GbbIUBupsCPvxoGM9Cw8jPhLy37r0kEBPWNFj4zZ_x0VJp4FJE5AwtHtkjGi/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/AVvXsEjQxcdTaDqerKjO767GiAqqrC_MPr1YPQDekHRhyphenhyphenXee_LxQ3sgp0tK32mwUo8Ue943C78lY3C-DtG6t_xoudM47SR52mmjalzmMKrly3vfylOtyC8U-lh5CglzaC4xWOjcPhbxnPkk0x9Qu/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/AVvXsEgGPTJmxh9JpptPiUDctM1jFpn3Zyl0KF8Wql19-kRbXUznY63knvai4l8q8LVSoOcmNpNW16kVGTDqM_PeR-n4nFg3SBAcYWookuS7YOAjgW36J2-wf8hBh8fs14AJ-uzS66v7T0SImE1b/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/AVvXsEgIButZcvdV9nqOyLukZ_oWKG-SUfSA-_6KbB5Ez7cvjrgHw4_8WP6tyTIcybwW2Omn1ePtrlavVkWPT9xOyjfenaFzrPvPtbhdlN87uqeS7lqyvob-DJPkO2wqtdBjJPu3iCwFebgXecmP/s1600/PINTEREST-48x48.png" style="margin-right: 1px;" /></a></div>
</center>
Đăng nhận xét