Bài viết mới nhất cuộn lên với Jquery cho Blogspot

Đăng bởi Admin | 12/2/13 | 0 nhận xét

Hiển thị một danh sách các bài viết gần đây bên sidebar của bạn là một cách tuyệt vời để giữ khách truy cập của bạn bận rộn. Có rất nhiều tiện ích bài viết gần đây bạn có thể sử dụng, nhưng namkna thủ thuật này chắc chắn sẽ gây sự chú ý của độc giả khi truy cập vào blog của bạn.

Widget bài viết gần đây này tương tự như các bài viết gần đây với hình thu nhỏ nhưng có thêm chức năng cuộn (Scrolling). Nó kết hợp các plugin vticker jQuery để tạo ra một hiệu ứng trượt đơn giản và kiểu dáng đẹp và cuộn các bài viết. Tiện ích được giới thiệu bởi stylifyyourblog.

XXEM DEMO

Ảnh minh họa:

Làm thế nào để add Scrolling Recent Post cho blogger?

1- Đăng nhập (login) vào Blog
2- Vào Bố cục (Lay out)
3- Chọn Thêm tiện ích (Add gadget)
4- Tạo một widget HTML/Javarscip và Thêm đoạn code bên dưới vào:

<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script style='text/javascript' src="http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/recentpostticker.js" ></script>
<script style='text/javascript' src='http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/recentpostswiththumbnailsv3.js'></script>
<script style='text/javascript'>
var numposts = 7;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
$(document).ready(function () {$('#sai').vTicker({
speed: 500,
pause: 3000,
showItems: 3,
animation: 'fade',
mousePause: false,
height: 0,
direction: 'up'
});});
</script>
<div id="sai">
<script src='http://thuthuatvitinhaz.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
</div>

Trong đó:

• Nếu blog bạn đã có thư viện Jquery thì hãy loại bỏ code màu xanh đi.
• Thay http://thuthuatvitinhaz.blogspot.com/ thành URL blog của bạn.
• numposts =7; là số lượng bài viết muốn hiển thị.
• showItems:3 Số bài viết hiển thị trong 1 lần chuyển động.
• speed: 500, thời gian chuyển động
• pause: 3000, thời gian dừng sau mỗi lần chuyển động
• var showpostthumbnails = true; hiển thị ảnh thumbnail nếu không muốn thì thay truethành false
• var showcommentnum = false; Nếu muốn hiển thị số comment thì thay flase thànhtrue
• var showpostdate = false; Nếu muốn hiển thị ngày đăng thì thay flase thành true
• var showpostsummary = false; Nếu muốn hiển thị mô tả thì thay false thành true
• width:55px;height:55px Chiều rộng và cao của ảnh thumbnail
• float:right Ảnh ở bên phải tiêu đề nếu muốn bên trái thì thay right thành left

Chú ý: 

Một điều rất quan trọng. Tiện ích có thể xảy ra tình trạng hiệu ứng di chuyển có thể khônghoạt động, có thể do mâu thuẫn giữa một số plugin jQuery đã có trong Blog của bạn, giải pháp phổ biến nhất để điều này là thêm mã sau đây vào cuối tiện ích:

<script type='text/javascript'>
jQuery.noConflict();
</script>

Nếu hiệu ứng di chuyển vẫn không làm việc thì bạn có thể loại bỏ bất kỳ plugin jQuery khác trong blog.

stylifyyourblog
                                                                                                             Thu thuat vi tinh