Recent posts với hiệu ứng trượt bằng jQuery

Tiện ích này có điểm đặc biệt là phần ảnh thumbnail, tiêu đề bài viết và đoạn trích dẫn mô tả chỉ hiện thị khi ta click thanh menu ngang chứa tên của bài viết.

Chắc hẳn nhiều người không còn xa lạ vói thủ thuật này vì đã có rất nhiều trang blog giới thiệu  
4- Dán đoạn code sau vào trước thẻ đóng </head>Demo for Post
Ảnh minh họa:

☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào thiết kế
3- Chọn Chỉnh sửa HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();

$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});

});
</script>

<style type="text/css">
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #e9e7e7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVbyzA451ezMkEpP0R900uGNAgoUmGHeo_-mn64xVFjZIr-mpd71xrVFltGqELsprm7Va1A56Vdn3E9kGKpn8LQdaQx6prSGE-NWgzn-J9AJKV2hiH5XI4qyS-Kx1lS54tsdYzx80wuACY/h120/arrow-square-namkna-blogspot-com.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
</style>

5-bấm Lưu Mẫu (save template) lại.
6. Tạo 1 widget HTML/Javascript rồi dán code bên dưới vào:

<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ngV5oMGLcTpqvAPvSyUR-XWGH7UjlCPxeFv-f2NYkd-fChVG3gcTG3toAd_e0IOZ9YQZMN4F1EzJnbuu3wqs25Ua4wLnKMOi9aPFNuovZvzenkeu-zahTHI3BlDs9jnfXI-qWvs_lZIF/s320/nothumbnail-namkna-blogspot-com.gif";

showRandomImg = true;

jimgwidth = 80;
jimgheight = 80;
jfntsize = 12;
jacolor = "#E67C15";
jaBold = true;

jtext = "Comments";
jshowPostDate = true;

jsummaryPost = 200;
summaryFontsize = 12;
summaryColor = "#000";

numposts = 10;
label = "Blogspot-tips";
home_page = "http://namkna.blogspot.com/";

</script>

<div class="accordion">
<script src="http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/j-label-fix.js" type="text/javascript"></script>
</div>

label = "Blogspot-tips"; là nhãn (laber) bạn muốn hiển thị. Thay Blogspot-tips thành tên nhãn.
home_page = "http:/namkna.blogspot.com/"; là URL địa chỉ blog của bạn.
numposts = 10; Số bài viết muốn hiển thị
jsummaryPost = 200; Số ký tự mô tả.
jimgwidth = 80; chiều rộng của ảnh thumbnail
jimgheight = 80; chiều cao của ảnh thumbnail
jfntsize = 12; .
Nếu muốn hiển thị cho cả blog thì thay link scip:

http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/j-label-fix.js

Thành:

http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/j-post-fix.js

Chúc thành công!

THỦ THUẬT 04:40