Mạch Khóa Số Điện Tử Mạch Đếm Sản Phẩm Mạch Đèn giao thông Ngã Tư Mạch Trái Tim Final Mạch Trái Tim Final Mạch Trái Tim I Love U

August 7, 2012

Bài viết liên quan cho Blogger - Related posts - Sử dụng CSS (Update)

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="http://2.bp.blogspot.com/-8k1uk67oZ1M/UCD-c70EnEI/AAAAAAAADg0/iuXEnGeJPHc/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>









  • maxresults là số bài viết hiển thị ở danh sách bài viết liên quan. Thủ thuật này đặt giá trị là 5, bạn có thể thay đổi theo ý muốn.
  • Những thông số được tô đậm thì bạn có thể chỉnh sửa sao cho phù hợp với temp của bạn nhé


  • Theo it.duyhieu.info (edit by chipkool)

    2 comments:

    ©«Admin»® said...
    9/8/12

    nên có demo cho mọi người dễ hình dung chip ui :)

    Aba Chíp Xù said...
    10/8/12

    Sao lại đặt code ra ngoài khung vậy bạn?:-?

    Post a Comment

    Bạn đọc hãy giúp chúng tôi xây dựng cộng đồng bằng cách để lại bình luận, chúng tôi luôn đón nhận mọi ý kiến của các bạn:
    » Bình luận nghiêm túc và không chứa các liên kết quảng cáo.
    » Vui lòng không Spam nhận xét với mọi hình thức.
    » Rất mong bạn đề tên cho nhận xét của chính mình - Bằng cách chọn vào Tên/URL và điền tên bạn vào (Phần URL có thể bỏ trống ).

    - Bạn có thể chèn Link nhạc (NCT), video(Youtube),Hình ảnh vào comment bằng cú pháp:
    + [youtube] Link video Youtube [/youtube].
    + [img] Link ảnh( định dạng PNG, JPG,GIF) [/img]
    +Chèn link liên kết: <a href="LINK" rel="nofollow">Name</a>
    -Bạn copy mã bên cạnh biểu tượng chèn vào nhận xét để bày tỏ cảm xúc!!

    :) :( :)) :(( =)) =D> :D :P