Recent posts - Bài viết mới thanh cuộn cho blogger

Thủ thuật recent posts - bài viết mới cho blogger được khá nhiều Blogger sử dụng và đã viết bài về nó nhưng ở đây mình vẫn muốn giới thiệu tới các bạn thủ thuật này và cách tùy chỉnh của nó.
Dạng thủ thuật blogspot bài viết mới này sử dụng Jquery để tạo thanh cuộn và hiệu ứng hình ảnh khá đẹp mắt.

DEMO XEM TẠI Blog: Ảnh bìa FB
- Cách làm thủ thuật này:
+ Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML) và dán đoạn code  sau ngay trước thẻ đóng </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> 
+ Lưu template lại
+ Vào bố cục (Layout) -> Thêm tiện ích (Add a widget) -> HTML/Javascript
+ Dán đoạn Code dưới đây vào tiện ích vừa thêm

<style type="text/css" media="screen">
<!--

/* == Huong dan thu thuat: itviet360.com == */

#helperblogger-widget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}

#helperblogger-widget ul {
width: 285px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}

#helperblogger-widget li {
width: 275px;
padding: 5px 5px;
margin: 0px 0px 5px 0px;
list-style-type: none;
float: none;
height: 80px;
overflow: hidden;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYAKlBGlPlOYfet9EaV57bRvndbG3lR_AB_sGNV94rsGuOCQ1ZntYfOqhPNPRmgIEyGMgVCf_8YdYCKLvpsu0L_cw-z5hkYZVnN2v1hL2YaKk2zx2qhdDPgPaFAa5jdvWwY-zi2D_LuNQ/s1600/helperblogger.com-post.jpg) repeat-x;
border: 1px solid #ddd;
}

#helperblogger-widget li a {
text-decoration: none;
color: #4B545B;
font-size: 13px;
height: 15px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}

#helperblogger-widget img {
float: left;
margin-top: 10px;
margin-right: 10px;
background: #EFEFEF;
border: 0;
}

#helperblogger-widget img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#helperblogger-widget img:hover {
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.spydate {
overflow: hidden;
font-size: 10px;
color: #0284C2;
padding: 2px 0px;
margin: 1px 0px 0px 0px;
height: 15px;
font-family: Tahoma,Arial,verdana, sans-serif;
}

.spycomment {
overflow: hidden;
font-family: Tahoma,Arial,verdana, sans-serif;
font-size: 10px;
color: #262B2F;
padding: 0px 0px;
margin: 0px 0px;
}

/* == Huong dan thu thuat: itviet360.com == */

-->
</style>

<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWtE1RyWV7cgLnbAKdCtcQ_eAIGmeiE3QhHfbyU8xLZEaLsmAqdlh9Fsdomab8YKmrMec6lCEWBcx4bYJmHFRTcQrsrb7k1mAJ8AJ2goX2Ya1MiiEiKxiPJbbRbpOBIYH-iS0itu1axoY/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWtE1RyWV7cgLnbAKdCtcQ_eAIGmeiE3QhHfbyU8xLZEaLsmAqdlh9Fsdomab8YKmrMec6lCEWBcx4bYJmHFRTcQrsrb7k1mAJ8AJ2goX2Ya1MiiEiKxiPJbbRbpOBIYH-iS0itu1axoY/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWtE1RyWV7cgLnbAKdCtcQ_eAIGmeiE3QhHfbyU8xLZEaLsmAqdlh9Fsdomab8YKmrMec6lCEWBcx4bYJmHFRTcQrsrb7k1mAJ8AJ2goX2Ya1MiiEiKxiPJbbRbpOBIYH-iS0itu1axoY/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWtE1RyWV7cgLnbAKdCtcQ_eAIGmeiE3QhHfbyU8xLZEaLsmAqdlh9Fsdomab8YKmrMec6lCEWBcx4bYJmHFRTcQrsrb7k1mAJ8AJ2goX2Ya1MiiEiKxiPJbbRbpOBIYH-iS0itu1axoY/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWtE1RyWV7cgLnbAKdCtcQ_eAIGmeiE3QhHfbyU8xLZEaLsmAqdlh9Fsdomab8YKmrMec6lCEWBcx4bYJmHFRTcQrsrb7k1mAJ8AJ2goX2Ya1MiiEiKxiPJbbRbpOBIYH-iS0itu1axoY/s1600/no-thumbnail.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 20;
home_page = "http://www.itviet360.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="helperblogger-widget">
<script src='http://itviet360.googlecode.com/files/recent-posts.js' type='text/javascript'></script>
</div>

+ Các thông số cần lưu ý (CSS thì các bạn tùy chỉnh cho phù hợp với độ rộng, chiều cao... nhé)
numposts = 20; 
home_page = "http://www.itviet360.com/"; 
limitspy=4; 
numposts: số lượng bài viết gần đây được hiển thị.
home_page: thay bằng link site của bạn.
Limitspy:
Số lượng bài viết nằm trong thanh cuộn di chuyển