Hiển thị bài viết với hiệu ứng trượt bằng Jquery

Hôm nay mình xin chia sẻ đến các bạn một các hiển thị bài đăng với hiệu ứng trượt khi click vào tiêu đề bài viết,bài viết ứng dụng với Jquery. Với thủ thuật này, bài viết của bạn sẽ chỉ hiển thị tóm tắt một bài viết đầu tiên, còn các bài viết còn lại chỉ hiển thị tiêu đề. Khi bạn click xem một bài nào đấy thì các bài viết khác sẽ thu gọn lại, chỉ hiển thị tiêu đề. Bây giờ chúng ta sẽ tiến hành thủ thuật này.

Hình ảnh minh họa

1. Đăng nhập vào Blogger
2. Vào thiết kế (Design) và chọn chỉnh sửa HTML
3. Chèn code bên dưới vào trước thẻ ]]></b:skin>
.accordion {
width: 600px; /* độ rộng tiện ích*/
border-bottom: solid 1px #c4c4c4;
color:#000;}
.accordion h3 {
background: #616D7E url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNLknMr8bqq9Tt-aEoGnoPTxWvuXt91RQZx9tq5Pu2NN-Gw6qxTCT1nH4aJWyXlNl0futYPkZoEon3Ih8TUjF4UwoRY3DgBaLQLoFaCo2TSzmYOxmo3hnl143j9aqSqBxTaD8RKwQo6QSQ/) no-repeat right -51px;
padding: 5px 27px 5px 8px;
margin: 0px;
font: bold 12px Arial, Helvetica, sans-serif; /* kiểu font của tiêu đề bài viết hiển thị trên header*/
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
color:#fff; /* màu tiêu đề bài viết hiển thị trên header*/
}
.accordion h3:hover {
background-color: #ccc; /* màu nền khi rê chuột*/
color:#000099; /* màu tiêu đề khi rê chuột*/
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0px;
padding: 8px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
.accordion p a{
color:#0000ff; /* màu tiêu đề bài viết */
}
.accordion p a:hover{
color:#ff0000; /* màu tiêu đề bài viết khi rê chuột*/
}
.accordion-img{
float:left;
border: #ddd 1px solid;
padding:2px;
margin-right:4px;}

4. Save template lại
5. Trở lại phần tử trang và thêm 1 HTML/Javascript
6. Thêm vào HTML/Javascript đoạn code sau
<script src="http://tranphucminh.110mb.com/jquery.min.js.mp3.txt" type="text/javascript"></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>

<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQvDL0KLYFsnYmWu_1XTxRNcUEZmG_RTq4McNGdT71iyiG-rDVoAMUt1wk0DMC6vdBqYS5HyRPymRGjuk5Oc-lTGV-Ox2cDBQfoL-F5hidq03Ezse3NWhVA_-8weLozn8m3Ulvkm7yXora/";

showRandomImg = true;

jimgwidth = 80; //độ rộng của ảnh thumb
jimgheight = 80; //chiều cao của ảnh thumb
jfntsize = 10;
jacolor = "#000";
jasize = "2"; //kích cỡ của phần comments vào phần days
jaBold = true;

jtext = "Comments";
jshowPostDate = true; //nếu không muốn hiển thị phần comments và phần day bạn đổi TRUE thành FALSE

jsummaryPost = 400; //số ký tự hiển thị trong phần tóm tắt

numposts = 15; //số bài viết hiển thị
label = "Advanced blogger"; //nhãn bài viết thay thành nhãn bài viết của bạn
home_page = "http://www.tranphucminh.blogspot.com/"; //thay thành địa chỉ blog của bạn

</script>

<div class="accordion">
<script src="http://tranphucminh.110mb.com/accordion_post.js.mp3.txt" type="text/javascript"></script>
</div>

Chỉnh code: Bạn dựa vào các dòng chỉ dẫn để chỉnh sửa lại cho phù hợp với blog của bạn.
7. Save tiện ích lại Nguồn: traidatmui.com