Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
kiem tien, kiem tien online, kiem tien truc tuyen, kiem tien tren mang
Sunday, May 18, 2014

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!

0 comments:

Post a Comment

Popular Posts