CSS Social Media Icons với hiệu ứng animated cho blog

XEM DEMO

Ở những bài trước mình đã chia sẻ một số cách tạo Social Media Icons với những phong cách khác nhau. Hôm nay mình sẽ chia sẻ một style Social Media Buttons rất đẹp mắt với hiệu ứng animated dành cho Blogger. Cái hay ở thủ thuật này chính là sử dụng CSS nên rất nhẹ, không ảnh hưởng tới tốc độ load trang. Để áp dụng thủ thuật thú vị này, các bạn chỉ cần làm theo 2 bước sau:

Bước 1: Tại trang quản trị blog, các bạn vào Bố cục, tạo một tiện ích HTML/JavaScripts.

Bước 2: Paste đoạn code sau vào phần nội dung:

<!--Animated Social Media Icons by kjmagic.blogspot.com-->
<style type="text/css">
/* Animated Social Media Icons by kjmagic.blogspot.com */
.entry-social{height:40px;padding-top:10px;padding-bottom:10px}
.entry-social > div{float:left;margin-right:20px}
.entry-social .fb-like span{vertical-align:top !important;padding-top:2px}
.fb-like span iframe{max-width:none}
.sidebar-social > div > div{width:50%;float:left}
.sidebar-social > div > div:nth-child(odd){width:60%}
.sidebar-social > div > div:nth-child(even){width:40%}
.sidebar-social > div > div > a > img{float:left}
.sidebar-social > div > div > div{float:left;margin-top:10px;margin-left:12px}
.sidebar-social p{clear:both;margin:0;padding:10px 0 0}
.social-link{display:block;height:50px;width:50px;float:left;-webkit-animation:social .6s steps(12,end) infinite;animation:social .6s steps(12,end) infinite;/*-webkit-animation-play-state:paused;animation-play-state:paused;*/}
.social-twitter{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0fdVJ95fHjyRx_0djuAgdBG_KNh88g5duiMKEy_-V8p6DGIE1QjsBa-tDpaMFXhex-TeO_Txc6Kd3Y79_oK7YdedcR2OlrUhtgecRnQOVYmKX00krRBBEsQTIcXgOne00ix9xsg7iFA/s1600/twitter-sprite.png)}
.social-rss{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE69_amDCZLuvV9w5pGn3SbWZUFIn-koF9VYCAZ8i6nNpEzPTwV6esQQ0FenAQG-RVUviHyOXcmPwUaVJ6nAik7m86LLqgcP3o8hzfizY2mNfrkJULb8dqqK3GhkbVLZ2UvGPywR7mWA/s1600/rss-sprite.png);-webkit-animation:social-rss .6s steps(9,end) infinite;animation:social-rss .6s steps(9,end) infinite;/*-webkit-animation-play-state:paused;animation-play-state:paused;*/}
.social-facebook{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKuKUgIQiswk2-Utwdawxa6qrYMCLXTggVDHjluxUO0ndPjtI9H1F_Uh78gtv7s6361reSkl-fG8Ah_jIPyFRkwTWYfKZs9uIMIaQ9LEXVSP4DVxqlzTjQMCK5VGtU-dZQqDAiAtD1jg/s1600/facebook-sprite.png)}
@keyframes social{from{background-position:0 0}
to{background-position:-600px 0}
}
@-webkit-keyframes social{from{social-position:0 0}
to{background-position:-600px 0}
}
@keyframes social-rss{from{background-position:0 0}
to{background-position:-450px 0}
}
@-webkit-keyframes social-rss{from{social-position:0 0}
to{background-position:-450px 0}
}
</style>
<div>
<a href="https://twitter.com/quocdoantrinh" title="Follow us on Twitter" class="social-link social-twitter"></a><div>
<div>
<a href="https://www.facebook.com/mrjan.tk" title="Like us on Facebook" class="social-link social-facebook"></a></div>
<div>
<a href="http://feeds.feedburner.com/KjMagic" title="Subscribe to our RSS Feeds" class="social-link social-rss"></a></div>
</div>
</div>
<!--/Animated Social Media Icons by kjmagic.blogspot.com-->

Chỉnh sửa những chỗ mình in đậm thành ID Twitter, Facebook Fanpage và Feedburner của bạn. Cuối cùng là lưu lại và xem kết quả.

Chúc các bạn thành công !