• KIẾN THỨC SEO
  • BLOG SERIER
  • SEO BLOGSPOT
  • TEMPLATE BLOGSPOT
  • ICON FACEBOOK
MENU

Hoc Tieng Trung Khamphablog.com

Menu
  • Home
  • #Web Tools
    • Giải Mã
    • Mã Hóa
    • Chuyển đổi code
    • Lấy mã màu
  • Liên Hệ
  • #Dịch Vụ
    • Rip Blogspot
    • Rip Wordpress
  • Site map
  • #Giới Thiệu
    • Admin
    • Blog
  • Liên Kết
  • Hỏi Đáp
Trang Chủ Blog Series Blog-Tips Recent-Post Thu-Thuat [Tips] Recent post 3 cột với thumbnail cho blogspot

[Tips] Recent post 3 cột với thumbnail cho blogspot

Đỗ Mạnh Hồng May 27, 2015 Blog Series Blog-Tips Recent-Post Thu-Thuat
Đỗ Mạnh Hồng
Recent post là bố trí hiển thị bài viết trên từng widget theo một nhãn hoặc toàn bộ vài viết trên blogspot, tiện ích này thường được áp dụng cho các blogspot tin tức với nhiều tiện ích widget ở trang chủ với nhiều chủ đề khác nhau.
Recent post thumbnail đẹp cho blogspot

Thêm Recent post vào blogspot

1. Đăng nhập blogger

Đăng nhập vào blogger templates chỉnh sửa HTML tìm đến thẻ </head> thêm vào đó đoạn code sau :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script>
// Blogger Recent Posts Gallery by http://theblogger911.blogspot.com
// Tutorial at http://theblogger911.blogspot.com/2013/09/customizable-recent-post-image-gallery.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
function tb911rpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="tb911rp-gallery nopin" title="Get this from theblogger911.blogspot.com">'];
for (var i = 0; i < entries.length; ++i) {
var post = entries[i];
var postTitle = post.title.$t;
var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeVF1c1uEoXutWDR2huHoPldxz883UXVFkmW4FuqzrqPrJhzWE27ulbECvnq-Vqquxk3WAgIwZy3lRdLsuXK9kBO4dcKCw3YnpjeHeK3HbJugSRJp-0jcHiXAzsVF8S7EmlmSArsConO1v/s72-c/default+image.png';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + tb911rpg_thumbSize + '-c');
var links = post.link || [];
for (var j = 0; j < links.length; ++j) {
if (links[j].rel == 'alternate') break;
}
var postUrl = links[j].href;
var imgTag = '<img src="' + newImgUrl + '" width="' + tb911rpg_thumbSize + '" height="' + tb911rpg_thumbSize + '"/>';
var pTitle = tb911rpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
var item = '<a href="' + postUrl + '" target="_blank" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
html.push('<div class="tb911-item">', item, '</div>');
}
html.push('</div>');
document.write(html.join(""));
}
//]]>
</script>
<style>
/* http://www.khamphablog.com/ Recent Posts Image Gallery CSS Start */
.tb911rp-gallery {padding:10px; clear:both;}
.tb911rp-gallery:after {content: "";display: table;clear: both;}
.tb911rp-gallery .tb911-item a {position: relative;float:left;margin: 0 15px 15px 0 !important;text-decoration:none;}
.tb911rp-gallery .tb911-item .ptitle {background: rgba(0, 0, 0, 0.5); background: #7f7f7f\9; display: block; clear: left; font-size: 11px; line-height:1.3em; height: 2.6em; position: absolute; text-align: left; bottom: 10%; color:#fff; padding:2px 5px; word-wrap: break-word; overflow:hidden;}
.tb911rp-gallery a img {background: #eee; float: left; padding: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); transition: background-color 0.4s; -webkit-transition: background-color 0.4s; -moz-transition: background-color 0.4s;}
.tb911rp-gallery a:hover img {background: #ee7e22;}
/* http://www.khamphablog.com/ Recent Posts Image Gallery CSS End */
</style>
</b:if>
Ở đây mình dùng thẻ <b:if cond='data:blog.url == data:blog.homepageUrl'> để tối ưu tất cả code chỉ áp dụng cho trang chủ.

Xem thêm : Tối ưu css và js cho blogspot

2. Cài đặt recent post

Bây giờ chỉ cần chèn đoạn code sau ở nơi cần hiển thị
<script>
var tb911rpg_thumbSize = 150;
var tb911rpg_showTitle = true;
</script>
<script src="/feeds/posts/summary?max-results=8&alt=json-in-script&callback=tb911rpGallery"></script>

  • 150 là kích thướt hình ảnh hiển thị 

 Đoạn code :
<script src="/feeds/posts/summary?max-results=8&alt=json-in-script&callback=tb911rpGallery"></script>
Giúp hiển thị toàn bộ bài viết trên blog nếu bạn muốn hiển thị bài viết theo một nhãn thì thay đoạn code sau :
<script src="/feeds/posts/summary/-/Label?max-results=8&alt=json-in-script&callback=tb911rpGallery"></script>
Vậy là xong, lưu lại và kiểm tra thành quả thôi, chúc các bạn thành công.

Bài Viết Cùng Chủ Đề

  • [Tips] - Làm sao để thêm share this button cho blogspotShare this button hay còn có tên gọi đơn giản hơn đó là nút like share (chia sẻ) thường hay nằm ở dưới hoặc trên cùng c ...
  • [Tips] - Đặt backlink như thế nào là đúng?Chào các bạn khi chúng ta nói đến backlink thì hầu như seoer nào cũng dùng tới nó vì đây là một lối seo blogspot nói ri ...
  • Widget top comments for blogspot (bài viết comments nhiều nhất)Widget top comments có nghĩa là một widget thống kế số comments cho từng bài viết, bài viết nào nhiều comments nhất sẽ ...
  • 3 in 1 comments blogger, comments google, comments facebook for Blogspot3 in 1 comments cho blogspot là một mẫu comments chuyên nghiệp cho blogspot của bạn, hệ thống comments này được thiết k ...
  • [Tips] - Thu gọn bài viết blogspot với thumbnail đẹpThu gọn bài viết hay còn gọi là rút ngắn bài viết ở trang chủ hay ở bất kỳ trang nào cần hiển thị thu gọn bài viết là m ...
Next
[Tips] - Làm sao để rip một templates blogspot
Previous
[Tips] - Widget bình luận (comments) mới cho blogspot
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Icon CommentsIcon Comments

:)
:(
=(
^_^
:D
=D
=)D
|o|
@@,
;)
:-bd
:-d
:p
:ng
Đăng Nhập để bình luận chém gió.
Subscribe to: Post Comments (Atom)

Blog Tự Học Seo Online

Blog ra đời dưới sự thành lập của Đỗ Mạnh Hồng với mục đích chia sẻ những kiến thức giúp bạn tự học seo blog online chạy trên nền tản blogspot và website, cùng với đó chúng tôi còn chia sẻ tới các bạn những templates blogspot chuẩn seo, những thủ thuật đơn giản giúp bạn thao tác dễ dàng hơn trong phần quản trị Blogger. Với tiêu chí muốn gởi đến các bạn "SEO TỪ KHÓA LÊN TOP - KHÓ MÀ DỄ". Hãy cũng chúng tôi trao đổi và mong muốn được hỗ trợ các bạn nhiều hơn nữa.


  • Popular

Popular

SUBSCRIBE TO OUR NEWSLETTER

Copyright © 2015 Khamphablog.com All Right Reserved Tự học seo blog online cho người mới bắt đầu