Cara Membuat Artikel Terkait Dengan Gambar Berjalan

Artikel dengan gambar berjalan ini adalah salah satu internal link yang dibuat tepat dibawah postingan blog. Konsep kerjanya yaitu dengan mencocokkan label yang dipakai oleh postingan blog tersebut. Jadi, jika diantara beberapa postingan blog yang anda punya tidak memiliki kesamaan di labelnya, maka artikel terkait ini tidak akan muncul.

Sesuai dengan judulnya, artikel terkait yang saya buat ini bisa berjalan ke kanan dan kiri jika postingan yang terkait itu melebihi dari lebar kolom yang dibuat di artikel terkait. Oke, mungkin Anda sudah paham. Jadi, langsung saja masuk ke dalam proses pembuatannya.

1. Masuklah ke dalam menu edit HTML, kemudian tempelkan kode CSS berikut ini diatas kode "</b:skin>"

/* Artikel Terkait Bossconsultants

-------------------------------------------- */

#artikel-terkait-bossconsultants {font-weight:bold; font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; font-size:12px;}

#artikel-terkait-bossconsultants h3{border-bottom: 3px dotted #DBDBDB; font-family: Arial; font-size: 20px; color: #232D74; padding-bottom: 0px; text-transform: uppercase; font-weight: normal; text-align: center; height: 25px; margin-bottom: 10px; margin-top: 10px;}

#artikel-terkait-bossconsultants ul {width:570px; margin-bottom: 20px; padding:0px; list-style:none; display:inline;}

#artikel-terkait-bossconsultants li{float:left; display:inline; list-style:none; height:150px; margin:0 0px 10px 8px; width:133px;}

#artikel-terkait-bossconsultants ul li a{margin:0; line-height:18px;}

#artikel-terkait-bossconsultants img{padding:0; margin:0; width:133px; height:90px; border:1px solid #eaeaea;}

#artikel-terkait-bossconsultants img:hover{opacity:0.7;}

Jika Anda ingin memahami kode CSS diatas, maka anda bisa mengubah kode CSS yang berwarna merah tersebut sesuai dengan keinginan anda.

2. Selanjutnya, cari kode berikut ini "<div class='post-footer'>". Jika Anda kesulitan mencarinya, maka gunakan fitur CTRL+F untuk memudahkan mencarinya.

3. Apabila kode di atas sudah ketemu, tempelkan kode berikut ini tepat di bawah kode yang Anda cari tadi.

<!-- Artikel Terkait Bossconsultants -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='artikel-terkait-bossconsultants'>

<script type='text/javascript'>//<![CDATA[

var ry='<h3 class="artikelterkait"><span>Artikel Terkait</span></h3>';rn='<h3 class="artikelterkait"><span>Jelajah Artikel Lainnya</span></h3>';rcomment='comments';rdisable='disable comments';commentYN='yes';

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/AVvXsEhS2HKg1O0ljMRxb9uILbzc7uE1sOAjagqmamJnYH_o6esmx8pqXDu8Dt3tnAnwr89n42Mh_sCvCjqSs9VgKfsTJXV4zX1WW9v6POqju28qgFT0hXq8sxMNiPfEltMiwC8Y5i6ESDZRXCUs/s1600/no+image.jpg'};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+='<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+='<li><div class="pthumb"><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+ thumb[c].replace("/s72-c/","/s150/")+'"/></a></div><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a><div class="clear"></div></li></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('artikel-terkait-bossconsultants').innerHTML=dw};

//]]></script>

<b:loop values='data:post.labels' var='label'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=19&quot;' type='text/javascript'/>

</b:loop>

<script type='text/javascript'>var maxresults=4;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>

</div>

<div class='clear'/>

</b:if>

<!-- Artikel Terkait Bossconsultants -->

Catatan:

• Jika anda ingin merubah ingin merubah judul Artikel Terkait, maka rubahlah kode yang berwarna seperti tulisan ini di atas.
• maxresults=4, sesuaikan dengan kode diatas sebelumnya. jika dirubah jadi "8" maka artikel menjadi 2 baris.
• Sedangkan kode yang berwarna biru tersebut berguna jika postingan yang anda punya tersebut tidak ada gambarnya. Artinya, ini adalah gambar default jika postingan tidak memiliki gambar. Jika Anda ingin merubahnya, maka rubahlah sesuai keinginan Anda.

Untuk melihat contohnya, Anda bisa melihat di bawah postingan Saya ini. Karena Saya pun menggunakan kode seperti di atas juga.