Bài viết liên quan có hình ảnh chuẩn HTML5

Trước đây mình có giới thiệu đến các bạn một tiện ích bài viết liên quan đạt chuẩn HTML5, nhưng có một điều là nó không có hình ảnh mà chỉ có tiêu đề của bài viết liên quan đó thôi. Đối với mình thì có hình ảnh hay không cũng chã quan trọng, điều quan trọng là tiêu đề của bài viết liên quan có đủ sức hấp dẫn đến người đọc hay không thôi.

Bài viết liên quan có hình ảnh chuẩn HTML5

Hôm nay bài viết này mình sẽ chia sẻ tiện ích bài viết liên quan có hình ảnh lại đạt cả chuẩn HTML5 nữa cho những bạn đang có nhu cầu. Tiện ích này là của người Indonesia tiếp, như mình đã nói ở trước hì Indonesia rất là chuộng Blogger và có rất nhiều hack mod hay dành cho nó.

Tiện ích bài viết liên quan mà mình chia sẻ ở đây mình đã coding lại một vài thứ, tiện ích này ngoài chuẩn HTML5, thì mình đã chỉnh sửa lại giao diện mặc định mà tác giả chia sẻ (mặc định trong xấu quá). Công thêm vào đó mình tích hợp tính năng cắt và resize ảnh thumbnail. Khiến cho tiện ích này đẹp và tối ưu nhất, hình ảnh không còn mờ như cái cũ nữa.

Demo: http://kslgenesis.blogspot.com/2014/07/sample-post-with-threaded-comments.html

Bài viết liên quan có hình ảnh chuẩn HTML5

Bắt tay vào làm việc thôi đầu tiên thì các bạn tìm và chèn đoàn css này lên trên thẻ ]]></b:skin>
/* RELATED POSTS */
.related-post {
background-color: #fff;
font-size: 16px;
margin-bottom: 40px;
padding: 40px;
}
.related-post a {
color : #333;
}
.related-post h4 {
margin : 0 0 0.5em;
text-transform : uppercase;
color : #555;
}
.related-post-style-3, .related-post-style-3 li {
margin : 0;
padding : 0;
list-style : none;
overflow-wrap : break-word;
overflow : hidden;
}
.related-post-style-3 .related-post-item {
display : block;
float : left;
width : 230px;
margin-right : 10px;
}
.related-post-style-3 .related-post-item:focus {
outline : none;
}
.related-post-style-3 .related-post-item-thumbnail {
display : block;
margin : 0 0 10px;
width : 101%;
height : 125px;
background-color : transparent;
border : none;
padding : 0;
}
.related-post-style-3 .related-post-item-title {
font-weight : bold;
}

@media only screen and (max-width: 800px) {
    .related-post { padding: 0 }
}
Bước tiếp theo các bạn tìm đến chỗ nào trên blog mà các bạn muốn hiển thị tiện ích bài viết liên quan có hình ảnh đặt chuẩn HTML5 này và dán nó vào. Đối với cuối bài viết thì thông thường các bạn tìm đến
<div class='post-footer'>
và chèn xuống dưới
<div class='related-post' id='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 viết liên quan:&lt;/h4&gt;&quot;,
      numPosts: 3,
      summaryLength: 370,
      titleLength: &quot;auto&quot;,
      thumbnailW: 230,
      thumbnailH: 125,
      noImage: &quot;data:image/png;base64,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&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      moreText: &quot;Read More&quot;,
      widgetStyle: 3,
      callBack: function() {}
  };
  </script>
<script type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Related Posts:</h4>",widgetStyle:3,homePage:"http://www.kslzone.net",numPosts:3,summaryLength:370,titleLength:"auto",thumbnailW:72,thumbnailH:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Read more",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.thumbnailW!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailW+"-h"+d.thumbnailH+"-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="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailW+'" height="'+d.thumbnailH+'" title="'+t+'"><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="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailW+'" height="'+d.thumbnailH+'" title="'+t+'"></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="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailW+'" height="'+d.thumbnailH+'" title="'+t+'"><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="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailW+'" height="'+d.thumbnailH+'" title="'+t+'"><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>
Toàn bộ những đoạn chữ mà mình tô màu đỏ là những thứ bạn có thể thay đổi cho phù hợp với website của bạn, ngoài ra nếu không biết thì không nên thay đổi gì khác nhé. Chú thích cho những thứ đó:
  • thumbnailW: Chiều rộng ảnh thumbnail
  • thumbnailH: Chiều cao ảnh thumbnail
  • numPosts: Số lượng bài viết liên quan
  • Bài viết liên quan: Tiêu đề của tiện ích, bạn có thể thay bằng bất cứ gì mà bạn thích
Lưu ý là sau khi thay đổi chiểu cao và chiều rộng ở tùy chọn thì ngoài kích thước thực tế của ảnh tiện ích vẫn chưa thay đổi gì đâu, bạn phải thay đổi thủ công phần css ở đâu trang nữa, nhất là 2 thuộc tính mà mình cho màu đỏ.

Lời kết

Tiện ích bài viết liên quan này có một điều nhỏ không biết phải nói là ưu điểm hay là nhược điểm so với các bài viết liên quan bình thường không đạt chuẩn nữa. Nó random lấy chỉ "một" nhãn ngẫu nhiên và lấy ra bài viết có trong nhãn đó thôi chứ không lấy toàn bộ các bài của các nhãn liên quan như những tiện ích bình thường, nhưng nghĩ ra thì nó hên xui sẽ đưa ra cho khách truy cập chính xác hơn những gì khách truy cập đang tìm kiếm. Ngoài ra một nhược điểm nhỏ nữa là nó có thể lấy cả bài viết hiện hành cho vào bài viết liên quan luôn. Nếu có thắc mắc gì thêm về tiện ích này thì cứ để lại nhận xét cho mình ở dưới nhé!

P/S: Mình nhớ có bạn muốn có tiện ích bài viết liên quan giống của mình nên giao diện ở tiện ích này mình đã làm cho nó khá tượng tự rồi đấy :D

10 bình luận

  1. avatar says

    16:48 Ngày 10 tháng 08 năm 2014

    Cả tuần nay không onl, ai ngờ vô blog bạn là thấy bài này. Cám ơn bạn nhiều lắm :D.

    Àk! Mà cho mình hỏi làm sao để hiện cái dòng: Chưa có bình luận cho " Bài viết liên quan có hình ảnh chuẩn HTML5 " vậy bạn :)

  2. avatar says

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

    Mình nghĩ cái đấy không cần thiết lắm, vì đơn giản chỉ cần thêm một bài viết cùng labels là xong rồi. Với lại như mình đã đề cập ở bài viết là đoạn script này nó sẽ lấy hên xui nó sẽ lấy cả bài viết hiện tại cho vào bài viết liên quan luôn, có nghĩa là nếu chỉ có một mình nó thì bên dưới bài viết liên quan cũng sẽ có nó :D

    Thành ra mình nghĩ thêm cái đó không cần thiết lắm, lại tốn thêm một bài dòng code nữa.

  3. avatar says

    22:37 Ngày 19 tháng 10 năm 2014

    Bạn có thể cho mình xin code để tạo chữ nằm trên hình gồm liên kêt lun ko? kiểu Metro ấy bạn :)

  4. avatar says

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

    Sao bên trái có padding: 40px còn bên phải thì không có nên bị khoảng cách, margin-right : 10px thì tạo được khoảng cách từng bài thì được nhưng không có cách phía dưới nên bị chạm chữ, và mình muốn có màu nên cho chữ bạn giúp mình với

  5. avatar says

    18:36 Ngày 02 tháng 12 năm 2014

    Bạn để lại địa chỉ web demo cho mình chứ có vẻ mình không hiểu lắm bạn nói gì :D

  6. avatar says

    21:35 Ngày 03 tháng 12 năm 2014

    mình muốn bài viết liên quan giống trang xem123.net bạn giúp mình nhé

  7. avatar says

    19:59 Ngày 15 tháng 01 năm 2015

    mình còn 1 lỗi html5 của thằng diqus comment, bạn có thể giúp mình sửa dc k
    site: http://www.toilaquantri.com

  8. avatar says

    20:15 Ngày 15 tháng 01 năm 2015

    Bác dời phần css ở dưới cụ thể là
    .post-comment-link{ visibility: hidden; }
    lên trên thẻ ]]></b:skin> và xóa cái
    <style type='text/css'>

    </style>
    ở ngoài cái css vừa dời lên là được.

  9. avatar says

    21:40 Ngày 22 tháng 05 năm 2015

    Theo nhãn được ko bạn...

  10. avatar says

    21:47 Ngày 22 tháng 05 năm 2015

    Ý mình là nó chỉ hiện những bài viết có nhãn, còn những bài ko nhãn thì ko hiện, và thêm nữa là nó chỉ hiện trên những bài viết có nhãn thôi, được ko bạn.

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.