Bài viết liên quan chuẩn HTML5 cho Blogger

Tiếp tục với chuỗi bài viết về các tiện ích chuẩn HTML5 cho một website, và hôm nay là một tiện ích chuẩn cho Blogger hay dân chúng thường gọi là Blogspot. Tiện ích chuẩn HTML5 lần này là bài viết liên quan, về tác dụng của nó thì chắc khỏi cần phải nói nó làm gì rồi, làm cho khách truy cập có thể cập nhật nhiều thông tin hưu ích hơn mà họ có thể cũng đang tìm kiếm.

Bài viết liên quan chuẩn HTML5 cho Blogger
Về tiện ích mà mình tìm được và chia sẻ lần này có hơi đáng tiếc là nó chỉ có tiêu đề thôi chứ không có ảnh thu nhỏ cho các bài viết liên quan. Nhưng nghĩ lại thì có thumbnail cũng không có thay đổi gì nhiều, cái mà để quyết định người dùng dó đọc bài viết hay không thường chỉ do tiêu đề mà thôi.

Bài viết liên quan chuẩn HTML5 cho Blogger

Tiện ích này là một tiện ích mình lấy từ một trong những blog của người Indonesia, phải nói rằng họ rất chi là chuộng sử dụng HTML5 cũng như Blogger, khá nhiều tiện ích hay đều xuất phát từ đó.

Để thêm bài viết liên quan chuẩn HTML5 vào blog của bạn các bạn hay làm theo các bước sau đây. Vào chỉnh sửa HTML cho blog mà bạn muốn thêm vào, chèn đoạn css sau đây lên trên thẻ ]]></b:skin>
#related-post {background:none;width:100%;margin-top:35px;margin-bottom:10px;padding:5px 0 10px 0px}
#related-post h4{font-size:150%;text-transform:uppercase;margin:0 0 15px;padding:0;font-weight:normal}
#related-post li{color:#2c3e50;text-indent:0;line-height:1.6em;margin:0 20px;}
#related-post .widget{margin:0;padding:0}
#related-post ul{list-disc;margin:0;padding:0}
đoạn css này bạn có tinh chỉnh lại theo ý thích của bạn.

Tiếp tục chèn đoạn mã sau đây vào vị trí mà bạn muốn hiện bài viết liên quan, thông thường nếu bạn muốn chèn ở cuối bài viết thì tìm đến đoạn mã sau
<div class='post-footer-line post-footer-line-1'>
và chèn ở dưới nó
<!-- Bài Viết Liên Quan -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='related-post' class='related-post'/>
  <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;Bài liên quan:&lt;/h4&gt;&quot;,
      numPosts: 5,
      titleLength: &quot;auto&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      widgetStyle: 1,
      callBack: function() {}
  };
  </script>
  <script type="text/javascript">
//<![CDATA[
/*! KHÔNG CHỈNH SỬA ĐOẠN MÃ NÀY - Related Post Widget for Blogger by Taufik Nurrohman => http://gplus.to/tovic */
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Related Post:</h4>",widgetStyle:1,homePage:"http://blog.kangismet.net",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail" in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>
</b:if>
<!-- Kết Thúc Bài Viết Liên Quan -->
Ở đoạn mã bên trên các bạn chỉ cần quan tâm đến 2 thứ là
  • widgetTitle: Tiêu đề của tiện ích này
  • numPosts: Số lượng bài viết
sau khi chỉnh sửa xong thì lưu lại template của bạn và tận hưởng thành quả.

Lời kết

Trong việc chỉnh sửa lại các ký tự "&" thành "&amp;" nếu bạn nào có thử qua thì đối với Blogger, đôi khi có chỉnh sửa thế nào đi nữa nó cũng không thành công khi check chuẩn HTML5. Do đó việc có một Blogger template với những tiện ích như thế này thì đã giúp đỡ khá nhiều trong việc tìm tòi và tối ưu cho blog của mỗi người. Mọi thắc mắc và ý kiến đóng góp về tiện ích bài viết liên quan chuẩn HTML5 này hãy để lại ở dưới.

P/S: Hiện tại nếu bạn nào không thích HTML5 và thích cái đẹp và tính năng thì hay tham khảo qua bài viết liên quan nhiều tùy chỉnh đã chia sẽ tại blog của mình.

29 bình luận

  1. avatar says

    09:05 Ngày 23 tháng 07 năm 2014

    chao ban
    minh da thu voi harrykhang.com cua minh nhung van khong duoc
    minh lam y chang nhung gi ban huong dan luon :((

  2. avatar says

    09:28 Ngày 23 tháng 07 năm 2014

    Bạn phải xem lại rồi, bạn đặt vào đâu mà mình vào blog của bạn kiểm tra vị trí của mình hướng dẫn nhưng không thấy.

  3. avatar says

    07:26 Ngày 24 tháng 07 năm 2014

    Lâm Kiều có thể hướng dẫn cách làm Bài viết liên quan giống như cái mà bạn đang sử dụng được không :D. Mình rất thích kiểu related post như vậy lắm. Cám ơn trước nhé. hihi :x

  4. avatar says

    19:07 Ngày 25 tháng 07 năm 2014

    Chào bạn Kiều, trước tiên mình xin cảm ơn các bài viết của bạn.Mình đọc bài viết của bạn thì rất ít ghi comment thắc mắc vì bài viết thường rõ ràng và các đoạn css tối ưu, ngắn gọn hơn các trang khác nhưng các tiện ích thì rất đẹp.Nhưng hôm nay, khi đang làm theo bài viết trên thì mình nhận ra một vấn đề mà mình không comment ko được: Template Harderly mình đang dùng không có đoạn mã "" hay tương tự@@, bạn có thể giúp mình vấn đề này ko ??

  5. avatar says

    19:42 Ngày 25 tháng 07 năm 2014

    Thứ nhất là mình thực sự là không hiểu lắm về, cái ý mà bạn nói :D

    Thứ 2, nếu trong comment nếu muốn hiện được mã thì bạn phải chuyển sang viết kí tự bằng HTML, bạn có thể dùng Chuyển đổi HTML mà mình thêm ở cuối cùng mỗi bài viết.

    Nếu mình đoán không lầm thì bạn nói là, bạn tìm không thấy
    <div class='post-footer-line post-footer-line-1'>

    Nếu chính xác domain của bạn là
    http://meovathq.blogspot.com/
    thì thay vì tìm đến cái đoạn trên, thì bạn hãy tìm đến đoạn này
    </article>
    và thêm lên trên nó như bình thường là được.

  6. avatar says

    19:43 Ngày 25 tháng 07 năm 2014

    Nếu bạn thích thì một vài bữa nữa mình sẽ chia sẻ sau :)

  7. avatar says

    22:32 Ngày 25 tháng 07 năm 2014

    Cảm ơn bạn, quả thật mình đang "kẹt" cái vấn đề này.
    À mà, cái vấn đề thứ 2, lần sau mình sẽ cẩn thận hơn.

  8. avatar says

    14:18 Ngày 27 tháng 07 năm 2014

    Cám ơn bạn nha. Hi vọng sẽ sớm dc đọc bài hướng dẫn của bạn :D

  9. avatar says

    11:07 Ngày 29 tháng 07 năm 2014

    Nếu bạn cần gấp thì liên hệ mình với địa chỉ domain của trang bạn nhé, mình phải biết được kích thước của trang mới dễ làm được :)

  10. avatar says

    23:08 Ngày 11 tháng 09 năm 2014

    Chào ban, mình đã làm như hướng dẫn của bạn trên website của mình nhưng bài viết liên quan vẫn không hiển thi, bạn kiểm tra giúp mình xem có thiếu gì nữa không nhé, cảm ơn bạn rất nhiều, web của mình la http://www.xinphepxaydungnha.com

  11. avatar says

    23:15 Ngày 11 tháng 09 năm 2014

    Chào bạn, mình vừa tham khảo qua template của bạn, cấu trúc nó đã bị thay đổi không giống mặc định nhé. Do vậy thay vì chèn ở dưới cái thẻ post-footer-line mà mình đã hướng dẫn ở trên, thì bạn tìm đến đoạn mã này và chèn lên trên nó nhé
    <div class='post-footer-line post-footer-line-2' style='display:none;'>
    xong thì báo mình nhé.

  12. avatar says

    13:53 Ngày 06 tháng 01 năm 2015

    chào bạn, mình làm như bạn vẫn không hiện ra. Bạn có thể giúp mình qua mail:hotrovnptonline@gmail.com hoặc yahoo: sakkoder99. Blog của mình : hotrovnpt.blogspot.com. Thanks

  13. avatar says

    13:54 Ngày 06 tháng 01 năm 2015

    chào bạn, mình làm như bạn vẫn không hiện ra. Bạn có thể giúp mình qua mail:hotrovnptonline@gmail.com hoặc yahoo: sakkoder99. Blog của mình : hotrovnpt.blogspot.com. Thanks

  14. avatar says

    17:21 Ngày 06 tháng 02 năm 2015

    Mình thực hiện không được

  15. avatar says

    19:28 Ngày 06 tháng 02 năm 2015

    Chi tiết là bị lỗi gì vậy bạn :D

  16. avatar says

    13:57 Ngày 11 tháng 03 năm 2015

    giúp em với em tải 1 theme trên mạng về mà cái bài đăng liên quan của nó không hoạt động chú..mà em chả thấy class='post-footer-line post-footer-line-1' ở đâu để thêm vào cả phải làm sao đây anh để nó hiện bài đăng liên quan như của anh à..còn css em tự code cung được mong anh giúp

  17. avatar says

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

    Bạn để lại địa chỉ trang web lại cho mình xem thử nhé, chứ không có gì nhìn thì mình bó tay :D

  18. avatar says

    08:41 Ngày 19 tháng 03 năm 2015

    Mình làm thì hiện bình thường nhưng nó hiển thị lung tung không theo thứ tự gì cả ad à, mình muốn nó hiển thị liên quan từ mới đến cũ có được không

  19. avatar says

    08:42 Ngày 19 tháng 03 năm 2015

    Mình làm thì hiện bình thường nhưng nó hiển thị lung tung không theo thứ tự gì cả ad à, mình muốn nó hiển thị liên quan từ mới đến cũ có được không

  20. avatar says

    13:32 Ngày 19 tháng 03 năm 2015

    Để mình chỉnh sửa thử lại xem sao, thông thường người ta viết hàm random vào tiện tích bài viết liên quan là muốn tránh những bài viết cũ không còn được rờ mó nữa. Lần đầu mình thấy có người muốn tạo bài viết liên quan thế này :D

  21. avatar says

    11:18 Ngày 23 tháng 06 năm 2015

    Cảm ơn anh đã chia sẻ một bài viết rất hay và có ích!
    Học lái xe HCM | học lái xe cấp tốc  | học lái xe cấp tốc tphcm

  22. avatar says

    12:46 Ngày 07 tháng 07 năm 2015

    Chào bạn, bạn có code nào bài viết liên quan có phân trang không, mình làm theo trang này không được. Mà tác giả trang đó chắc ko còn nữa. Rất mong nhận dc hồi âm sớm của bạn. http://hontap.blogspot.com/2010/03/bai-viet-lien-quan-cho-blogger-ban-nang.html

  23. avatar says

    21:20 Ngày 07 tháng 07 năm 2015

    Cái này mình chịu không có bạn nhé :D

  24. avatar says

    19:32 Ngày 04 tháng 08 năm 2015

    Mình muốn thay cái dấu chấm ở đầu mỗi bài bằng biểu tượng fontasome thì làm thế nào ad?

  25. avatar says

    20:28 Ngày 04 tháng 08 năm 2015

    Cụ thể hình nào với link web để test luôn cho dễ :D

    Thử nhé
    #related-post { list-style:none }
    #related-post li:before {
    content: "\f000";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    float: left;
    }
    thay cái content bằng cái của fontawesome là xong.

  26. avatar says

    18:08 Ngày 05 tháng 08 năm 2015

    Cảm ơn bác, em đã tự xử được rồi :D

  27. avatar says

    20:08 Ngày 05 tháng 11 năm 2015

    bạn cho hỏi mình muốn chữ màu đỏ và lơn hơn thì làm như thế nào vậy bạn.Thanks

  28. avatar says

    18:57 Ngày 24 tháng 11 năm 2015

    Bài viết rất hữu ích :) Rất muốn có cái bài viết liên quan như blog bác đang dùng hi vọng bác chia sẻ :)

    Email: Mr.daodat@gmail.com
    Blog: Datlun.com

  29. avatar says

    18:47 Ngày 18 tháng 04 năm 2016

    Mình muốn cho nó ở trên đầu bài viết thì chèn vào đâu bạn nhỉ

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.