• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Tiện ích Bài viết mới nhất với hiệu ứng accordion

4
02/01/2011

Tiện ích Bài viết mới nhất rất cần thiết cho blogspot và tiện ích này cũng đã có nhiều biến thể với nhiều hiệu ứng. Ví dụ như tiện ích Bài viết mới nhất với hiệu ứng Spy.

Chúng ta đã biết hiệu ứng đàn xếp rất hữu ích trong thiết kế website qua bài viết này. Tôi có ý tưởng kết hợp tiện ích Bài viết mới nhất có ảnh đại diện với hiệu ứng đàn xếp để cho ra tiện ích gọi là Bài viết mới nhất có ảnh đại diện với hiệu ứng đàn xếp (Recent Posts with Thumbnails and Accordion Effect). :17)

Xem Demo.

Nếu bạn muốn cài đặt tiện ích này cho blogspot của mình thì hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML.

Đặt đoạn code sau đây vào trước thẻ </head>.

<script src='http://hacodeproject.googlecode.com/files/jquery4accordion.js' type='text/javascript'/>
<style type='text/css'>
.accordion{width:300px;border-bottom:solid 1px #c4c4c4}
.accordion h3{background:#e9e7e7 url(http://bit.ly/fCBbB0) no-repeat right -51px;padding:7px 15px;margin:0;font:bold 13px Arial,Tahoma,sans-serif;border:solid 1px #c4c4c4;border-bottom:none;cursor:pointer;color:blue;text-align:justify}
.accordion h3:hover{background-color:#e3e2e2}
.accordion h3.active{background-position:right 5px}
.accordion p{background:#f7f7f7;margin:0;line-height:1.5em;padding:10px 15px 20px;border-left:solid 1px #c4c4c4;border-right:solid 1px #c4c4c4;text-align:justify}
</style>
<script type='text/javascript'>
$(document).ready(function(){

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

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

});
</script>

Lưu Template.

Trong phần CSS ở trên, chú ý tham số width:300px, bạn cần điều chỉnh chiều rộng tương đương với chiều rộng tại vị trí đặt tiện ích.

Bước 2. Vào Page Elements, thêm một tiện ích HTML/JavaScript và đặt toàn bộ đoạn code dưới đây vào phần Nội dung của tiện ích.

<script type='text/javascript'>
imgr = new Array();
imgr[0] = "http://bit.ly/hGWr7r";
showRandomImg = true;

jimgwidth = 50;
jimgheight = 50;
jfntsize = 11;
jacolor = "#000";
jasize = "2";
jaBold = true;

jtext = "";
jshowPostDate = false;

sumtitle = 28;
jsummaryPost = 90;
numposts = 7;
label = "Thủ thuật Blogger";
home_page = "http://huynh-nhat-ha.blogspot.com/";
</script>

<div class="accordion">
<script src="http://hacodeproject.googlecode.com/files/accordion-recentposts4allposts.js" type="text/javascript"></script>
</div>

Nếu bạn sử dụng tiện ích Bài viết mới nhất với hiệu ứng đàn xếp cho một nhãn nào đó thì thay file js được đánh dấu màu đỏ thành như sau:

http://hacodeproject.googlecode.com/files/accordion-recentposts4label.js

Và đặt tên nhãn ở dòng label = "Thủ thuật Blogger";

Bạn cần phải thay huynh-nhat-ha thành tên blogspot của bạn nữa nhé. :37)

{4 bình luậnAdd yours ?}

Nặc danh
14:20:00, 3 thg 1, 2011

Nếu muốn tiêu đề bài viết hiện đầy đủ thì làm thế nào vậy bạn? xin cảm ơn.

Reply
19:21:00, 3 thg 1, 2011

:-o Nếu bạn muốn tiêu đề bài viết hiện đầy đủ thì ở bước 2, sử dụng file http://hacodeproject.googlecode.com/files/acco-recentposts4allposts-fullposttitle.js đối với cả blog hoặc file http://hacodeproject.googlecode.com/files/acco-recentposts4label-fullposttitle.js đối với nhãn (thay thế file js được đánh dấu màu đỏ), và bỏ dòng sumtitle = 28;.

Reply
21:17:00, 24 thg 2, 2011

Bạn ơi mình copy code gòi paste vào trước thẻ [/head] như ở bước 1 xong rồi thì ko lưu template đc, nhấp rất nhiều lần nó vẫn cứ đứng im vậy là sao bạn, nhìu thủ thuật khác đặt code trước thẻ [/head] hay sau thẻ [head] đều bị vậy, bạn giúp mình với :((

Reply
21:55:00, 24 thg 2, 2011

Hi hi giúp sao được. Hôm nay (24-02-2011) từ chiều Blogger bảo trì hệ thống nên ai cũng không Edit, Preview, Save Template được đâu bạn. Để mai Blogger bảo trì xong thì trở lại bình thường thôi. Mình cũng đang chịu sầu đây, k đụng đến Template được trong hôm nay.

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn