DESIGN WEB: Tạo mục bài viết liên quan blogger

Bài này, mình xin hướng dẫn các bạn cách tạo tiện ích Bài viết liên quan 1 cách đơn giản nhất

Tạo Widgets bài viết liên quan cho BlogSpot

Đăng nhập vào tài khoản Blogger bằng tài khoản Gmail của các bạn. Chọn blog các bạn muốn chỉnh sửa:

Thiết kế -> Chỉnh sửa HTML, đánh vào ô Mở rộng mẫu tiện ích

CtrL + F tìm đến thẻ </head> trong Templates của các bạn và thêm đoạn code sau trước thẻ này:

<style>  #related-posts { float : left;  width : 540px; margin-top:20px;  margin-left : 5px; margin-bottom:20px;  font : 11px Verdana;  margin-bottom:10px; } #related-posts .widget {  list-style-type : none;  margin : 5px 0 5px 0; padding : 0; }  #related-posts .widget h2,  #related-posts h2 { font-size : 20px;  font-weight : normal; margin :  5px 7px 0; padding : 0 0 5px; }  #related-posts a { text-decoration :  none; } #related-posts a:hover {  text-decoration : none; }  #related-posts ul { border : medium none;  margin : 10px; padding : 0; }  #related-posts ul li { display : block;  background :   url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEby5xOaOkl0GT_-8Yke4Rl0lEvbcryZm2CvlWn_C_EjOcEiCVHFax77a4KZkIsKsvr2UckE3DmKNBmuz1e-gFQf45H9s2RulozNQMfjE-9lYrarj3OwqBisw_kGV0tFTGeeMNeqnrKS0/")   no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0;   padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px;   line-height : 2em; border-bottom:1px dotted #cccccc; } </style>   <script   src='http://theblogtemplates.com/scripts/Related_posts_hack.js'   type='text/javascript'/>

Tiếp đến, tìm <data:post.body/> (hoặc <div class='post-body>) và thêm vào ở dưới đoạn code các các bạn vừa tìm được:

<b:if  cond='data:blog.pageType == "item"'>

<div id="related-posts">

<font face='Arial' size='3'><b>Related Posts :   </b></font><font color='#FFFFFF'><b:loop   values='data:post.labels'   var='label'><data:label.name/><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> </font>

<script type='text/javascript'> removeRelatedDuplicates();  printRelatedLabels();

</script>

</div></b:if>

Cuối cùng là Save lại và tận hưởng thành quả của mình ^^

vntim