Tạo bài viết liên quan kèm ảnh Thumbnails cho blogspot
Thủ thuật hiển thị bài viết liên quan kèm ảnh Thumbnails ở đây thể hiện một cách chuyên nghiệp hơn. Bài viết này được lấy từ 1 số nguồn trên internet trong khi lang thang .
Đầu tiên: Đăng nhập vào blog --> Bố cục --> Chỉnh sửa HTML -> Mở rộng mẫu tiện ích
Sau đó tìm đến thẻ </head>
Chèn đoạn code dưới đây trước nó nhé:
<!--Related Posts with thumbnails-->
<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://xemtruyenhinh.110mb.com/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails-->
Tiếp theo: Tìm đến đoạn code tương tự sau:
<div class='post-footer-line post-footer-line-1'>
Thay thế bằng đoạn code dưới :
<!-- Start Related Posts with Thumbnails-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- End Related Posts with Thumbnails-->
Chú ý: var maxresults=5; số 5 là giá trị max số bài viết hiển thị
Save lại ---> kiểm tra kết quả thế nào nhé !
Chúc các bạn thành công !
Sau đó tìm đến thẻ </head>
Chèn đoạn code dưới đây trước nó nhé:
<!--Related Posts with thumbnails-->
<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://xemtruyenhinh.110mb.com/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails-->
Tiếp theo: Tìm đến đoạn code tương tự sau:
<div class='post-footer-line post-footer-line-1'>
Thay thế bằng đoạn code dưới :
<!-- Start Related Posts with Thumbnails-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- End Related Posts with Thumbnails-->
Chú ý: var maxresults=5; số 5 là giá trị max số bài viết hiển thị
Save lại ---> kiểm tra kết quả thế nào nhé !
Chúc các bạn thành công !

Chào mọi người ghé thăm trang web của Trần Phúc Minh
Liên hệ mail: tpm1512@yahoo.com hoặc điện thoại 0962.444.744
-
http://tpm1512.blogspot.com/2011/03/tao-bai-viet-lien-quan-kem-anh.html
Minh cám ơn bạn đã quan tâm và rất vui vì bài viết đã đem lại thông tin hữu ích cho bạn.
Bài liên quan
- Danh sách thủ thuật Blog.duypham.info
- Danh sách thủ thuật Blog itechplus
- Danh sách thủ thuật Blog Namkna
- Danh sách thủ thuật Blog traidatmui
- Danh sách thủ thuật Blog Fandung
- Mẫu đẹp cho bài viết được xem nhiều
- Tạo logo liên kết chạy ngang
- Tạo trang in chuyên nghiệp nhiều tùy chọn cho Blogspot
- Tự động làm mới trang Web/blog và chuyển hướng
- Tùy biến label thành tag cloud giống WP
- K14 - Pro Menu (với hiệu ứng prodown)
- Tạo ảnh loading đẹp với css và js
- BlogSpot cải thiện tính năng SEO cho blog
- ANCKeywords - Tự động cập nhập keywords từ người dùng cho site.
- Tạo hộp tìm kiếm cho blogspot
- Hướng dẫn xem các kênh SCTV không bị chặn hình ảnh
- TẠO KHUNG COMMENTS CHO BLOG
- Trang trí cho widget Label và Blogroll
- Tiện ích Về tác giả ở cuối bài viết Blogger
- Chèn link Google Search vào footer của bài viết
- Jquery Slider Tin Tức - News Slider
- Cài đặt tên miền riêng cho blogspot
- Truy cập Blogspot vô tư khỏi sợ bị chặn
- Dropbox - Một dịch vụ hosting miễn phí và chất lượng
- Một số đoạn code tuyết rơi
- Tạo liên hệ giống blog Minh
- Tạo địa chỉ hộp thư Gmail trên blogspot
- Chèn comment của disqus vào blogspot
- Temple Blog đẹp miễn phí
- Code danh ngôn
- Chèn biểu tượng cảm xúc vào nhận xét dạng input
- TẠO 4 BANNER QUẢNG CÁO 125X125
- Hướng dẫn đăng kí tên miền đẹp
- Tạo Sitemap đẹp cho blogspot
- Tạo thanh cuộn trong blogspot
- Một số vấn đề thường gặp ở Blogspot
- Menu đẹp cho blogger
- Truy tìm dấu vết hồ sơ Blogger đồng hương
- Một số mẫu Templates đẹp cho Blogger
- Một số website cung cấp Templates đẹp cho Blogger
- Tạo Feed cho tất cả các nhãn bài đăng
- Form đăng nhập cho Blogspot
- Trình diẽn bài viết dạng Slide với jQuery (cập nhật)
- Tiện ích bài viết mới nhất với hiệu ứng autoscroll bằng Jquery
- Code loading – đang tải dữ liệu cho web-blog
- Tiện ích "Recent posts" với hiệu ứng trượt từ jQuery
- Script chuyển trang tự động kèm thông báo đếm ngược
- Tag Meta chuyển trang với thời gian & địa chỉ định trước
- Hiển thị dòng giới thiệu cho boblog
- Tự động bật trang web khác khi vào trang web của mình
- Tự động chèn link bài viết khi người khác copy bàiviết từ website của mình
- Tiện ích Recent Posts giống iTechPlus.info
- Tạo banner quảng cáo dạng Popup
- Dùng Google Code,Google Site làm host chứa file js
- Bảng mã màu dành cho Blogger
- Tạo trang leech dễ dàng không cần host
- Tiện ích “Thông tin cần biết” cho Blogger
- Tiện ích Recent Posts with 3 columns for Blogger
- Hiển thị bài viết dạng list ở các trang Home, Label, Archive
- Recent posts 2 cột với hiệu ứng Tooltip
- Bảo vệ Gmail với 2 cấp mật khẩu
- Tạo kiểu menu đẹp với DD Tabe Menu Script
- Tạo Contact Form cho blog với Foxyform
- Tạo trang diễn đàn cho Blogger
- Tạo tiện ích Bài viết mới nhất sử dụng hiệu ứng Simple jQuery Spy
- Hiển thị thời gian tải trang cho blogspot
- Tiện ích Tìm bài viết theo ngày
- Tạo menu ngang trên phần Header
- Tạo Auto Readmore cho blog chuyên về phim
- Hiển thị địa chỉ bài viết cuối bài viết trong Blogspot
- Tạo thanh HotNews sử dụng mootools cho blog
- Thủ thuật tạo Featured content cho Blogspot
- Chèn 1 box nhỏ hiển thị các bài liên quan vào bài viết
- Chèn logo vào tiêu đề bài viết
- Tiện ích mở rộng (enlarge) hay thu hẹp (narrow) phần main của Blogspot
- 1 style phân trang khá đẹp mắt cho blogspot
- Hướng dẫn Tạo Featured Post với JQuery
- Tạo dòng chữ trên thanh tiêu đề với hiệu ứng động
- Tạo Avatar động trực tuyến độc đáo
- Hiển thị widget ở nhưng trang nhất định trong blog
- Một số thủ thuật đơn giản để blog phong phú, xinh đẹp
- Chat yahoo bằng điện thoại siêu rẽ free!
- Thủ thuật download toàn bộ nội dung của 1 website
- Chia cột cho blogspot bằng css
- Tiện ích bài mới nhất (recent post) giống vn.yahoo.com
- Hiển thị bài viết giống trang dantri.com.vn
- Chát Tiếng Anh kiếm tiền ( Dành cho các bạn thành thạo tiếng anh )
- Cài đặt Gmail và Yahoo Mail trong chương trình Outlook Express và Windows Mail
- Tăng giảm cở chữ của nội dung bài đăng
- Tạo nút print cho blogger
- Cách tải file ở MEGAUPLOAD không cần ngồi chờ !
- Blogspot: Không hiện bất cứ bài nào ở trang chủ
- Phần mềm nhắn tin SMS miễn phí không giới hạn đến ĐTDĐ
- Xem thử kết quả tiện ích
- 11 tiện ích miễn phí của Google
- CODE MÁY TÍNH ĐIỆN TỬ
- Tiện ích thời tiết, tỷ giá và giá vàng từ web 24h.com.vn:
- Hướng dẫn dùng Google làm nơi lưu trữ Code
- Tiện ích Code Converter cho Blog
- Tạo ảnh chạy xoay tròn trên blog bằng Javascript
- Cách tạo một Album nhạc trên Blog
- Hiển thị bài viết với hiệu ứng trượt bằng Jquery
- Tiện ích tự động tóm tắt bài viết có ảnh thumb cho blogger
- Hướng dẫn cài đặt tên miền Co.cc cho Blogspot
- Hướng Dẫn Đăng Ký Tên Miền Co.cc Rút Gọn
- Chiến thuật kiếm tiền ở Neobux.com
- Hướng Dẫn Kiếm Tiền Với NeoBux (cho Newbie)
- Kiếm tiền với CPM(tính theo lượt truy cập)
- Phần mềm đuổi muỗi!!
- Cách tạo thêm "Các Bài Liên Quan" sau bài viết tren blogspot
- Chèn icon vào trước tiêu đề bài viết theo các nhãn tương ứng
- Tạo tuyết rơi trên blog
- Ẩn bài viết ở trang chủ
- Convertfiles.com: Chuyển đổi dữ liệu trực tuyến
- Cách đưa blog/web lên công cụ tìm kiếm của Yahoo
- Hiển thị bài viết giống trang news.zing.vn
- Tích hợp Google fonts vào Website
- Kiếm tiền trên mạng từ blog : Những yếu tố cần cần thiết của blogging
- Hướng dẫn chèn mã quảng cáo ADS vào blogger
- Tạo chatbox
- Script trích xuất tin tức từ 6 kênh báo mạng Việt Nam
- Cách đưa tiện ích Alexa vào web hay blog
- Tạo hiệu ứng động cho chữ trên thanh tiêu đề
- Cách đưa trang web lên Top Google
- Chèn một số kênh của VTC vào blog
- Hiệu ứng tạo khung viền cho link khi di chuột qua
- Những công cụ lạ mắt dành cho Blogger
- Bộ sưu tập hơn 200 đoạn code Javascript
- code tạo bảng thông báo mới nhất
- Code thời gian giờ ngày tháng
- Tổng hợp 4 widget truyện cười
- Tổng hợp 25 Widget hay cho Blogger/Blogspot
- Hướng dẫn sử dụng google code
- SƯU TẬP BỘ MÃ CODE NHÚNG VÀO
- Kiếm tiền upload với Hotfile khá hấp dẫn
- Adnet-Mạng quảng cáo trực tuyến của Việt Nam
- Cần Trao đổi banner
- Hiển thị bài viết giống trang vnexpress.net
- Thủ thuật yêu cầu - Tạo logo liên kết chạy ngang
- Tạo chữ chạy trên thanh tiêu đề của Blog
- Hướng dẫn dùng JavaScript để thay đổi kích cỡ chữ trên web, blog
- Tạo khung đăng nhập cho Blogger
- Tạo menu dạng trượt - Sliding Side cho blogger
- Code Chữ Chạy DướI Thanh Trạng Thái(4 kiểu)
All comments [ 0 ]
Đăng nhận xét