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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3jW9KZgjPLLFtPL1zXI_i_Kt1ndT_hRxfQ5wvv9lNhHvmVgwEviuqbEUYhO7gcUrfAtZTlCkS7k9cjKW5Bh7wes6nR95xnEc60X7i6XGIiQnOr99NSrtEzZqX8MasXYY2Aki4iuJBYj4/w60-h150-no/facebook.png) no-repeat 0 -88px}
.ic-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3jW9KZgjPLLFtPL1zXI_i_Kt1ndT_hRxfQ5wvv9lNhHvmVgwEviuqbEUYhO7gcUrfAtZTlCkS7k9cjKW5Bh7wes6nR95xnEc60X7i6XGIiQnOr99NSrtEzZqX8MasXYY2Aki4iuJBYj4/w60-h150-no/facebook.png) no-repeat 0 0}
.ic-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8xWC3YYGmzAIdF53iJ6t5Kevs0xl3j6kgp4OdSnoE-7-XwN6A5RlM4Dwp_05nD0x16sz3UfXQIEoWlwul1WBN9nSiLY2vqMwcoCx2w-KcFNDjqtYoTY9Xa6KU8t4az2Jo8tClQt8y1VU/w60-h150-no/twitter-1.png) no-repeat 0 -88px}
.ic-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8xWC3YYGmzAIdF53iJ6t5Kevs0xl3j6kgp4OdSnoE-7-XwN6A5RlM4Dwp_05nD0x16sz3UfXQIEoWlwul1WBN9nSiLY2vqMwcoCx2w-KcFNDjqtYoTY9Xa6KU8t4az2Jo8tClQt8y1VU/w60-h150-no/twitter-1.png) no-repeat 0 0}
.ic-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaE74bETq_nlIJAxLOTspDLo6UQNEJmONQcSkwghjjYFoel-99PHK_t9aN6YpcBloTlM9NF5fX6ml_Vf20Y0w73nzOgzZCpFIJv2wk2VGBDsGKPgbap9-iRVq1p1Z46rYanLfkFfC1IKk/w60-h150-no/google.png) no-repeat 0 -88px}
.ic-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaE74bETq_nlIJAxLOTspDLo6UQNEJmONQcSkwghjjYFoel-99PHK_t9aN6YpcBloTlM9NF5fX6ml_Vf20Y0w73nzOgzZCpFIJv2wk2VGBDsGKPgbap9-iRVq1p1Z46rYanLfkFfC1IKk/w60-h150-no/google.png) no-repeat 0 0}
.ic-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM5Jevwplmn8bxt6S-cPAubntDyMp3Q4AbunPmA_tdl09MXhRXv5f8G-AULK1jrE21HDmWrzgfPLxX4PplVXjV-0s4K6BmXMgdKJlJ0jmNVPxqrIP7LvmxDuhZggsp07Ev5ub-Nj0E2ok/w60-h150-no/rss.png) no-repeat 0 -88px}
.ic-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM5Jevwplmn8bxt6S-cPAubntDyMp3Q4AbunPmA_tdl09MXhRXv5f8G-AULK1jrE21HDmWrzgfPLxX4PplVXjV-0s4K6BmXMgdKJlJ0jmNVPxqrIP7LvmxDuhZggsp07Ev5ub-Nj0E2ok/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!
Belum ada tanggapan untuk "Icons mạng xã hội với hiệu ứng trượt cho Blogger"
Post a Comment