Bài viết liên quan DTE có thumbnail chuẩn HTML5 cho Blogspot

Tiện ích bài viết liên quan được sử dụng trên hầu hết các Blog, cũng có rất nhiều phương pháp để cài tiện ích này lên Blog. Mình xin giới thiệu mẫu bài viết liên quan có thumbnail, được tạo bới DTE - một Blog nổi tiếng của Indonesia.
Cập nhật 20/06/2016: thay đổi một chút trong đoạn code để tương thích với https. ( thay thế https://googledrive.com/host/0BxD7C648NH8cUWFROVlPNWlteGc/related-posts-dte.js bằng https://cdn.rawgit.com/duczone/public-javascript/master/related-posts-dte1.2.js

DEMO

CSS code 

Chèn đoạn CSS bên dưới lên trên thẻ </head> :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.thumbnail-video{display:none;}
.related-post h4,.related-post-style-3 .related-post-item-title{color:#666;font-family:Roboto,sans-serif}
.related-post{width:auto;margin:0 -10px;padding-bottom:12px;}
.related-post h4{margin:0 10px!important;background:none;font-size:20px;font-weight:500;padding:0;color:#666;}
.related-post-style-3,.related-post-style-3 li{margin:0!important;padding:0;list-style:none;word-wrap:break-word;overflow:hidden;width:100%}
.related-post-style-3 .related-post-item{display:block;float:left;width:33.333%;height:190px;padding:10px 10px;margin-bottom:10px!important;border-left:1px solid transparent;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;position:relative}
.related-post-style-3 .related-post-item:first-child{border-left:none}
.related-post-style-3 .related-post-item-thumbnail{display:block;margin:0;width:100%;height:130px;max-width:none;max-height:none;background-color:transparent;border:none;padding:0;transition:all 400ms ease-in-out;}
.related-post-style-3 .related-post-item:hover .related-post-item-thumbnail{opacity:.6;}
.related-post-style-3 .related-post-item-tooltip{padding:8px 0;text-align:center;transition:all 400ms ease-in-out;}
.related-post-style-3 .related-post-item:hover .related-post-item-tooltip{bottom:0}
.related-post-style-3 .related-post-item-title{color:#666;text-align:center;padding: 0px;font-size:16px;font-weight:500;width:auto!important; height:auto;transition:all 400ms ease-in-out;line-height:1.3em}
.related-post-style-3 .related-post-item-title:hover{color:#222}
@media screen and (max-width:480px){.related-post-style-3 .related-post-item{width:50%!important}}
@media screen and (max-width:320px){.related-post-style-3 .related-post-item-thumbnail{height:90px!important;}}
@media screen and (max-width:240px){.related-post-style-3 .related-post-item{width:100%!important;}}
/*]]>*/
</style>
</b:if>

HTML code

Bạn thêm đoạn code sau bên dưới footer hoặc trên thẻ </article>:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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;You Might Also Like:&lt;/h4&gt;&quot;,
      numPosts: 6,
      summaryLength: 370,
      titleLength: &quot;auto&quot;,
      thumbnailSize:260,
      noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      moreText: &quot;Read More&quot;,
      widgetStyle: 3,
      callBack: function() {}
  };
  </script>
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.rawgit.com/duczone/public-javascript/master/related-posts-dte1.2.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
</b:if>