Một số style Related Posts Widget cho blog

Related Posts (bài viết liên quan) là một widget được các blogger sử dụng rất phổ biến, nó giúp độc giả có thể xem thêm các bài viết khác cùng chuyên mục với bài viết họ đang xem trên blog của bạn. Bài này mình sẽ chia sẻ tới các bạn một số style của Related Posts Widget chèn bên dưới bài đăng dành cho Blogger.

• Style 1:

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 trước thẻ đóng </head>:

<!--Simple Related Posts by kjmagic.blogspot.com-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
margin-top: 20px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 17px;
font-weight: normal;
color: black;
font-family: Arial Narrow;
margin-bottom: 0.75em;
padding-top: 0em;
}
#related-posts a{
font-size:16px;
color: #555555;
font-variant:small-caps;
}
#related-posts a:hover{
text-decoration: none;
color: #ffffff;
font-weight: bold;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:none;
text-color:#000000
}
#related-posts ul li{
list-style-type: none;
border-left: 2px solid #1399CF;
border-bottom: 1px dotted #1399CF;
margin-bottom: 3px;
padding-left: 30px;
padding-top:0px;
}

#related-posts ul li:hover{
background-color: #1399CF;
border-left: 2px solid #B3CA3D;
border-bottom: 1px dotted #B3CA3D;
}
</style>
<script type='text/javascript'>
var relatedpoststitle="Tin bài liên quan";
</script>
<script src='http://yourjavascript.com/4351227183/kjmagic-simple-related-posts.js' type='text/javascript'/>
</b:if>
<!--/Simple Related Posts by kjmagic.blogspot.com-->

Bước 2: Chèn đoạn code sau vào sau thẻ <div class='post-footer'>:

<!--Simple Related Posts by kjmagic.blogspot.com-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script> </div></b:if> <!--/Simple Related Posts by kjmagic.blogspot.com-->

Có thể thay 5 thành số bài viết bạn muốn hiển thị.

• Style 2 (hiển thị thumbnail):

Bước 1: Tương tự như Style 1, nhưng sử dụng đoạn code sau:

<!--Related Posts with thumbnails by kjmagic.blogspot.com-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtJlPSyaTwBDIwf-NmBpGaJkfUFhIFtDWdYg3dRClO_a0P7sZiVaGOawDIPLR5quLIPP7nXaIfuSADbT5p26GjkiTReu_wKZP-2wy4XZW8KLuDfqkQBqAqcXnDeWDVgpIGWvxLgrVHn2Y/s1600/no_image.jpg";
var maxresults=5;
var splittercolor="#DDDDDD";
var relatedpoststitle="Tin bài liên quan";
</script>
<script src='http://yourjavascript.com/5282274114/kjmagic-related-posts-with-thumb.js' type='text/javascript'/>
</b:if>
<!--/Related Posts with thumbnails by kjmagic.blogspot.com-->

Bước 2: Tương tự như Style 1, nhưng sử dụng đoạn code sau:

<!--Related Posts with Thumbnails by kjmagic.blogspot.com-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<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=5"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://kjmagic.blogspot.com'>Widget by <b>KJ Magic</b></a>
</b:if></b:if>
<!--/Related Posts with Thumbnails by kjmagic.blogspot.com-->

Có thể thay 5 thành số bài viết bạn muốn hiển thị.

Chúc thành công !