[Tips] - Hướng dẫn tạo Related posts với thumbnail đẹp

Related posts hay còn gọi là bài viết liên quan cho blogspot và là một phần không thể thiếu cho bất kỳ blog nào viết về bất kỳ chủ đề nào thì blogspot của bạn cũng nên tích hợp Related postst. Và bài mình mình xin giới thiệu cho các bạn một dạng Related posts với thumbnail siêu đẹp.

Hướng dẫn tạo Related posts với thumbnail đẹp

Xem Demo

Để thêm Related posts dạng này vào blogspot các bạn làm thêm các bước sau :

Bước 1 : Vào phần quản trị Blogger > Mẫu (templates) > Chỉnh sửa HTML

Bước 2 : Bấm ctrl + F và tìm đến thẻ ]]></b:skin> và thêm đoạn css sau ngay trên nó

#related-posts{float:left;height:auto;width:660px;border-top:1px dashed #d2d2d2;border-bottom:1px dashed #d2d2d2;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 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;border:1px solid;padding:1px}#related-posts img:hover{opacity:0.8;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out}

Bước 3 : Típ tục tìm đến thẻ <head> và thêm đoạn javascrips này ngay trên nó

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7NzgqLAKJnwcjeEPhKCnChlLh1Wrep2tJLiDHxsXcFkgR9gjVIVv-10pffCkABPdEFXwbxoqca3k4SzTe_8b9cFHEEGUUbnB1nZ4tgkCZWtniaVJ7e_NygiJ7mEf9V26dbM32lwuxr-qW/s1600/no_image.jpg";
var maxresults=6;
var splittercolor="#fff";
var relatedpoststitle="BÀI VIẾT LIÊN QUAN:";
</script>
<script src='https://hongit.googlecode.com/svn/relatemb.js' type='text/javascript'/></b:if>

Bước 4 : Thêm đoạn code sau ngay nơi cần hiển trị Related posts thông thường thì ngay bên dưới thẻ

<div class='post-footer-line post-footer-line-3'>

<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&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div>
</b:if>

Như vậy là các bạn đã hoàn thành việc tích hợp Related posts cho blogspot của mình, bay giờ lưu mẫu lại và quay trở lại trang bài viết của mình xem thành quả nhé. Chúc các bạn thành công.