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)

    In bài này
    Previous
    Next Post »

    2 comments

    Click here for comments
    9/8/12 ×

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

    Reply
    avatar
    10/8/12 ×

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

    Reply
    avatar

    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!! ConversionConversion EmoticonEmoticon

           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

    THƯ MỤC KHO TÀI LIỆU MIỄN PHÍ ECHIPKOOL

    Code 8051 - ASM Code 8051 - C Code AVR - C Code led sao băng Code PIC - C Điện tử cơ bản điện tử viễn thông Đo Nhiệt Độ DS18B20 + LCD Đo Nhiệt Độ LM35 + LCD Đo Nhiệt Độ LM35 + Led 7 thanh Đo tốc độ động cơ Động cơ robo Ebook Đại Học ebook điện tử Ebook đồ án Học Orcad Học Protues Hồng ngoại Lập Trình 8051 Lập Trình AVR lập trình c++ Lập Trình Led Quảng Cáo lập trình PIC Lập trình Robot Lập trình VHDL Lcd16x2 Led Clock Led Quay Led RGB Mạch 7seg Mạch Amply.Mạch Loa Mạch Cảm Biến Mạch cube Mạch Đếm Sản Phẩm Mạch điện cơ bản Mạch điện hay Mạch Điện Ứng Dụng Mạch đọc file nhạc MP3 dùng Atmega 8 Mạch Động Cơ Mạch đồng hồ Mạch đồng hồ LCD Mạch đồng hồ Matrix Mạch giao thông Mạch in Mạch khóa số điện tử Mạch Led đơn Mạch Led Quảng Cáo Mạch Led Vumeter Mạch Ma trận Phím Mạch Matrix Mạch nạp Mạch nguồn Mạch Nút Bấm Mạch RS232 Mạch RS485 Mạch thu phát Mạch tổ hợp MSI Mạch trái tim Mạch truyền điện không dây Mạch Vi điều khiển Module Bluetooth Module Sim Module Sim548 Motor Nhiệt độ - Độ ẩm oscilloscope Phần mềm điện tử Phần Mềm Diệt Viruts Phần Mềm Hay Phần Mềm Led Quảng Cáo Phần mềm vi tính robocon Rule robocon Sạc Acquy Sản Phẩm Thương Mại Sáng tạo Smart Home Tài liệu Điện Tử Tranzitor Tụ điện TUT - 8051 - ASM TUT - 8051 - KeilC UART Ứng Dụng Led Quảng Cáo Ứng dụng USB USB TO COM Vi điều khiển - Ứng dụng Vi mạch số VOM Wifi ESP8266