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.


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://kslzone.blogspot.com",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