Bài viết liên quan đẹp - Phần 1

 Xin chào bạn! Vậy là hôm nay chúng ta lại tiếp tục với một tiện ích mới đó là Bài viết liên quan - Related post. 

Đây là tiện ích mình tìm tòi cũng khá nhiều nhưng tìm được rất ít mẫu ưng ý với tiêu chí bản thân Đơn giản nhưng lại đẹp (simple - beautiful).

Và bây giờ mình sẽ cùng giới thiệu đến bạn một mẫu style mình khá ưng ý, mẫu này mình vô tình trích ra được từ một mẫu template khi view sound nên không tìm lại được nguồn tác giả. Nếu bạn vô tình biết được tác giả của thủ thuật này xin thông báo cho mình nhé.

Demo

Bước 1: Bạn vào phần Chỉnh sửa HTML  (click Mở rộng Mẫu Tiện ích) tìm đến ]]></b:skin> trong template và dán ngay trên nó đoạn mã sau:

ul#related-posts{font:bold 13px Arial;text-align:center;list-style:none;text-transform:none;margin:10px 0;padding:0}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px 0 6px;padding:2px 0}
*html ul.rp#related-posts li{margin:0 13px}
ul#related-posts li a{box-shadow:0 0 7px #000;-moz-box-shadow:0 0 7px #000;-webkit-box-shadow:0 0 7px #000;display:block;height:90pxwidth:90px;;position:relative;color:#fff;text-decoration:none;padding:4px 4px 1px 4px}
ul#related-posts li .overlay{height:84px;width:84px;line-height:16px;position:absolute;z-index:10;padding:6px 3px 0 3px}
ul#related-posts li a:hover .overlay{background:rgba(0,0,0,.7);display:block!important}
ul#related-posts li img{bottom:0;padding:0!important}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}

Bước 2: Bạn  tìm đến đoạn mã

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

Và dán ngay sau nó đoạn code sau:

<div class='clearfix' id='related'>
<div class='related-posts'>
<script type='text/javascript'>
var defaultnoimage=&quot;https://lh6.googleusercontent.com/-bcJY_dGtfrg/UPKa5JYfQsI/AAAAAAAABGw/cEdD_zscID4/s0/no-image.jpg&quot;;
var maxresults=6;
</script>
<script src='http://dxhbook.googlecode.com/files/related-post.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=20&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>              
</div>
</div>

Lưu ý:

- Tùy thuộc vào bố cục template của bạn mà vị trí để dán đoạn code trên cũng khác nhau.

- Nếu bạn muốn chỉnh sửa kích thước của ảnh thu nhỏ cho phù hợp hơn với blog của mình thì nhất thiết cần chỉnh đồng bộ cả trong đoạn mã css ở bước 1 và trong file javascrip ở bước 2.

Ok save lại template và tận hưởng!