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

Demo

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>

<!--start related posts-->
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);
}
<!--end related posts-->

• 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

<!--start related posts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h3>Related Posts</h3>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUAqc3_bFpElbTsO9cBVaXfOFRhKBEj8XWUYRSuC0Di_1J51JH_7pJxgFsoVphlBdcWEPMEAkJfGFb0oPL25zG7S6FlGSE3crmogdBrF_CSAA2O093a1-8KEeZJnz_cdbUBnFZXB-YGT4/s1600/no-image.gif&quot;;
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 != &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>
</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/AVvXsEhQa73gv1sG89ijZVpZVn5Hj0PsYpT6tszjrq3JOi7B3CBp7D-DaYW701-SHtWx29kudOyVQYrttqEU74PFAhX68FxKvtjDaxBl0qKKha_yJ5sA8zWC0K0_zDy2gQ4FPAhrDCgeaqBpW2zB/s1600/best+blogger+tips.png'/></a>
<!--end related posts--> 

Mặc định mình để số bài viết liên quan được hiển thị là 6 ,các bạn có thể tùy biến sao cho phù hợp với blog của mình

• Lưu template lại và xem kết quả

Chúc bạn thành công và đừng quên comments đóng gióp cho mình nha!