Bài viết liên quan dạng ảnh đẹp mắt cho Blog

Đối với những trang Blog/Web tin tức, hình ảnh tiện ích bài viết liên quan có ảnh hiển thị là rất cần  thiết ! Có ảnh hiển thị giúp người xem theo dõi tiện lợi hơn đồng thời cũng làm cho Blog/Web của bạn nhìn chuyên nghiệp hơn, có tình thẩm mỹ hơn.... Hôm nay Viettin24h giới thiệu đến các bạn thủ thuật tạo bài viết liên quan dạng ảnh và tiêu đề bên dưới nhìn rất đẹp mắt ! Tiện ích này có thể kết hợp với thủ thuật tạo bài viết liên quan dạng ảnh và bài viết để làm thành một giao diện bài viết liên quan chuyên nghiệp và pro hơn ! 

Ảnh minh họa : 

Các bước thực hiện: 

1. Đăng nhập Blogger

2. Chọn mẫu -> Chỉnh sửa HTML

3. Dán code bên dưới trên thẻ </head>

     

<b:if cond='data:blog.pageType == &quot;item&quot;'>    
<style type='text/css'>     
#related-posts {     
float:left;     
text-transform:none;     
height:100%;     
min-height:100%;     
padding-top:5px;     
padding-left:5px; 
}     
#related-posts h2{     
font-size: 1.0em;     
font-weight: BOLD;     
color: #BC0202;
     
font-family: Arial,Helvetica,sans-serif;     
margin-bottom: 0.75em;     
margin-top: auto;     
padding-top: 0em;     
}     
#related-posts a{ 
    text-align: center;    
    color:black; 
    font-size:12px;
border-bottom:1px dotted #ccc;

    margin:10px 2px 12px 6px;   
}     
#related-posts a:hover{     
color:#0461E2;     
} 
    
#related-posts  a:hover {     
background-color:#DAFDFF;     
}     
</style>     
<script type='text/javascript'>     
var defaultnoimage=&quot;http://lh5.googleusercontent.com/-w_-nmCLIGFQ/AAAAAAAAAAI/AAAAAAAAAAA/yW8TJFAV4_I/s96-c/photo.jpg&quot;;     
var maxresults=18;     
var splittercolor=&quot;#d4eaf2&quot;;     
var relatedpoststitle=&quot;BÀI VIẾT CÙNG CHUYÊN MỤC:&quot;;     
</script>     
<script src='https://script-viettin24h.googlecode.com/svn/branches/related post anh.js' type='text/javascript'/>     
</b:if>

4.Tìm đến 1 trong các code như: 

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

và dán code sau vào 

<b:if cond='data:blog.pageType == &quot;item&quot;'>    
<div id='related-posts'>     
<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=18&quot;' type='text/javascript'/></b:loop>     
<script type='text/javascript'>     
removeRelatedDuplicates_thumbs();     
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);     
</script>     
</div><div style='clear:both'/>     
</b:if>     
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>     
     
</b:if></b:if>

Các bạn điều chỉnh các phần mình tô đỏ theo ý và phù hợp với Blog

Chúc các bạn thành công !