Cara Membuat Related Post Material Design Responsive
Cara membuat Related Post. Related Post merupakan salah satu komponen dalam suatu website yang tidak bisa diremehkan. Terkadang navigasi blog yang terlalu banyak dan begitu membingungkan bisa teratasi dengan memasang widget related post ini.Related Post juga bisa mengkotak kesukaan pengunjung terhadap suatu tema ; misalnya tentang tutorial yang sekarang anda baca ini. Jadi sasaran pengunjung menjadi terarah dan tingkat bounce rate menjadi berkurang.
Dengan tampilan related post yang bermacam saya kira bisa menarik minat pengunjung dan membuat mereka betah berada di blog kita. Namun berbagai macam gaya jika dirasa berlebihan akan membuat pengunjung jadi merasa "jijik". Disamping itu script yang terlalu berat menjadikan widget ini menjadi lama ter-load.
Namun yang akan saya sharekan kali ini adalah widget related post yang ringan dengan tampilan yang bersih ala Material Design. Dan tentu saja responsive, Let's check it out!!
Baca Juga : Halaman Label SEO Friendly
Membuat Related Post Material Design
1. Langkah pertama silakan login di akun blogger anda2. Masuk ke "Tema" kemudian klik "Edit HTML"
Silakan masukkan kode CSS berikut di atas kode </head>
<b:if cond='data:view.isPost'><style>
//Related
#related-posts ul{margin:0!important}
.related-post{width:47%;display:inline-block;vertical-align:top;margin:1%;border:1px solid #eee;font-size:.8em;line-height:1.4em}
.related-post a{display:block}
.related-post a img{float:left;margin-right:1em;height:77px}
.related-post-title{padding:10px}
</style></b:if>
3. Kemudian cari kode <div class='post-footer-line post-footer-line-1'> atau sejenisnya, yang jelas, intinya kode tersebut berada dibawah postingan, kemudian copy dan pastekan kode di bawah ini.
<b:if cond='data:view.isPost'>
<div id='related-posts'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3>Related Posts</h3>';rn='<h3> No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdkpRcGmy_fK1IJyOm74jTj7F59bUcWnBL5slnRAkh5JaHV53PsBQXp2YTqqQf3ptx9mQzi4hH9r4TEbhe2aXwyr4o8oKhm0cZ9Df-8NjyzJWOprbL03uJiuCsf8m8i7wS-_PTAnoTuK-y/'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/><div class="related-post-title">'+titles[c]+'</div></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]></script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=4;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</div>
<div class='clear'/>
</b:if>4. Ganti kode var maxresults=4; dan sesuaikan dengan keinginan anda berapa postingan yang akan ditampilkan nantinya.
Contoh : var maxresults=6; untuk menampilkan 6 postingan di widget related post
5. Jika dirasa sudah sesuai silakan Simpan template
Nb : Untuk kode CSS bisa dirubah sesuai dengan keinginan, namun pesan saya modifnya jangan terlalu alay alias berlebihan, ya.. ehehehhehehe... 😁
Ok, demikian sedikit tutorial tentang bagaimana membuat related post material design responsive semoga bermanfaat. Terimakasih telah datang dan berkunjung di blog Agung Jaka Nugraha. Wassalam.
