Tiện ích bài viết liên quan cho blogspot
Với mọi loại blog hiện nay thì cung cấp thông tin đầy đủ cho người xem là thiết yếu và để người xem có thể hiểu đầy đủ và sâu sắc hơn về một lĩnh vực nào đó thì tiện ích bài viết liên quan đong một vai trò khá lớn. Vì thế hôm nay mình xin giới thiệu đến các bạn một kiểu của tiện ích related post ( bài đăng liên quan ) đó là Tiện ích bài viết liên quan có ảnh thumbnail.Hình ảnh minh họa
1. Đăng nhập tài khoản Blogger
2. Vào thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn tiếp mở rộng tiện ích (Expand Widget Templates)
5. Thêm code bên dưới vào sau thẻ <head>
<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: 13px; /* cở chữ của tiêu đề "Related Posts" */
font-weight: bold;
color: #000; /* màu chữ của tiêu đề "Related Posts" */
font-family: Georgia, Times, serif;
margin-bottom: 3px;
margin-top: 0px;
padding-top: 2px;
}
#related-posts a{
color:#000; /* màu chữ của tiêu đề bài viết*/
}
#related-posts a:hover{
color:#0000ff; /* màu chữ của tiêu đề bài viết khi rê chuột*/
}
#related-posts a:hover {
background-color:#ffff99; /* màu nền khi rê chuột*/
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKYkrjbaq0Kt6Egcc7k6GTSe3IpfcAtX5LiQFKSflHwN48J5uMR5DpZzr6H9WDNZ_ISYubqNwKoUfrOFXRXjvs6rC70eXxph6ZivzPg-RQwTHJuYf5dieW6x7OM50-a2u5BSEnWbSZd3R4/";
var maxresults=5; // số bài viết hiển thị
var splittercolor="#d4eaf2"; // màu của viền phân cách các bài viếtvar relatedpoststitle="Related Posts";
</script>
<script src='http://traidatmui-tips.googlecode.com/files/relatedposts_thumbnails.js' type='text/javascript'/>
<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: 13px; /* cở chữ của tiêu đề "Related Posts" */
font-weight: bold;
color: #000; /* màu chữ của tiêu đề "Related Posts" */
font-family: Georgia, Times, serif;
margin-bottom: 3px;
margin-top: 0px;
padding-top: 2px;
}
#related-posts a{
color:#000; /* màu chữ của tiêu đề bài viết*/
}
#related-posts a:hover{
color:#0000ff; /* màu chữ của tiêu đề bài viết khi rê chuột*/
}
#related-posts a:hover {
background-color:#ffff99; /* màu nền khi rê chuột*/
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKYkrjbaq0Kt6Egcc7k6GTSe3IpfcAtX5LiQFKSflHwN48J5uMR5DpZzr6H9WDNZ_ISYubqNwKoUfrOFXRXjvs6rC70eXxph6ZivzPg-RQwTHJuYf5dieW6x7OM50-a2u5BSEnWbSZd3R4/";
var maxresults=5; // số bài viết hiển thị
var splittercolor="#d4eaf2"; // màu của viền phân cách các bài viếtvar relatedpoststitle="Related Posts";
</script>
<script src='http://traidatmui-tips.googlecode.com/files/relatedposts_thumbnails.js' type='text/javascript'/>
» Chỉnh code: Bạn dựa vào các hướng dẫn (dòng màu xanh) trong code để tùy chỉnh theo ý của bạn.
6. Tìm (Ctrl F) đến code bên dưới hoặc tương tự
<div class='post-footer-line post-footer-line-3'/>
7. Chèn code bên dưới vào ngay sau code vừa tìm được
<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>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>
<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>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>
8. Cuối cùng save template lại
Traidatmui
mình ko áp dụng đc, chèn vào rồi nhưng ko hiện
Trả lờiXóa