THỨ HAI, 17/03/2025
Chào buổi tối!Chúc các bạn có bữa tối thật vui vẻ và hạnh phúc bên người thân!

Note Đóng lại {Chào các bạn, liên hệ Minh 0345151279}
Giải pháp bán hàng online Số 1 Việt Nam

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





Để 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!"; /* */
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!

Bạn đã xem chưa

0 nhận xét | Viết lời bình



Copyright © 2014 Blog Thông Tin Tổng Hợp




  • tpm1512

    Tư vấn - Thái AiTi

    Call: 0962.444.744

    tpm1512@gmail.com

    skype tpm1512