Membuat Related Post Dengan Thumbnail

Related post atau yang artinya Artikel terkait adalah suatu widget yang memunculkan beberapa artikel yang terkait dengan postingan tersebut. Biasanya related post ini berada di bawah postingan blog. Jenis related post juga macam-macam, salah satunya yaitu related post dengan thumbnail atau dengan gambar, dan related post ini hanya menampilkan gambar dan judul posting. Pada kesempatan kali ini dandidesain akan memberikan tutorial membuat Related Post dengan thumbnail dibawah postingan blog.

Cara Membuat Related Post Dengan Thumbnail

Masuk ke Blogger.com -> Template -> Edit HTML
Pastekan kode dibawah ini diatas kode ]]></b:skin>

.related-post{font:normal normal 12px/1.4 Arial,Sans-Serif;margin:10px;border:1px solid #ddd;margin-bottom:0;}
.related-post h4{background:#3cc091;color:#fff;font-size:14px;margin:0 0 .5em;padding:10px 10px;text-align:left;position:relative;text-transform:uppercase;}
a.related-post-item-title{color:#69707d;font-weight:700!important;font-size:15px;line-height:1.4em;font-family:Roboto,Arial,sans-serif;}
span.related-post-item-summary-text{font-size:15px;display:none;}
.related-post ul{list-style:none;padding:10px;margin:0;}
.related-post li{padding:5px;margin:0;max-width:31%;height:165px;float:left;overflow:hidden;}
.related-post img{border:1px solid #ddd;margin:0;width:100%;height:100px;border-radius:5px;}

Kemudian cari kode
<div class='post-footer-line post-footer-line-1'>

Pastekan kode dibawah ini diatas kode yang tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Related Post Start -->
  <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;Artikel Terkait&lt;/h4&gt;&quot;,
      numPosts: 6,
      summaryLength: false,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 150,
      noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: true,
      moreText: &quot;&quot;,
      widgetStyle: 2,
      callBack: function() {}
  };
  </script>
<script type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Related Posts:</h4>",widgetStyle:1,homePage:"http://www.dandidesain.blogspot.com",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,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="rel-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><a title="'+t+'" href="'+v+'"><img alt="'+t+'" class="rel-thumb" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"/></a><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><br/><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+"></a></span>"+y+"</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>
<!-- Related Post End -->
</b:if>

Simpan Template

Editing Script:

Pada .related-post li dan .related-post img atur kode yang ditandai width (lebar), max-width (lebar maksimal) dan height (tinggi) sesuai dengan penyesuaian blog sobat.
numPosts: 6 adalah jumlah related post yang akan ditampilkan
thumbnailSize: 150 adalah ukuran gambar related post (mengubah ukuran url gambar)

Jika masih ada yang kurang jelas, silahkan berkomentar di kolom komentar yang sudah disediakan.

Tutorial Blogger, Widget