Ngày Thứ Sáu, 25 tháng 5, 2012 Blog của Báo Mới Hà Nội chia sẻ với bạn đọc bài viết Code Liên Kết Sử Dụng Hiệu Ứng Trượt
Chúc bạn xem tin tức vui vẻ !!
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" style="color:red;">Blog Giải Trí Tổng Hợp</a></li>
<li><a href="http://phimcuatoi.blogspot.com/" target="_blank" style="color:red;">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 !!!
Theo BlogKTV
Không có nhận xét nào:
Đăng nhận xét