• 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 có ảnh đại diện đặt cuối bài viết

15
16/12/2010

Tiện ích Bài viết mới nhất giúp người đọc dễ dàng tìm thấy liên kết đến những bài viết mới nhất được đăng trên blog của bạn. Chắc hẳn bạn từng thử cài đặt tiện ích Bài viết mới nhất có ảnh đại diện trên sidebar. Vậy có bao giờ bạn từng nghĩ đến việc cài đặt tiện ích Bài viết mới nhất có ảnh đại diện ở cuối bài viết hay chưa?

Loay hoay với những mớ code lỉnh kỉnh từ tiện ích Bài viết mới nhất có ảnh đại diện (Recent Posts with Thumbnail widget), cuối cùng tôi cũng xào nấu chế biến ra tiện ích Bài viết mới nhất có ảnh đại diện đặt cuối bài viết với 3 biến thể khác nhau khá độc đáo.

Kiểu 1. Kiểu này hiển thị 4 bài viết theo hàng ngang gồm ảnh đại diện, tiêu đề bài viết và phần tóm tắt bài viết. Xem Demo dưới đây.




Để cài đặt tiện ích này, trước tiên đăng nhập Blogger vào Design >> Edit HTML chọn Expand Widget Templates.

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

<style type="text/css">
.recent_summary1 {border-bottom:1px solid #555;float:left;height:220px;margin:0 5px;padding:5px;width:128px;}
.recent_summary1:hover {background-image:-moz-linear-gradient(100% 100% 90deg, #555, #000);background-image: -webkit-gradient(linear, left bottom, left top, from(#555), to(#000));filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF000000', EndColorStr='#FF555555');}
.recent_summary1 a {color: #a52a2a !important;display:block;font-size:12px !important;font-weight:normal !important;text-align:center;}
.recent_summary1 img {height:72px;width:72px;}
.recent_summary1 h6 {border-bottom:1px dotted #888;height:60px;margin:5px 0 0;padding-bottom:2px;}
.recent_summary1 p {color:#AAA;font-size:11px;line-height:1.3em;margin:5px 0 0;text-align:justify}
</style>
<script src="http://hacodeproject.googlecode.com/files/rcposts_thumbnail_style1.js" type="text/javascript"/>

Tiếp theo đặt đoạn code dưới đây vào trước dòng <div class='post-footer-line post-footer-line-3'>.

<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?max-results=4&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1"></script>
<div style="clear:both;"></div>

Thay huynh-nhat-ha bằng tên blogspot của bạn. Lưu Template là OK.

Kiểu 2. Kiểu này hiển thị 4 bài viết theo hàng ngang gồm ảnh đại diện và tiêu đề bài viết với hiệu ứng ảnh nghiêng khi rê chuột rất đẹp mắt. Xem Demo dưới đây.



Để cài đặt tiện ích này, trước tiên đặt đoạn code sau đây vào trước thẻ </head>.

<style type="text/css">
.recent_summary2 {float:left;height:140px;margin:0 5px;padding:5px;width:128px;}
.recent_summary2 img:hover {-moz-transform:rotate(5deg);-o-transform: rotate(5deg);-webkit-transform: rotate(5deg);filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455);border:5px solid #555;}
.recent_summary2 a {color:#0000ff !important;display:block;font-size:12px !important;font-weight:normal !important;text-align:center;}
.recent_summary2 a:hover {font-weight:bold !important;}
.recent_summary2 img {height:72px;width:72px;padding:3px;border:5px solid transparent;}
.recent_summary2 h6 {height:30px;margin:5px 0 0;}
</style>
<script src="http://hacodeproject.googlecode.com/files/rcposts_thumbnail_style2.js" type="text/javascript"/>

Tiếp theo đặt đoạn code dưới đây vào trước dòng <div class='post-footer-line post-footer-line-3'>.

<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?max-results=4&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2"></script>
<div style="clear:both;"></div>

Thay huynh-nhat-ha bằng tên blogspot của bạn. Lưu Template là OK.

Kiểu 3. Kiểu này hiển thị 15 bài viết chia đều thành 3 cột gồm ảnh đại diện và tiêu đề bài viết với hiệu ứng khi rê chuột vào tiêu đề bài viết. Xem Demo dưới đây.



Để cài đặt tiện ích này, trước tiên đặt đoạn code sau đây vào trước thẻ </head>.

<style type="text/css">
.recent_summary3 {border:1px solid #555;float:left;height:55px;margin:1px;padding:5px;width:185px;}
.recent_summary3 a {color:#a52a2a !important;display:block;font-size:11px !important;font-weight:normal !important;}
.recent_summary3 img {height:36px;width:36px;float:left;}
.recent_summary3 h6 {float:right;height:45px;margin:0;width:133px;}
.recent_summary3 a:hover {color:#ffffff !important;display:block;font-size:11px !important;font-weight:normal !important;}
.recent_summary3:hover {background-image:-moz-linear-gradient(100% 100% 90deg, #338, #33F);background-image: -webkit-gradient(linear, left bottom, left top, from(#338), to(#33F));filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF3333FF', EndColorStr='#FF333388');border:1px solid #33F;}
</style>
<script src="http://hacodeproject.googlecode.com/files/rcposts_thumbnail_style3.js" type="text/javascript"/>

Tiếp theo đặt đoạn code dưới đây vào trước dòng <div class='post-footer-line post-footer-line-3'>.

<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?max-results=15&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts3"></script>
<div style="clear:both;"></div>

Tôi cho rằng các kiểu tiện ích này rất cần thiết cho blogspot của bạn. Chúc bạn cài đặt thành công!

{15 bình luậnAdd yours ?}

Hamvui
21:36:00, 21 thg 12, 2010

chào bạn! mình đã test mấy cái recent post của bạn rồi, rất hay! nhưng có 1 số cái mình góp ý để hoàn thiện nhe:

thứ 1:mấy cái hình thumnail cả 3 kiểu đều không lấy hình ổn định hay hiện hình dấu ? không có thumnail, trong khi bài viết của mình thì có 3,4 hình để làm thumnail.

thứ 2: khi mình nhấn vào link thì nó mở bài ra tab mới, bạn chỉnh cho nó mở trên chính trang đó luôn dc không? như vậy sẽ hay hơn.

thứ 3: kiểu 1 và 2 mổi kiểu chỉ có 4 thumnail, tăng lên 5 or 6 dc ko? và có thể mở rộng ra 3,4 hàng luôn, để mình show bài viết dạng gallery.

hi vọng bạn quan tâm ý kiến của mình, mình sẽ theo dỏi bài viết này. thanks

Reply
22:45:00, 21 thg 12, 2010

À, có lẽ bạn nghiên cứu kỹ thêm sẽ hiểu hơn.

Giải đáp ý thứ 2. Bạn download mấy file js về rồi dùng Notepad mở ra tìm dòng <a href='" + posturl + "' target='_blank'> rồi thay nó bằng <a href='" + posturl + "'> vì mục đích của target='_blank' là mở link sang tab moi mà.

Giải đáp ý thứ 2: Trong code js đó tìm dòng var numposts = 4; rồi thay số thành số 5, 6, 7... tùy ý bạn. Nếu bề rộng post-body là 600px thì mỗi dòng khoảng 4 thumbnail, vậy 3 dòng thì 12 thumnail vậy chỉnh max-results=4 thành 12, và var numposts = 12;

Giải đáp ý 1. Tien ích hiển thị thumnail tốt đấy chứ, demo blog tớ rất ok, k biết bạn thì sao.

Cảm ơn bạn nhé.

Reply
16:44:00, 11 thg 2, 2011

Bài viết hay ghê, giờ mình mới tìm ra đuợc trang này :D

Reply
11:29:00, 17 thg 3, 2011

Mình thấy "rcposts_thumbnail_style2.js" là hay nhất bạn có thể làm code cho bài bài viết ngẫu nhiên với. Thanks.

Reply
17:28:00, 18 thg 4, 2011

minh them vao thi sao no khong hien thi thumb nhi?

Reply
08:54:00, 16 thg 5, 2011

Không biết thuimbal cua tiện ích bài viết mới hiểu thứ 2 có vấn đề gì mà nó chỉ hiện 1 anh đạu diện, còn 3 cái thì kohng6 ?

Reply
16:23:00, 22 thg 6, 2011

tiện ích này k dùng đươc bạn ơi, chỉnh số bài hiển thị thì vẫn chỉ có 4, và k hiển thị thumbnail...bạn sửa lại code đi

Reply
09:32:00, 7 thg 8, 2011

Rất cảm ơn vì tiện ích này.

Reply
17:22:00, 2 thg 10, 2011

Anh Hà xem giúp em lỗi này với! http://dl.dropbox.com/u/28300814/loi.png

Reply
17:30:00, 2 thg 10, 2011

Và 1 vấn đề nữa là ở style 2, nếu em không muốn hiển thị tiêu đề mà muốn cho tiêu đề hiển thị dạng title thì mình phải chỉnh sửa trong file js như thế nào vậy anh Hà!

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

@Linh Dung Nếu muốn thế thì trong đoạn js hãy thay đoạn

output = "<div class='recent_summary2'>";
output += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
output += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
output += "</div>";

bằng đoạn

output = "<div class='recent_summary2'>";
output += "<a href='" + posturl + "' title='" + posttitle + "' target='_blank'><img src='" + postimg + "' /></a>";
output += "</div>";

Reply
20:14:00, 2 thg 10, 2011

@Huỳnh Nhật Hà Thank anh Hà, em đã làm được rồi hì! Mà khi tăng kích thước của ảnh thì ảnh ko đc rõ lắm, có cách khắc phục ko anh!

Reply
Yolks
AUTHOR
21:13:00, 2 thg 10, 2011

Anh hà yêu , blog em có bài seo :) cho blogspot , ko biết chuẩn ko :4)

Reply
21:30:00, 2 thg 10, 2011

@Yolks Cũng khá, cũng có cái đúng có cái chưa đúng hoàn toàn, dù sao cũng considerable :9)

Reply
06:41:00, 21 thg 11, 2013

Kiểu này cũng hay nhưng không biết là dùng cho 1 nhãn được không anh ?

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