Tạo Related Post widget cho blogger có thumbnail

Related Post widget (bài viết liên quan) trong Blogger là quan trọng nhất, dưới mỗi bài đăng nên chèn Related Post widget để độc giả có thể tìm kiếm thêm một vài thông tin hữu ích. Với bài viết Tạo Related Post widget cho blogger có thumbnail dạng đẹp hi vọng giúp bài đăng của các Blogger Blogspot giao diện mới tốt hơn.

Related Post widget blogger có thumbnail

Tạo Related Post widget blogger có thumbnail

Bước 1: Bạn cần đăng nhập vào Blogger => Mẫu (Template) => Chỉnh sửa HTML (Edit HTML)

Bước 2: Tìm thẻ ]]></b:skin> bằng cách nhấp Ctrl + F và chèn code CSS lên phía trên nó

#related-posts{
 float:left;
 height:auto;
 width:660px;
 border-top:1px dashed #d0cfff;
 border-bottom:1px dashed #d0cfcf;
 padding-top:20px;margin-top:20px}
#related-posts a{
 width:200px!important;
 transition:all 300ms ease-in-out;
 -webkit-transition:all 300ms ease-in-out}
#related-posts img{
 width:200px!important;
 transition:all 310ms ease-in-out;
 -webkit-transition:all 310ms ease-in-out;
 border:1px solid;padding:1px}
#related-posts img:hover{
 opacity:0.6;
 transition:all 310ms ease-in-out;
 -webkit-transition:all 310ms ease-in-out
 }

Bước 3: Bạn tìm tới thẻ </head> và chèn code phía trước nó

<b:if cond='data:blog.pageType == &quot;item&quot;'>
var defaultnoimage=&quot;Ảnh Nền Khi Không Có Ảnh Hiển Thị;;
<script type='text/javascript'>
var maxresults=6;
var splittercolor=&quot;#fcf8f8&quot;;
var relatedpoststitle=&quot;RELATED POST:&quot;;
</script>
<script src='https://sites.google.com/site/10kthuthuatblogger/related-post/228052015.js' type='text/javascript'/></b:if>

Bước 4: Bước này là sắp hoàn tất rồi, bạn hãy lấy code bên dưới và chèn phía sau <div class='post-footer'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div>
</b:if>

Cuối cùng lưu lại để xem kết quả.

Tạo Related Post widget blogger có thumbnail
tao, related, post, widget, Related Post widget, blogger, blogspot, thumbnail, anh, hinh thu nho