Home »
Thứ Ba

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



 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é.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
<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 ngangvertical: false

Save template vậy là OK
Tags: ,

You may also...

Comments[ 0 ]


Đăng nhận xét

Bài đăng phổ biến