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 đó
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 == "false"'>
<b:if cond='data:showSnippets == "false"'>
<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'/>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
<script src='http://www.webdesignbooth.com/demo/news-ticker/jcarousellite_1.0.1c4.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(".newsticker-jcarousellite").jCarouselLite({
vertical: true,
hoverPause:true,
visible: 3,
auto:5000,
speed:1000
});
});
</script>
Save template vậy là OK
0 Nhận xét