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

(Traidatmui.com) – 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(http://lh5.ggpht.com/_BTztXRwC9ik/TNQPad_DI_I/AAAAAAAAEu4/wtICtukiAws/arrow-square-fd1.gif) 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://data-traidatmui.appspot.com/scripts/jquery.min.js" 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] = "http://lh4.ggpht.com/_BTztXRwC9ik/TNQPaazG7pI/AAAAAAAAEu8/eqq0bnR9d9c/nothumbnail.png";

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.traidatmui.com/"; //thay thành địa chỉ blog của bạn

</script>

<div class="accordion">
<script src="http://data-traidatmui.appspot.com/scripts/accordion_label.js" 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

Nếu bạn muốn hiển thi cho toàn bộ bài viết trên blog của bạn thì bạn thay file Script trên (accordion_label.js) thành link sau
http://data-traidatmui.appspot.com/scripts/accordion_post.js


Chúc bạn thành công
Tham khảo từ fandung.com

Xem khác cùng chủ đề

6 nhận xét | Viết lời bình

11/05/2010 06:12:00 CH Trả lời

bài viết này hay lắm;), phải add bookmarks mới dc. Chờ có dịp dùng nó thank share

12/23/2010 11:57:00 CH Trả lời

bạn ơi bài này hay quá ,nhưng sao mình cho vào blog mình thì k được
nếu để nguyên link phần " home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn"
thì được.nhưng nó hiện lên bài viết trên trang" traidatmui' này
còn thay link blog mình "http://bua-xua.blogspot.com/"
thì nó chả hiện gì cả
bạn giúp mình với nha
cảm ơn bạn trước

Admin
12/24/2010 03:25:00 SA Trả lời

Bạn hãy thay phần nhãn "Advanced blogger" thành nhãn trên blog của bạn thì nó mới hiển thị được bạn ah.

XDN
4/08/2011 08:04:00 CH Trả lời

Để hiển thị hết các bài viết trong 1 nhãn phải làm thế nào hả anh?

Admin
4/08/2011 11:33:00 CH Trả lời

Em thay phần số bài viết hiển thị (numposts = 15; ) thành số bài viết trong nhãn của em!

5/23/2012 10:38:00 SA Trả lời

cái này áp dụng thử ở blog mình thấy thay đổi giá trị độ rộng tiện ích thì ko làm thay đổi độ rộng tiện ích trên thực tế
Mình cho nó rộng đến 1000px mà nó vẫn cứ nhỏ xíu

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang