Tiện ích bài viết liên quan bằng hình ảnh

Bài viết này hướng dẫn bạn thêm Bài viết liên quan với hình thu nhỏ cho blog.Tiện ích sẽ hiển thị lựa chọn một số bài viết liên quan được tạo ra bằng cách sử dụng nhãn, mỗi bài viết chỉ hiển thị hình ảnh thu nhỏ nhưng khi rê chuột vào nó thì sẽ hiển thị tiêu đề bài viết. Bạn xem bản demo để rõ ràng hơn sau đó làm theo các bước hướng dẫn bên dưới

Thêm Bài Viết Liên Quan Cho Blogger

Vào blogger > Mẫu > Chỉnh sửa HTML
Chọn mở rộng mấu Tiện ích
Dán đoạn code bên dưới vào trước ]]></b:skin>

ul#related-posts{
font-family:"Droid Sans",Helvetica,Arial,sans-serif;
font-size:10px;
list-style: none;
margin: 20px 0;
padding: 0;
text-transform: none;
}
ul#related-posts li{
float: left;
height: auto;
margin:0 5px;
padding: 2px 1px 2px;
list-style-type:none;
}
*html ul.rp#related-posts li{
margin:0 13px;
}
ul#related-posts li a {
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
border: 2px solid #FFFFFF;
display: block;
height: 72px;
position: relative;
width: 72px;
}
ul#related-posts li a {
color: #474C51;
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
}
ul#related-posts li .overlay {
height: 66px;
line-height: 16px;
padding:6px 0 0 6px;
position: absolute;
width: 66px;
z-index: 10;
}
ul#related-posts li .overlay {
}
ul#related-posts li a:hover .overlay {
background: #fff;
display: block !important;
opacity:0.9;
}
ul#related-posts li img {
bottom: 0;
padding:0px !important;
}
ul#related-posts li a:hover {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

Tìm đoạn code sau

<div class='post-footer'>

Và dán ngay sau code vừa tìm được phía trên đoạn code bên dưới

<b:if cond='data:blog.pageType == "item"'>
<h3>Related Posts</h3>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzARUP1Kr0cWBS05ZghJ54iaSGbzMr53CpQppxGYYiN1itwfypbdurE81p0XV6CcN7GYLJgqaYaUuK8SCtgB8ZdyGXr0IADkaU9vC4Lzb9XdXWDpO4_Hp4eBVQ7Bg7O8332B5PxeE2shw/s1600/no-image.gif";
var maxresults=6;
</script>
<script src='http://suyb.googlecode.com/files/rph.js' type='text/javascript'/>
<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>
</b:if>
<div style='clear:both'/>
<br/><br/>
<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrRzjrOA-nKccR8-BDGlhy_z_OKOs2frn4XO-c6jSsxcUtBaYJQ0YhBxa6NS5IUFBi16v15b-peVF_5Dkne3DRFDfhP_-ZlZ_xNYEzy1T-U6zEeu3UDbpLBN0ab7wVfEDKC7rYsRqxGN3B/s1600/best+blogger+tips.png'/></a>