Lần này quay trở lại với blogger (đã làm 1 lần nhưng lam cho biết, rồi chuyển qua wordpress :D) mình sẽ đăng bài viết về thủ thuật blogger, bài viết lần này là mình tổng hợp từ nhiều nguồn khác nhau(fandung & duypham& internet) do đó nó mang lại một style đẹp hơn (theo mình nghĩ là thế :D).Relate post này có sử dụng CSS cho nên nhìn thân thiện hơn.
Ta bắt đầu vào làm thôi :)
Bước 1: Chèn CSS - chèn trước thẻ ]]></b:skin>
#related-posts {
float : left;
width : 270px;
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 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://images.findicons.com/files/icons/1035/human_o2/16/new_go_next.png") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
Bước 2: Chèn Script : Thêm đoạn mã dưới đây vào trước thẻ </head>
<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
//<![CDATA[
var titles=new Array();var titlesNum=0;var urls=new Array();var time=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);e=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a]}}titles=c;urls=b;time=e}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;document.write("<ul>");if(titles.length==0){document.write("<li>Không có bài viết liên quan</li>")}else{while(b<titles.length&&b<20&&b<maxresults){document.write('<li><a href="'+urls[c]+'" title="'+time[c].substring(8,10)+"/"+time[c].substring(5,7)+"/"+time[c].substring(0,4)+'">'+titles[c]+"</a></li>");if(c<titles.length-1){c++}else{c=0}b++}}document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titles.length)};
//]]>
</script>
</b:if>
Bước 3: Chèn code hiển thị, đoạn code này mình đã chỉnh sửa bố cục lại rồi, các bạn có thể chèn code tùy ý khác vào đoạn bôi đậm dưới đây:
Thêm đoạn mã dưới đây vào sau thẻ <div class='post-footer'> ở template của bạn.
<b:if cond='data:blog.pageType == "item"'>
<table width="550" border="0">
<tr>
<td colspan="2" align="center"><img src="https://lh4.googleusercontent.com/-gDzK9GwucFs/Tn1VWJMiDrI/AAAAAAAAATA/Yw7ivIRDMWM/s550/550_top.png" /></td>
</tr>
<tr>
<td valign="top"><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b>Bài viết liên quan:</b>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</div>
</b:if></td>
<td valign="top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWLjWqy1FhXBiZB01e_XHQBjz5JU4RthYDHD5biA7131Z3Vj1pIOnslwRV6R41kRd8wK8WkA8TifhUymjfFCMqtOf8VdZHFWAje_FRgbbi1raZnGnb8hU6kcQ5x6wij6lOMrMatWJ4XME8/s1600/Logo-Chipkool.jpg" width="250" height="250" /></td>
</tr>
<tr>
<td colspan="2" align="center"><img src="https://lh4.googleusercontent.com/-4lpTcdCoPEg/Tn1VWGR-OGI/AAAAAAAAATA/NcvzRpTPSR0/s550/550_bottom.png" /></td>
</tr>
</table>
</b:if>
Theo it.duyhieu.info (edit by chipkool)
