Bài viết liên quan có ngày đăng và số nhận xét

Mấy ngày qua có một số bạn hỏi qua khung bài viết liên quan và theo dõi qua email ở cuối mỗi bài đăng của mình. Thực chất thì theo dõi qua email là tùy biến lại giao diện của bài này Widget Theo Dõi Qua Email Flat UI Cho Blogger. Còn lại bài viết liên quan hôm nay mình xin chia sẻ nó tại bài viết này. Script bài viết này KHÔNG phải do mình viết ra, mà do tác giả Duy Phạm làm, do có người hỏi nên mạn phép đem về đây chia sẻ với mọi người.

Bài viết liên quan có ngày đăng và số nhận xét

Bài viết liên quan có ngày đăng và số nhận xét

Đăng nhập vào Blogger » Mẫu » Chỉnh sửa HTML

Tìm đến thẻ ]]></b:skin> và thêm đoạn CSS này lên trên
#related-posts{float:left}
#related-posts ul{margin:0;padding:0;list-style-type:none}
#related-posts ul li{padding:10px 0}
#related-posts ul li:hover img{width:42px;height:42px;padding:0}
#related-posts img{float:left;border:1px solid #BBB;margin-right:10px;width:36px;height:36px;background:#FFF;padding:3px}
#related-posts h3{margin:0;font-size:16px}
Tạo hàm includable để dễ chỉnh sửa hoặc xóa nó đi nếu cần
<b:includable id='relatedPosts' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear:both'/>
<div id='related-posts'>
<script type='text/javascript'>var ry='<h2>Bài viết liên quan</h2>';rn='<h2>Không có Bài viết liên quan</h2>';rcomment='Nhận xét';rdisable='Tắt Nhận xét';commentYN='yes';</script>
<script type='text/javascript'>
//<![CDATA[
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=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('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=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]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><img alt="'+titles[c]+'" src="'+thumb[c]+'"/><div><h3><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a></h3><span>'+timeR[c].substring(8,10)+'/'+timeR[c].substring(5,7)+'/'+timeR[c].substring(0,4)+comments[c]+'</span></div></li><div style="clear:both"></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]>
</script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</div>
<div style='clear:both'/>
</b:if>
</b:if>
cuối cùng chèn nó vào vị trí mà bạn muốn v.d.

Ngay sau bài viết

Tìm đến thẻ
<div class='post-footer'>
thêm đoạn mã nhỏ này vào sau đó
<b:include name='relatedPosts' data='post'>

Ra ngoài khung bài viết giống website của mình

Từ thẻ
<div class='post-footer'>
các bạn kéo xuống tìm đến thẻ </b:includable> gần nhất
và thêm đoạn mã này xuống lên trên
<b:include name='relatedPosts' data='post'>
Sau khi hoàn thành lưu lại template và tận hưởng.

Lời kết

Đây là một trong những script mình ưng ý nhất trong việc lấy bài viết liên quan, còn về phần giao diện mình không thể chia sẻ giao diện y chang của mình được vì mình muốn website của mình có cái riêng với mọi người, nên mình sẻ chỉ hướng dẫn các bạn cách thức để làm ra nó. Nếu có thắc mắc bạn có thể để lại ở khung bình luận phía dưới. Bạn cũng có thể xem qua bài viết gốc của Duy Phạm.

8 bình luận

  1. avatar truong linh says

    19:23 Ngày 16 tháng 02 năm 2014

    bạn cho mình liên kết với nhé :-)
    trang mình: http://tienganhgioi123.blogspot.com/

  2. avatar says

    20:08 Ngày 16 tháng 02 năm 2014

    Ok, bạn để cho mình "Thủ thuật Blogger".

  3. avatar says

    10:51 Ngày 22 tháng 07 năm 2014

    hi bạn, cái theme mình đang dùng cho harrykhang.com tự nhiên không có phần readmore, mặc dù trong phần viết blog mình đã dùng tool readmore ( hình răng cưa ) nhưng khi ra ngoài vẫn không thấy nút readmore :(( bạn check giúp coi nguyên nhân vì sao được không?

  4. avatar says

    20:46 Ngày 31 tháng 07 năm 2014

    Đơn giản, rõ ràng, chính xác, dễ tham khảo tìm kiếm...
    Cảm ơn Blog của bạn

  5. avatar says

    10:00 Ngày 03 tháng 02 năm 2015

    Cảm ơn bạn nha!
    Mình muốn Widget trên chia thành 2 cột theo dạng tương tự như thế này thì làm thế nào hả bạn:
    http://i1231.photobucket.com/albums/ee518/sharesvn/Sharesvn/2Cot.png

  6. avatar says

    11:31 Ngày 03 tháng 02 năm 2015

    Bạn chèn sau main chính nhưng sao cho phù hợp nhé.
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <div id='column-wrapper'>
    <div id='columnleft-wrapper'>
    <b:section class='2column' id='columnleft' preferred='yes'/>
    </div>
    <div id='columnright-wrapper'>
    <b:section class='2column' id='columnright' preferred='yes'/>
    </div>
    <div style='clear:both'/>
    </div>
    </b:if>
    Nếu bạn muốn thêm cái Responsive thì tự thêm thẻ media screen nhé!

  7. avatar says

    11:33 Ngày 03 tháng 02 năm 2015

    CSS
    #column-wrapper{width:780px;float:left;word-wrap:break-word;overflow:hidden}
    #columnleft-wrapper{width:49%;float:left;word-wrap:break-word;overflow:hidden}
    #column-wrapper .widget {
    padding: 10px;
    }
    #columnright-wrapper{width:49%;float:right;margin-left:10px;word-wrap:break-word;overflow:hidden}
    .column .widget{background:#fff;border:1px solid #ccc; height:310px; overflow:hidden; margin:5px 0; padding:10px}
    .column h2{background:#404A5A;color:#fff;line-height:1.4em;padding:2px 10px;margin-bottom:1em}
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    Ở đây mình chỉ cho nó hiển thị ở trang chủ, còn nếu bạn không muốn thì xóa đoạn này với </b:if> ở cuối là được

  8. avatar says

    12:04 Ngày 03 tháng 02 năm 2015

    Cảm ơn bạn nha!

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.