Icons mạng xã hội với hiệu ứng trượt cho Blogger

Icons mạng xã hội với hiệu ứng trượt cho Blogger
Xin chào các bạn, ở bài viết này mình xin chia sẻ với các bạn bộ tứ icon facebook, twitter, google plus, rss với hiệu ứng trượt cực kỳ ngầu làm bằng CSS, không sử dụng bất kì thứ gì từ Javascript. Bộ icon này rất thích hợp cho các bạn có một website đơn giản, nhưng vẫn muốn một cái gì đó ấn tượng, mà không ảnh hưởng nhiều đến tốc độ tải trang. Demo bạn có thể xem ngay dưới đây.


Hướng dãn cài đặt và sử dụng icons mạng xã hội với hiệu ứng trượt 

Đầu tiên các bạn đăng nhập vào Blogger >> Bố cục >> chọn vào Thêm Tiện ích tại vị trí mà bạn muốn đặt, tìm đến và tiếp tục chọn HTML/Javascript. Tiếp theo tại hộp thoại của HTML/Javascript bạn chèn đoạn code phía dưới vào Nội dung và lưu lại.
<div class="ic-social-slide">
<ul>
<ul>
<li><a class="facebook" href="#" target="_blank">Facebook</a></li>
<li><a class="twitter" href="#" target="_blank">Twitter</a></li>
<li><a class="google-p" href="#" target="_blank">Google plus</a></li>
<li><a class="rss" href="#" target="_blank">Rss</a></li>
</ul>
</div>
<style>
.ic-social-slide ul li{list-style:none;border-bottom:none;padding:0;float:left;}
.ic-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;border:solid 1px #222121;border-radius:5px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0}
.ic-social-slide li a.facebook{background:url(https://lh4.googleusercontent.com/-fSYfiUTcf4o/UphG-c59hiI/AAAAAAAABBg/0jY8y8LYCH4/w60-h150-no/facebook.png) no-repeat 0 -88px}
.ic-social-slide li a.facebook:hover{background:url(https://lh4.googleusercontent.com/-fSYfiUTcf4o/UphG-c59hiI/AAAAAAAABBg/0jY8y8LYCH4/w60-h150-no/facebook.png) no-repeat 0 0}
.ic-social-slide li a.twitter{background:url(https://lh4.googleusercontent.com/-WaZ19nSAq6A/UphG_WiRtsI/AAAAAAAABB0/sjJJqcCZXyE/w60-h150-no/twitter-1.png) no-repeat 0 -88px}
.ic-social-slide li a.twitter:hover{background:url(https://lh4.googleusercontent.com/-WaZ19nSAq6A/UphG_WiRtsI/AAAAAAAABB0/sjJJqcCZXyE/w60-h150-no/twitter-1.png) no-repeat 0 0}
.ic-social-slide li a.google-p{background:url(https://lh3.googleusercontent.com/-iS191r3G5zE/UphG-ranruI/AAAAAAAABBo/ssSuYnJJYvU/w60-h150-no/google.png) no-repeat 0 -88px}
.ic-social-slide li a.google-p:hover{background:url(https://lh3.googleusercontent.com/-iS191r3G5zE/UphG-ranruI/AAAAAAAABBo/ssSuYnJJYvU/w60-h150-no/google.png) no-repeat 0 0}
.ic-social-slide li a.rss{background:url(https://lh6.googleusercontent.com/-aWvPX6YQ1t8/UphG-7CL36I/AAAAAAAABBw/a5L_N2HzYhU/w60-h150-no/rss.png) no-repeat 0 -88px}
.ic-social-slide li a.rss:hover{background:url(https://lh6.googleusercontent.com/-aWvPX6YQ1t8/UphG-7CL36I/AAAAAAAABBw/a5L_N2HzYhU/w60-h150-no/rss.png) no-repeat 0 0}
</style>
Cuối cùng các bạn thay toàn bộ # thành địa chỉ đến các trang mạng xã hội của bạn, chúc bạn thành công!

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.