Tab Menu

Hiệu ứng cuộn cho Popular post - Blogspot

Hiệu ứng cuộn jquery, bai viet noi bat, scroll with jquery Popular post with Jquery effect.
Bạn cũng có thể dễ dàng thấy được hiệu ứng đó trên blog của mình. Nó giúp cho những bài viết gây được sự chú ý nhiều hơn.
Đầu tiên, bạn phải chèn gadget Popular post vào blog của mình. Tiếp đến là nhúng đoạn Jquery bên dưới vào blog. Với một chút Css bạn sẽ làm nên sự khác biệt.


Sau khi đã nhúng gadget Popular post vào blog. Bạn vào Template > Edit HTML > Process và check vào Expand Widget Templates để mở rộng cả những gadget.
Bằng cách nào đó smug bạn tìm đến dòng widget-content popular-posts và chèn tag <div class='newsticker-jcarousellite'> phía dưới. Lưu ý nhớ đóng tag nhé.
<div class='widget-content popular-posts'>
<!-- CHEN TAG DIV O DAY -->
<div class='newsticker-jcarousellite'>

<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
..................
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>

<!-- DONG TAG DIV -->
</div>
<b:include name='quickedit'/>

Bây giờ việc còn lại là chèn Jquery phía dưới vào trong tag <head> </head>
<script src='http://www.webdesignbooth.com/demo/news-ticker/jquery-latest.pack.js' type='text/javascript'/>
<script src='http://www.webdesignbooth.com/demo/news-ticker/jcarousellite_1.0.1c4.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
 $(&quot;.newsticker-jcarousellite&quot;).jCarouselLite({
  vertical: true,
  hoverPause:true,
  visible: 3,
  auto:5000,
  speed:1000
 });
});
</script>
Giải thích: thay đổi số items hiển thị tại visible và tốc độ speed. Nếu muốn trượt ngang vertical: false

Save template vậy là OK

Hiện có 0 comments

Post a Comment

Bạn có thể tự do cho ý kiến, thảo luận về bài viết này nhưng phải theo những điều khoản sau:
- Phải nghiêm túc, không dung tục, không spam.
- Nội dung phải liên quan đến bài viết.
- Không mang tính chất chính trị...
- Hạn chế sử dụng Ẩn danh, hãy dùng Tên/URL để thay thế.
Lưu ý : Có thể sử dụng tag HTML cơ bản trong comment: br, b, i, u, a href= ...

:)
:(
;)
:D
=))
:-/
:x
I-)
@-)
=D:
:-q
:-w
[-X
B-)
:((
:-B
:-h
:x(
:-*
~O)
@};-

About

RSS
Coming soon... :))