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

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/AVvXsEiyQhuEZ1BROd54KPjaBYC-UpzUgJBjW_DzWi6VJpbG5xHxwyLuPKiL9OLTfuGsXFJM3YXtOfTLgMsX1vH5KsX6xLANiAaM6zIAKd_tKNeH1hk6QRywpL2jQlIBgaeGYOKye7WF4UZMc9g/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/AVvXsEhDGXU6atvZDTRi1EmCjI4an5b_3l00nNMO-8sA9R8MH1TPUFMmi6rHqdUlMTnx9WAKPEtPqegoowrKuJXtWywf5XowzCi4NRVXDX9cd8KiRf-NUaUx78BYPTkWRv9xYT5u3LqbzKn4K6o/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>

Bài viết  thay cho câu trả lời đến hai Bạn: Phạm Minh Tâm  và  Tahaefment  đã có lời đề nghị mình chia sẻ tiện ích này.
lúc 01:54 3 tháng 3, 2012

Chào bạn...
Cái này hay đấy, nhưng tớ đang gặp chút rắc rối về js, chẳng biết bạn có thể giúp đỡ không?

lúc 03:16 3 tháng 3, 2012

Mình cũng gặp một vấn đề, đó là nếu jquery.min.js thì slite show không hoạt động, còn nếu không chèn thì hai nút <----> không hoạt động, mong bạn giúp mình

lúc 07:56 3 tháng 3, 2012

@TahaefmentÝ của bạn là nếu không chèn jquery.min.js thì nó vẫn hoạt động bình thường,trừ phần next và preview..???.

lúc 08:22 3 tháng 3, 2012

nó vẫn hoạt động bình thường nhưng chổ trình diễn bài viết ở đầu blog không hoạt động á

lúc 08:50 3 tháng 3, 2012

@TahaefmentVậy là vấn đề ở js thứ 2.Bạn thử thay"jquery.lienketblog.js"bằng "jquery.lienketblog2.js" xem sao!

lúc 21:39 5 tháng 3, 2012

demo ??

lúc 10:46 6 tháng 3, 2012

@Topmuzik.infoYou can see it in my friends list (Vietnamese - Bạn bè )Thank for comment!

lúc 13:08 20 tháng 3, 2012

Bác chuyển nhà rồi ah

lúc 01:09 21 tháng 3, 2012

@Đing Kiu TruêỪ, mới chuyển tên miền thôi, còn nhà mới hi vọng sẽ được hoàn tất trong thời gian tới.

lúc 01:51 24 tháng 7, 2012

chào bạn. Bài viết rất hay, mình đã làm được cho trang của mình là www.marketing4u.vn. Cảm ơn bạn rất nhiều. Mình muốn chỉnh sửa về khung hoặc trang trí cho khung đó thì chỉnh sửa ở phần nào vậy bạn? VÀ mình muốn trao đổi backlink với trang của bạn có được không?

Đăng nhận xét

Lên trên