Tiện ích Bài viết mới nhất có ảnh đại diện đặt cuối bài viết

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!