Related Posts Widget đẹp mắt cho blog

Bài viết này mình sẽ chia sẻ tới các bạn thủ thuật tạo một widget hiển thị các bài viết liên quan (related posts) với hiệu ứng hover đẹp mắt để chèn bên dưới bài đăng trên blog. Sau đây là các bước thực hiện thủ thuật:

LIVE DEMO
(Demo có thể khác với thủ thuật)

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 sau thẻ ]]></b:skin>:

<!-- Related Posts :: kjmagic.blogspot.com -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}

#related-posts .widget{

padding-left:6px;

margin-bottom:10px;

}

/* Related Posts by kjmagic.blogspot.com */

#related-posts .widget h2, #related-posts h2{

font-size: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;}

#related-posts a{color:#0c0080;}

#related-posts a:hover{color:#0ab0fd;}

#related-posts ul{

list-style-type:none;

margin:0 0 0px 0;

padding:0px;

text-decoration:bold;

font-size:12px;

text-color:#000000

}

/* Related Posts by kjmagic.blogspot.com */

#related-posts ul li{

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHEfrwH9MANlBtDIyqqDAQU6Dku0MEm3zogpB2rG_o6WfzUX4dmhl2BTdUxk5JqA0NlF_lZp3COYSqVScSVnz3XtR1-n40H3FK_BJkXwQTT2XUVtevurOIrXj_1748mS2aYB0hCmIP-Q/s1600/btrix_arrow-icon.png) no-repeat ;

display:block;

list-style-type:none;

margin-bottom: 13px;

padding-left: 30px;

padding-top:0px;

height: 20px;

margin-top: -5px;}

/* Related Posts by kjmagic.blogspot.com */

  #related-posts ul li:hover{

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8zdRZo4ZCqV3QbHAYyvgTlbugb19TYGBT3DQfLU5sHpsDP-ytwPrLN5HrsfBGQfl_N1nJjHb5_rkSbfHwidV0i0jPZqYkbY0ecT0TKN-Tqt7iDL8LMaX1TGa7UdGCDzBm_t6SC8uP9w/s1600/btrix_arrow-icon2.png) no-repeat ;

display:block;

list-style-type:none;

margin-bottom: 13px;

padding-left: 30px;

padding-top:0px;}</style></b:if>

<!-- Related Posts :: kjmagic.blogspot.com End -->

Bước 2: Tìm đoạn sau:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
            <data:post.body/>

Bước 3: Chèn đoạn code bên dưới vào ngay sau nó:

<!-- Related Posts :: kjmagic.blogspot.com -->

<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=6;

removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);

</script>

</div>

</b:if>

<!-- Related Posts :: kjmagic.blogspot.com End -->

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

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