"Tiện ích bài viết liên quan (Related Posts) có ảnh thumbnail"
(Traidatmui.com) - Trước đây mình đã có giới thiệu cùng các bạn một thủ thuật tạo bài viết ngẫu nhiên có ảnh thumbnail với sự hỗ trợ của trang web linkwithin.com. Với sự hỗ trợ của linkwithin.com thì bạn có thể thêm trực tiếp cho Blogger rất dễ dàng, nhưng nó chỉ cho phép hiển thị tối đa 5 bài viết. Hôm nay với cách hiển thị tương tự như thế, hiệu ứng như vậy... nhưng bạn có thể tùy chỉnh số bài viết tùy ý. Mình xin chia sẽ cùng các bạn cách để tạo tiện ích bài viết liên quan hiển thị cuối mỗi bài viết cho Blogspot.
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/AVvXsEj_PbfNq1ZfygNa8P2lPxILhyiLFcvoEf5o-4NlbeQVrG0p9dI6tn3cJmX3tnfmjyN9NFc1aWNfmXrU7emLj_A3HMxc-mcOuJPF-nMt5_IJjF7r1GvclfjOu8WYZj2bkoobO9Mj6OGjeDU8/";
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ết
var relatedpoststitle="Related Posts";
</script>
<script src='http://data-traidatmui.appspot.com/scripts/relatedposts_thumbnails.js' type='text/javascript'/>
#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/AVvXsEj_PbfNq1ZfygNa8P2lPxILhyiLFcvoEf5o-4NlbeQVrG0p9dI6tn3cJmX3tnfmjyN9NFc1aWNfmXrU7emLj_A3HMxc-mcOuJPF-nMt5_IJjF7r1GvclfjOu8WYZj2bkoobO9Mj6OGjeDU8/";
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ết
var relatedpoststitle="Related Posts";
</script>
<script src='http://data-traidatmui.appspot.com/scripts/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>
<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
Chúc bạn thành công
Nguồn: TRAIDATMUI.com
0 nhận xét:
Đăng nhận xét