Tạo danh sách liên kết dạng trượt với jquery

Được đăng bởi Văn Khương 10 nhận xét

Tạo một danh sách liên kết các Blog bạn bè một cách chuyên nghiệp hơn với hiệu ứng trượt dọc trong một khung cố định, giúp tiết kiệm diện tích cho sidebar nhưng vẫn đảm bảo khả năng nhồi nhét hết mức có thể tất cả link,đoạn text,hình ảnh hay bất cứ đối tượng nào khác...

Demo ( bạn bè )

1. Đăng nhập blogger => mẫu => chỉnh sửa html
2. Tìm đến </head> sau đó chèn lên trước thẻ </head> đoạn script sau

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript">
</script>
<script src="http://iamtao-chiase.googlecode.com/files/jquery.lienketblog.js" type="text/javascript">
</script>
 <script type="text/javascript">
  $(function(){
   $('#vertical-ticker').totemticker({
    row_height : '100px',
    next  : '#ticker-next',
    previous : '#ticker-previous',
    stop  : '#stop',
    start  : '#start',
    mousestop : true,
   });
  });
 
</script>

* Trước tiên,bạn chưa nên chèn jquery.min.js để tránh trường hợp blog của bạn đã có rồi ,gây xung đột giữa các file js với nhau.Đến khi hoàn tất rồi mà không tháy thành công thì bạn mới tiến hành thêm nó vào.


3. Tìm đến   ]]></b:skin> rồi chèn đoạn CSS sau lên trước nó.

#wrapper{
padding:0px;
width:100%;
margin:0 auto;
}
p{color:#fff; padding:3px 0; text-align:left;}
#vertical-ticker{
height:280px;
overflow:hidden;
margin:0; padding:0;
-webkit-box-shadow:0 1px 3px rgba(0,0,0, .4);
}
#vertical-ticker li{
padding:7px 10px;
display:block;
background:#f7f7f7;
color:#333;
border-bottom:1px solid #ddd;
text-align:left;
font-size:15px;
font-weight:bold;
font-family: Helvetica Neue, times, serif;}

4. Tạo 1 tiện ích  html/javascript  rồi chèn đoạn mã sau :

<div id="wrapper">
<ul id="vertical-ticker">
<li><img src="Link ico" /><a href="http://www.blogger.com/LINK%20LIEN%20KET" target="_blank" title="">LINK LIEN KET</a></li>
<li><img src="Link ico" /> <a href="http://www.blogger.com/LINK%20LIEN%20KET" target="_blank">LINK LIEN KET</a></li>
<li><img src="http://www.iamtao.info/favicon.ico" /> <a href="http://iamtao.info/" target="_blank" title="Blog cá nhân của Nguyễn Văn Khương"><span style="color: #0c4fca;">I am Tao </span></a></li>
</ul>
<div class="wrapper">

<center><a href="http://www.blogger.com/blogger.g?blogID=781987616390658303#" id="ticker-previous"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYZ4jU1a9Jd1xuTGhcrLWTiGPkBGIM7X-qxjj0YHcSQOeyZmdGXg1oYfcDbLs8C7tkRNn2Y61WFMdOnFJhPi9hq7cT3jTC9aFE6IG9wNHFkzXxMJ7tqiUxaGy1zEijX-DAmXvAHWHdT9c/h120/next-post.png" /></a> _ _ _<a href="http://www.blogger.com/LINK%20DAT%20LIEN%20KET">Đặt liên kết</a> _ _ _<a href="http://www.blogger.com/blogger.g?blogID=781987616390658303#" id="ticker-next"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPkYnVqrc6BGwgeeGQfrXVcjayoenYYFYikAGefG9xLkuFa5n5GuGdFamJF1e118norBi0p4ctwUBQr7jSbMC1JPN_wZgiRte7Ts8ok7D5bd1EjKRy9aDozbUK8aqMD0cu2lx-GoMsvvM/h120/next-post.png" /></a></center></div>
</div>

Thêm các link liên kết bằng thẻ <li>....</li>
Có thể thêm 2 chức năng chạy và dừng bằng đoạn mã sau:

<a id="stop" href="#">Dừng</a> 
<a id="start" href="#">Chạy</a>

Chúc bạn thành công

Nguồn : ktnha.blogspot.com

Copy : Hoithanhcaygiang.vn

Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!