[Blogger Tips] Hướng dẫn tạo hộp bài viết liên quan có hiệu ứng đổi màu khi rê chuột cho blogspot

Hôm nay mình sẽ chia sẻ với các bạn cách để tạo hộp bài viết liên quan cho blogspot có hiệu ứng đẹp khi rê chuột. Mình sẽ lần lượt chia sẻ 3 loại hộp bài viết có hiệu ứng khác nhau để các bạn tùy chọn.

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'/>
<div class='post-footer-line post-footer-line-3'/>
</div>
</div>

Tuy nhiện với một số loại responsive template thì sẽ phải dán ở đoạn:

<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: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=5&quot;' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=5; <!-- Increase To Show More Then 5 Related Post -->

removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

Bước 9:  Tiếp theo bạn tìm trong template đoạn code

]]></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.