[Blogger Tips] Hướng dẫn thêm bài viêt liên quan vào blogspot có ảnh Thumbnails

Đây là hướng dẫn rất đơn giản và dễ dàng thực hiện giúp các bạn có thể thêm phần bài viết liên quan vào mỗi bài viết trên blogspot của riêng mình. Bài viết liên quan ở đây được tính là những bài viết có cùng chung nhãn, tag hoặc thư mục. Lợi ích của việc bạn thêm bài viết liên quan sẽ giúp cho độc giả của các bạn có thêm những sự lựa chọn đọc bài viết cùng xu hướng, sở thích của họ trên blog của các bạn. Nhằm tăng thêm sự hứng thú cho người đọc.

Sau đây là 7 bước hết sức đơn giản để bạn có thể làm được điều này. Áp dụng cho tất cả những bạn biết rõ về code hoặc chưa biết gì về code html và css đều có thể làm được.

Bước 1: Vào trang quản lý blog >> Mẫu >> Chỉnh sửa HTML

Bước 2: Trong trang chỉnh sửa HTML bạn chọn vào chức năng Định Dạng Mẫu

Bước 3: Bạn bấm (CTRL + F) và tìm đến đoạn code sau:

</head>

Bước 4: Bạn copy đoạn code ở dưới và chèn vào phía trước đoạn code vừa tìm được, tức là trước thẻ </head>

<b:if cond='data:blog.pageType == "item"'><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: 18px;letter-spacing: 2px;font-weight: bold;text-transform: none;color: #5D5D5D;font-family: Arial Narrow;margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;}#related-posts a{border-right: 1px dotted #DDDDDD;color:#5D5D5D;}#related-posts a:hover{color:black;background-color:#EDEDEF;}</style><script type='text/javascript'>var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB72g1eS5LufgF3vIgLk9fKZRbUlSiWCQZckfKW5Ci9voqO1RktCwqB0v7FVduwlqVtiGwmqPuUE2WpDx8NxIsupMwc6FHKIdP4RFabnK0wT1ScyQnSd8QmShzUSdurMmGfZBBu1hReTmR/s1600/no_image.jpg";var maxresults=5;var splittercolor="#DDDDDD";var relatedpoststitle="Related Posts";</script><script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/></b:if>

Chú ý:

Để đổi hình ảnh mặc định nếu bài viết không có ảnh, bạn đổi URL có màu xanh ở trên

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB72g1eS5LufgF3vIgLk9fKZRbUlSiWCQZckfKW5Ci9voqO1RktCwqB0v7FVduwlqVtiGwmqPuUE2WpDx8NxIsupMwc6FHKIdP4RFabnK0wT1ScyQnSd8QmShzUSdurMmGfZBBu1hReTmR/s1600/no_image.jpg

Để hiển thị số lượng lớn hơn 5 ảnh, bạn thay đổi giá trị 5 thành số bài bạn muốn hiện trong đoạn code sau: "var maxresults=5;
Nếu bạn muốn bài liên quan hiện trên trang chủ, bạn hãy xóa tất cả những đoạn code có màu tím ở trên

Bước 5: Bạn tìm tiếp đoạn code sau:

<div class='post-footer'>

Bước 6: Bạn chèn đoạn code ở dưới vào trước đoạn thẻ 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&max-results=6"' 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.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlTa8kDImTScmEoOYCjO6sqPKuePQrkcrIqNaAAFXSVT4kgi4eSghY6sO70r7CJ54qUhyn7pyD28cNs1QlCWwxjHjmNySzkhIJlvn35JPLNa9n0Rw8C8HHFsz1uFH5MB0oWvsP6MvNNnw3/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>

Chú ý:

Đổi giá trị 6 thành giá trị khác nếu bạn muốn thay đổi số bài viết hiển thị max-results=6
Nếu bạn muốn bài liên quan hiện trên trang chủ, bạn hãy xóa tất cả những đoạn code có màu tím ở trên

Bước 7: Lưu mẫu và thưởng thức thành quả.

*Bài viết được dịch từ Blog:http://helplogger.blogspot.com