Menghasilkan Related Post dengan Gambar Thumbnail pada Blog secara Mandiri

 Cara Membuat Related Post (Artikel/Posting Terkait) plus Gambar Thumbnail di Bawah Posting Blog.

KAYANYA semua blog saat ini sudah punya widget related posts di bawah tiap postingan. Namun, hati-hati, suka ada sisipan link dalam kodenya jika kita tidak berhati hati.

CB sedah sering memposting soal artikel terkait ini. Anda bisa buka Related Post Widget untuk melihatnya. Posting ini merupakan UPDATE dari semua tips posting terkait itu.

Agar related post kita aman dari sisipan link, "intip" saja jika kode posting terkait itu menyertakan link javascript, dengan cara copas linj js-nya ke browser.

Baca juga: Related Post yang Aman dari Sisipan Link.

Untuk keamanan dan kenyamanan, kita bisa membuat related post sendiri, pilihan sendiri, di laman yang sudah disediakan dengan sangat baik oleh DTE.

Ada enam jenis related post yang bisa kita pilih di sana, seperti dalam gambar berikut ini. Sangat lengkap. Jadi, Anda gak usah pergi ke tempat lain untuk mendapatkan kode related post. Cukup di sini:

CB sendiri memilih  Related Post plus Gambar Thumbnail. Kayaknya lagi "trending" model related post begini. Lebih berat ketimbang yang simple (judul posting doang), namun lebih menarik dan seo friendly karena menggunakan gambar.

Kita bisa lakukan konfigurasi sendiri di sana, melihat previewnya, dan mengambil/memasang kodenya dengan aman di blog kita.

Cara Membuat Related Post plus Gambar Thumbnail

1. Template > Edit HTML

2. Copas atau pasang kode CSS dan HTML/Javascript di bawah ini:

KODE CSS

Dipasang di atas kode ]]></b:skin> atau </style>

/* ==== Related Post Widget Start ==== */

.related-post {
  margin:2em auto 0;
  font:normal normal 11px/1.4 Arial,Sans-Serif;
}
.related-post h4 {
  font-size:150%;
  margin:0 0 .5em;
}

/* Style 2 */
.related-post-style-2,
.related-post-style-2 li {
  margin:0;
  padding:0;
  list-style:none;
}
.related-post-style-2 li {
  padding:10px;
  border-top:1px solid #eee;
  overflow:hidden;
}
.related-post-style-2 li:first-child {border-top:none}
.related-post-style-2 .related-post-item-thumbnail {
  width:80px;
  height:80px;
  max-width:none;
  max-height:none;
  background-color:transparent;
  border:none;
  padding:0;
  float:left;
  margin:2px 10px 0 0;
}
.related-post-style-2 .related-post-item-title {
  font-weight:bold;
  font-size:110%;
}
.related-post-style-2 .related-post-item-summary {
  display:block;
  overflow:hidden;
}
.related-post-style-2 .related-post-item-more {}

/* ==== Related Post Widget End ==== */

KODE XML & JAVASCRIPT
Disimpan di atas kode <div class='post-footer'> (atau di mana saja di dalam kode <b:includable id='post' var='post'/> dan <b:includable id='mobile-post' var='post'/>. Be careful!)

<script type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Related Posts:</h4>",widgetStyle:1,homePage:"http://www.dte.web.id",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><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>

Jumlah posting (numPost), panjang ringkasan (summaryLength), dan ukuran gambar (thumbnailSize) bisa diatur lagi di template.

3. Save template!

Demikian cara Membuat Sendiri

Sign up here with your email address to receive updates from this blog in your inbox.