• 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 liên quan với hiệu ứng jQuery

9
23/02/2011

Theo yêu cầu của bạn Tùng Lâm, khi bạn ấy lướt web mới phát hiện một tiện ích Bài viết liên quan có hiệu ứng jQuery khá đẹp tại trang Simplebloggertutorials.com và bạn ấy hỏi tôi có thể hướng dẫn thủ thuật này được không. Sau khi nghiên cứu, tôi nhận thấy thủ thuật này có sử dụng thư viện jQuery để tạo hiệu ứng và tiện ích được phát triển bởi Mike, một chuyên gia thiết kế web là admin của trang Moretechtips.com. Trang này có phát triển rất nhiều tiện ích liên quan đến Twitter sử dụng hiệu ứng jQuery. Bạn có thể khám phá thêm nếu thích các tiện ích của Mike.

Lưu ý tiện ích Bài viết liên quan ở đây có sử dụng jQuery (Related Posts with jQuery Effect Widget) nên ít nhiều cũng hơi nặng, bạn nên cân nhắc trước khi cài đặt cho blogspot của mình.

Bạn có thể xem Demo tại trang này hoặc khám phá thêm nhiều biến thể tại trang này.

Để cài đặt tiện ích này, bạn hãy thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates (nhớ backup Template trước khi thực hiện).

Đặt đoạn code sau đây vào trước dòng ]]</b:skin>.

#related-posts-widget{float:left;width:90%;font-size:11px;}
.related-posts-widget{min-height:130px;}
#related-posts-widget h2{display:block;padding:2px 0 2px 5px;margin:0 0 .5em;color:#666;font-size:13px;text-transform:none;border-bottom:1px solid #09F;text-shadow:1px 1px 3px #CCC;}
.related-posts-widget ul.rpw strong{font-weight:lighter;}
#related-posts-widget ul.rpw{color:#333;text-align:left;}
#related-posts-widget ul.rpw li a, .bookmarks a{color:#444;font-size:11px;font-weight:bold;text-decoration:none;}
#related-posts-widget ul.rpw li a:hover{color:#ff8c00;}
#related-posts-widget ul.rpw li a:active{outline:0;position:relative;color:#09F;}
#related-posts-widget ul.rpw{list-style:none;margin:0;padding:0;}
#related-posts-widget ul.rpw li{margin:0;padding:6px 0;}

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script>
<script src='http://simplebloggertutorials.googlecode.com/files/jquery-effects.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('#related-posts-widget').relatedPostsWidget({
max_posts:10
,posts_per_tag:10
,thumbs:0
,show_n:5
});
});
//]]>
</script>

Bước 3. Tìm một trong các thẻ sau đây,

<div class='post-footer'>

<div class='post-footer-line post-footer-line-1'>

<div class='post-footer-line post-footer-line-2'>

<div class='post-footer-line post-footer-line-3'>

rồi đặt sau nó bằng dòng code bên dưới.

<div class='related' id='related-posts-widget'>loading..</div>

Lưu Template là OK.

Xin chúc mừng, bạn là khách có lời bình số 9 may mắn. Bạn đã nhận được lời chúc phúc chân thành từ tác giả bài viết

{9 bình luậnAdd yours ?}

10:31:00, 24 thg 2, 2011

thủ thuật ở trang demo khá lạ mắt và đẹp. Đang cân nhắc giữa nhanh và đẹp bác ạ :51)

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

Bác ơi cho mình hỏi sao cái blog mình zào phần edit HTML thì mở rộng tiện ích không đc vậy, tạo blog mới cũng vậy như vậy là sao :((

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

@Lê Trương Vĩnh Trung Nghĩa là Blogger hôm nay đang bảo trì hệ thống nên mọi hoạt đọng liên quan đến Edit HTML trong Template đều đứng im. Chờ mai nhé bạn.

Reply
22:18:00, 24 thg 2, 2011

@Huỳnh Nhật Hà

Ra là thế vậy mà mình cứ tưởng cái blog của mình có vấn đề ^^. TKs pác

Reply
22:25:00, 24 thg 2, 2011

Ah bạn ơi cho mình hỏi cái web này nè http://nhac-karaoke.blogspot.com/ sao nó hiện ra đc hình ảnh của đoạn clip youtube vậy, còn có vài web thì hiện ra hình ảnh game flash lun còn khi mình post clip lên thì nó ko có ảnh vậy là sao nhỉ :( có cách nào ko bạn

Reply
22:38:00, 24 thg 2, 2011

@Lê Trương Vĩnh Trung Cái này cũng dùng thủ thuật mới có được đấy bạn, để rảnh viết bài hướng dẫn nhé.

Reply
22:51:00, 24 thg 2, 2011

Cái này chắc cũng giống trang e-phim.net luôn bác Hà nhỉ. Nhân tiện hướng dẫn em làm giống thế luôn. Chờ thủ thuật này của bác lâu lắm rồi đấy :51)

Reply
09:23:00, 25 thg 2, 2011

@Phim Online Bạn Phim Online và bạn Vĩnh Trung áp dụng thủ thuật ngay nhé. Vừa mới xong TUT, hy vọng các bạn hài lòng. :56)

Reply
10:53:00, 25 thg 2, 2011

Thank bạn vì bài viết này.
Khung comment mới của bạn nhiều đẹp hơn trước nhiều.

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