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é!
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.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.
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/AVvXsEh3zbW8yEXyuBzy4rdqUxJZg7lwiSTeel0BgPslRslasPoVB6CQP1-ydttHBM-Fignlv9u8IQngjdjnMnqk8EJbDuBwS-N-G-agfpAcq-79Pzugx74S64knvKQq0W-ZvttcwO2EF-Km-Exc/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/AVvXsEhFgrQLXrTkK04B5mu_Grf4Vwn6_qU_EM3z8drzdxoV-ghHqlpsWD7dEnOLNJLBKcY9735Ntk1GrMZOznUdDrNDmkgYorRNpdV99esNlXjhBfTmjz_gVyrI4lYWg_hTe_LSYvRI3RvEP9fI/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/AVvXsEgCH2xA9SICWjEVXfmk25gEpgl3FWLGL3lJdBaLKjfo4OwInoo7lFpSgrB9HZ8YeNT_nh90Tdua4ch-8ZSmCkLWPbb_1BV4qq5RWKTkNWud9v5noe2rAflNYq0Y_lJoAYt53kZ0JNdLVd3P/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/AVvXsEipZ8RQwrbi1f_jooPyBwnhyphenhyphen0ghRCigfycjC4J302VLy7z6hEeD8gjzBHlva1emE3PYUyxPkIk_jBfQGVVz5EMFIBSvtlOCqA4egF0SOIeYgtpD5uO9icr8xiLJyB4WrCX-6SgD2xx_rY3g/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/AVvXsEg8bRYC03ttFJEGTafX7hN0ekMUQ5mW5uEpSqieiAnVcOnn3nHgkdtVnHakmKKYySw-v9q4IGbWIVo5feiD4nY7bbKM3lADnOB2FjJnll2lcfNb_yUYY3TGP0gFlf_gHp7ufEc793AyIRCI/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/AVvXsEj4K0GdbzirJ1rLVPdMNWjHc25zU4M4I9-BsfEe9SrxoFOsMwAKY6O8HvGDMSos8FD2vSLRdgCQ9pY7EsmHQHErS81d_Eq4novVEEykfwDPjQjmH_OuNtz6xUc3SJdezlZXSPx24GZyrmoo/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!
Nguồn:Terocket.com
