Vua 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!
kinh doanh, bán hàng, tư vấn, bảo hiểm Những cá nhân, tổ chức, đại lý,muốn bán, hợp đồng bảo hiểm
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!
tcaviet@gmail.com

0 comments:

Post a Comment

domain, domain name, premium domain name for sales

Bài hay:

kinh doanh, bán hàng, tư vấn, bảo hiểm Những cá nhân, tổ chức, đại lý,muốn bán, hợp đồng bảo hiểm