Cara Menambah Related Post Ala Evo Magz

Oleh Sutan S. Monday, June 20, 2016 Post a Comment

Sering kita jumpai di blog mastah-mastah (kita anggap saja begitu) ketika sedang membaca tulisan-tulisan mereka entah itu karena diarahkan Google karena kita sedang mencari sesuatu atau hanya iseng blog walking untuk mencari ilmu, sering kali kita jumpai ada sejumlah list post atau artikel yang ada di footer atau di bawah artikel. List artikel tersebut bernama Related Post atau post terkait. Ya, walau tidak semua blogger memakai Related Post bisa juga Random Post, Recent Post, atau Popular Post akan tetapi kebanyakan memang memakainya related post. related post merupakan sejumlah daftar artikel yang memiliki kaitan dengan artikel yang dibaca dalam kategori label, jadi hanya artikel-artikel yang ada terkaitan label saja yang akan ditampilkan berbeda dengan related post di mesin pencari Google yang memberikan data berdasarkan kemiripan kata kunci karena memang untuk mempermudah kita dalam menemukan informasi dalam milyaran data agar informasi yang didapat dari kata kunci lebih luas dan terperinci, lain hal dengan kita selain kemudahan tersebut tapi juga agar pengunjung betah berlama-lama di blog kita dan lagian data yang kita punya tidak sampai triliunan, ratusan saja sudah syukur bisa menulisnya :v hahaha jadi kategori label saja sudah cukup.

Thumbnail Post Cara Menambahkan Related Post Ala EvoMagz

Memang terkadang kita terhipnotis untuk terus membaca dengan adanya related post, apa lagi jika daftarnya sangat berkaitan erat dengan artikel yang dibaca dan membuat informasi yang kita inginkan semakin meluas akan tetapi membuat semua pertanyaan-pertanyaan atau rasa penasaran terjawab malah bertambah penasaran, sering kita alami ketika kita membaca di blog review atau news top. Karena kita berharap reader betah dan terpuaskan hasrat tentang informasi di blog kita, tak ada salahnya kita ikut-ikutan memasang related post kan? Berikut langkah-langkahnya.

Langkah-langkah memasang related post:

Pastikan sudah sign in dan masuk pada blog agan
Jika sudah masuk, bukalah Template >> Edit HTML dan ikuti langkah berikutnya
Selanjutnya agan tekan CTRL+F dan cari kode ]]></b:skin> kemudian paste kode CSS berikut di atas kode ]]></b:skin> tersebut

/* ==== Related Post Widget Start ==== */
.related-post {margin:15px 0 0;border-top:1px solid #f0f0f0;padding:15px 0 0;}
.related-post h4 {font-size:14px;margin:0 0 .5em;text-transform:uppercase;}
.related-post-style-2 {margin:0 0 0 0 !important;padding:0 0 0 0 !important;list-style:none;}
.related-post-style-2 li {margin:0 0 0 0;padding:0 0 0 0;}
.related-post-style-2 li {padding:5px 0 !important;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:60px;height:60px;max-width:none;max-height:none;background-color:transparent;border:none;padding:0;float:left;margin:2px 8px 0 0;}
.related-post-style-2 .related-post-item-title {font:normal normal 16px Awesome, Helvetica, Arial, sans-serif;}
.related-post-style-2 .related-post-item-summary {display:block;overflow:hidden;}
.related-post-style-2 .related-post-item-more {}

Jika sudah memasang kode CSS diatas berikutnya cari kode <data:post.body/> dan jika sudah ketemu, copy dan paste kode HTML dan JQ berikut di bawah kode tersebut (biasanya terdapat lebih dari dua kode <data:post.body/>, agan pilih saja yang terakhir atau bisa dicoba satu persatu) atau agan bisa paste kode berikut di atas </b:if></article>

<!-- Related Post Widget 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;Related Posts :&lt;/h4&gt;&quot;,
    numPosts: 5,
    summaryLength: 140,
    titleLength: &quot;auto&quot;,
    thumbnailSize: 60,
    noImage: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKUJZCsZeynHb2mjbz73SSfKZ4xXPPHDLv5BvKj6Ok2XZJBsBxQmuGobTtOXwzS1IZeaoAHvNP5OnpM-5EiwZRcGM7_jlC70Bq7OEnVXnATKLaQGqPktE-9WHCEWdlC_2ost-rEbewY1vm/w60-c-h60/no-image.png&quot;,
    containerId: &quot;related-post&quot;,
    newTabLink: false,
    moreText: &quot;Read More...&quot;,
    widgetStyle: 2,
    callBack: function() {}
    };
 </script>
<!-- Related Post Widget End -->
 </div>

Setelah itu agan copy dan paste kode JQuery berikut di atas kode </body> atau bisa mengikuti di bawah kode HTML yang tadi agan paste sebelelumnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[       
/*! Related Post Widget for Blogger by kupuk blog => http://gplus.to/tovic */
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"//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,moreText:"Baca Selengkapnya",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.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><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><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="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></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="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><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="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><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>
</b:if>

And the last, kita simpan perubahan template atau preview terlebih dahulu untuk melihat perubahannya. Dan blog agan pun sudah terpasang related post

Keterangan

widgetTitle: "<h4>Related Posts	Judul widget
numPosts: 5	Jumlah post yang akan ditampilkan
summaryLength: 140	Jumlah kata yang akan ditampilkan
thumbnailSize: 60	Ukuran gambar yang akan ditampilkan
moreText: "Read More..."	Baca selengkapnya

Silahkan ubah sesuai selera

Sekian tulisan saya mengenai Cara Menambah Post Terkait Ala Evo Magz. Semoga bermanfaat dan membantu pencarian agan-agan semua. Apabila ada masalah atau kesulitan silahkan ditanyakan di komentar, insya Allah saya jawab sebisanya :D. Kritik dan saran membangun amat sangat saya apresiasi untuk saya kembangkan dan untuk menambah ilmu si newbe ini.

Baca Juga

Resource and reference

Template Evo Magz v4 by Mas Sugeng