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

Điểm 4.6/5 dựa vào 87 đánh giá

(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

Loading...

6 nhận xét

  1. 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

    Trả lờiXóa
  2. 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

    Trả lờiXóa
  3. 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.

    Trả lờiXóa
  4. Để hiển thị hết các bài viết trong 1 nhãn phải làm thế nào hả anh?

    Trả lờiXóa
  5. 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!

    Trả lờiXóa
  6. 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

    Trả lờiXóa