Beautiful Related Posts - Part 1

Nào chúng ta cùng bước vào thực hiện nhé.




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:

#related{width:100%}
.related-posts{font:bold 13px Arial;text-align:center;list-style:none;text-transform:none;margin:0 0 20px;padding-left:9px}
.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}
.related-posts li a{border:1px solid #bbb;background:#fff;display:block;height:90pxwidth:90px;;position:relative;color:#fff;text-decoration:none;padding:4px 4px 1px 4px}
.related-posts li .overlay{height:84px;width:84px;line-height:16px;position:absolute;z-index:10;padding:6px 3px 0 3px}
.related-posts li a:hover .overlay{background:rgba(0,0,0,.7);display:block!important}
.related-posts li img{bottom:0;padding:0!important}
.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="https://lh6.googleusercontent.com/-bcJY_dGtfrg/UPKa5JYfQsI/AAAAAAAABGw/cEdD_zscID4/s0/no-image.jpg";
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 != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=20"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</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!