Related Posts Widget dạng list cho blog

Bài viết này mình tiếp tục chia sẻ một style của widget Bài viết liên quan (related posts) chèn bên dưới bài đăng dành cho Blogger - Related Posts Widget dạng list đẹp mắt. Sau đây là các bước tạo widget:

Bước 1: Tại trang quản trị blog, các bạn vào Mẫu > Chỉnh sửa HTML, chèn đoạn code sau vào dưới thẻ ]]></b:skin>:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
    margin: 15px 5px;
}

#related-posts h2 {
    font-size: 27px;
    font-weight: normal;
    color: #fff;
    text-shadow: 1px 0px 2px #888;
    margin-bottom: 0.75em;
}

#related-posts a {
    font-size: 13px;
    color: #888;
    text-transform: capitalize;
}

#related-posts a:hover {
    text-decoration: none;
    color: #555;
}

#related-posts ul {
    list-style-type: none;
    margin: 0 0 0px 0;
    padding: 0px;
    text-decoration: none;
    color: #000000;
}

#related-posts ul {
    list-style-type: none;
    background: #f9f9f9;
    border-left: 5px solid #f2f2f2;
}

#related-posts li {
    padding: 10px;
    line-height: 1.4;
    border-bottom: 1px dotted #E2E2E2;
}

#related-posts li:hover {
    background: #F4F4F4;
}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script type="text/javascript" src="http://yourjavascript.com/26110031502/kjmagic-rposts.js"></script>
</b:if>

Bước 2: Tìm dòng <div class='post-footer'> và chèn bên dưới nó đoạn code sau:

<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>  <b:if cond='data:blog.pageType == &quot;item&quot;'>  <script expr:src='&quot;/feeds/posts/default/-/&quot; +  data:label.name +  &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;'  type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5;  removeRelatedDuplicates();  printRelatedLabels(&quot;<data:post.url/>&quot;);  </script></div></b:if>

Trong đó 5 là số bài viết bạn muốn widget hiển thị.

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