Code Liên Kết Sử Dụng Hiệu Ứng Trượt

Bạn muốn tạo cho blog / web mình một khung liên kết bạn bè nhưng lại muốn làm nó trông mượt hơn, điều này hoàn toàn có thể làm được. Tình cờ ghé thăm blog KTV, Tanchau123 đã thấy bài viết tạo "code liên kết bạn bè rất hay" và đã đem về áp dụng cho blog. Tuy nhiên điểm yếu bên code của Blog KTV là liên kết không được mở trong tab mới khi ta click vào. Vì vậy Tanchau123 đã chỉnh sữa lại phần này và cho ra đời bài viết hôm nay.





CÁC BƯỚC THỰC HIỆN:

1. Đăng nhập Blogger.
2. Vào Thiết Kế => Phần Tử Trang => Thêm Tiện Ích
3. Chọn HTML/Javascript và paste toàn bộ đoạn code sau vào:

<!-- Code by http://tanchau123.blogspot.com -->
<style>
#lienketbanbe {
 width: 280px;
 border: 0px solid #333;
 overflow: auto;
 height: 250px;
 padding-left: 0px;
}

#lienketbanbe  ul {
 display: inline;
 margin-left: 0px;
}
#lienketbanbe  ul li {
 list-style: none;
 margin-left: 0px;
 background: #555353;
 border: 1px solid #fff;
 padding: 4px;
 padding-left: 15px;

-webkit-transition:all 3.5s ease;
 -moz-transition:all 3.5s ease;
 -o-transition:all 3.5s ease;
 transition:all 3.5s ease;
}

#lienketbanbe  ul li:hover {
 background: #00A2E8;
 border : 1px solid #fff;
 border-right: 10px solid #fff;
-webkit-transition:all 1.5s ease;
 -moz-transition:all 1.5s ease;
 -o-transition:all 1.5s ease;
 transition:all 1.5s ease;
}

#lienketbanbe  ul li a {
 color: #fff;
 text-decoration: none;
 font-family: Comic Sans MS;
 font-size: 16px;
 text-shadow: 0px 0px 1px #fff;
 -webkit-transition: padding 1.5s ease-out;
    -moz-transition: padding 1.5s ease-out;
    -o-transition: padding 1.5s ease-out;
 transition:all 1.5s ease;
}


#lienketbanbe  ul li a:hover {
 color: yellow;
 text-decoration: none;
 padding-left: 15px;
 -webkit-transition: padding 0.5s ease-out;
    -moz-transition: padding 0.5s ease-out;
    -o-transition: padding 0.5s ease-out;
 transition:all 0.5s ease;
}
</style>

<div id="lienketbanbe">

<ul>
<li><a href="http://tanchau123.blogspot.com/" target="_blank">Blog Giải Trí Tổng Hợp</a></li>
<li><a href="http://phimcuatoi.blogspot.com/" target="_blank">Phimcuatoi</a></li>
<li><a href="http://green-vietnam.com/" target="_blank">Green Việt Nam</a></li>
<li><a href="http://www.tintucdulich.info/" target="_blank">Vịnh Nam Lang</a></li>
<li><a href="http://namkna.blogspot.com/" target="_blank">Namkna Blog</a></li>
<li><a href="http://nguyenhaiblog.blogspot.com/" target="_blank">Nguyễn Hải Blog</a></li>
<li><a href="http://dungsoma.tk/" target="_blank">Đừng Sợ Ma</a></li>
<li><a href="http://www.hynls.info/" target="_blank">Hynls Blog</a></li>
<li><a href="http://hoangphamblog.blogspot.com/" target="_blank">Hoàng Phạm Blog</a></li>
<li><a href="http://mailenoni.blogspot.com/" target="_blank">Sản Phẩm Từ Trái Nhàu</a></li>
<li><a href="http://www.truyendich.net/" target="_blank">Truyện Dịch</a></li>
<li><a href="http://www.voquocan.com/" target="_blank">Võ Quốc An Blog</a></li>
<li><a href="http://www.vankhuong.com/" target="_blank">Văn Khương</a></li>
<li><a href="http://tranphucminh.blogspot.com/" target="_blank">Trần Phúc Minh Blog</a></li>
<li><a href="http://blogtructuyenvn.blogspot.com/" target="_blank">Blog Trực Tuyến</a></li>
<li><a href="http://www.dingkiutrue.com/" target="_blank">Đing Kiu Truê Blog</a></li>
<li><a href="http://www.thuthuat-mya5class.blogspot.com/" target="_blank">Mya5class</a></li>
<li><a href="http://www.blogktv.net/" target="_blank">Blog KTV</a></li>
<li><a href="http://vn-anime.blogspot.com/" target="_blank">VN-anime</a></li>
<li><a href="http://boxgiaitri.net/" target="_blank">Box Giải Trí</a></li>
<li><a href="http://giaitri89.blogspot.com/" target="_blank">Giaitri89</a></li>
<li><a href="http://www.conguyet.com/" target="_blank">Cổ Nguyệt Blog</a></li>
<li><a href="http://mayanheway.blogspot.com/" target="_blank">Máy Ảnh Số</a></li>
<li><a href="http://kenhtruyen.com/" target="_blank">Kênh Truyện</a></li>
</ul>
</div>
<!-- Code by http://tanchau123.blogspot.com -->

CHÚ Ý: Nhớ thay các đường link màu đỏ ở trên lại sao cho phù hợp với blog / web bạn. Nếu muốn thay đổi chiều rộng hoặc chiều cao của tiện ích thì tìm đoạn code width: 280px; và height: 250px; sửa 280px và 250px lại.


4. Lưu tiện ích lại và xem kết quả.
Chúc các bạn thành công !!!