Các bạn xem DEMO tại ĐÂY
Để thêm vào blogspot các bạn vui lòng thực hiện theo các bước sau đây
Bước 1: Vào bảng điều khiển blogger (Blogger Dasboard)
Bước 2: Chọn chỉnh sửa mẫu (Template)
Bước 3: Chọn chỉnh sửa HTML
Bước 4: Chọn mở rộng tiện ích
Bước 5: Tìm đoạn code sau:
</head>Bước 6: Copy đoạn code dưới đây và dán vào phía trước đoạn code </head> vừa tìm được
<!--RelatedPostsStarts--> <script language='JavaScript'> //<![CDATA[ var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break; } } } } function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i]; } } relatedTitles = tmp2; relatedUrls = tmp; } function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false; } function printRelatedLabels() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 6) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0; } i++; } document.write('</ul>'); } //]]> </script> <!--RelatedPostsStops-->Bước 7: Tìm một vị trí thích hợp mà bạn muốn hộp bài viết liên quan hiện trong template.
Thường thì sẽ dán ở đoạn code sau:
<div class='post-footer-line post-footer-line-2'/>Tuy nhiện với một số loại responsive template thì sẽ phải dán ở đoạn:
<div class='post-footer-line post-footer-line-3'/>
</div>
</div>
<b:includable id='relatedpost'> .......... </b:includable>
Bước 8: Copy và dán đoạn code sau vào đoạn code mà bạn vừa tìm được ở bước 7.
Bước 9: Tiếp theo bạn tìm trong template đoạn code
<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 currentposturl="<data:post.url/>"; var maxresults=5; <!-- Increase To Show More Then 5 Related Post -->
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
]]></b:skin>
và dán vào phía trước đoạn code ]]></b:skin> một trong những đoạn code của các kiểu cho dưới đây mà bạn thấy thích.
LOẠI 1:
#related-posts {clear: both;}
#related-posts ul{margin: 20px 0; padding: 0;list-style: none;}
#related-posts ul li {border-top: 1px solid #333;border-bottom: 1px solid #111;}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {padding: 10px;display: block;color: #222;text-decoration: none;cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */}
#related-posts ul li a:hover {padding-left: 20px;}
LOẠI 2:
#related-posts {clear: both;}
#related-posts ul{margin: 20px 0; padding: 0;list-style: none;}
#related-posts ul li {border-top: 1px solid #333;border-bottom: 1px solid #111;background: #222;}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {padding: 10px;display: block;color: #fff;text-decoration: none;cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */}
#related-posts ul li a:hover {padding-left: 20px;background: #111;}
LOẠI 3:
#related-posts {clear: both;}
#related-posts h2{color: #fff;}
#related-posts ul{margin: 20px 0; padding: 0;list-style: none;}
#related-posts ul li {border-top: 1px solid #333;border-bottom: 1px solid #111;background: #222;}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {padding: 10px;display: block;color: #fff;text-decoration: none;cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */}
#related-posts ul li a:hover {padding-left: 20px;background: #111;}
Bước 10: Lưu lại và thưởng thức.
Lưu ý: Các bạn hoàn toàn có thể tùy chỉnh màu sắc và cách thể hiện cũng như font chữ trong mỗi loại mà mình đã kể trên.
Chúc các bạn thành công.
