 |
| Hướng dẫn tạo Related posts với thumbnail đẹp |
Để 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"'>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ẻ
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrbD9iz57p7MCOK417i-AFjvZfAOr12fkY_qt7A3jcVdcwQvX9JLiMorSxFCu7KTAj3WHvsxyo0TV_LqsYiFInzUK8IL7y28-a847_U2vcN71FSLySx6TeZc5ovlxLeN74gns-ExB20oNe/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>
<div class='post-footer-line post-footer-line-3'>
<b:if cond='data:blog.pageType == "item"'>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.
<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>
Kho Template Blogspot Responsive 2016
http://share123blog.blogspot.com
Free download responsive premium blogger template
Icon CommentsIcon Comments