Menambahkan Artikel Terkait Bergambar di Blog

Hasil Akhir dari perintah langkah-langkah pembuatan Artikel Terkait di Bawah.

1.Login ke blog

2.Template blog

3.Edit Html

4.Cari script </b:skin> ( tekan Ctrl+f )

5.Masukan Kode berikut diatas </b:skin>
Kira-kira tampilannya scripnya seperti ini ]]></b:skin> or </b:skin>…</b:skin>

/* Artikel Terkait Dengan Gambar Start

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

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

#artikel-yg-nyambung 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-yg-nyambung ul {width:570px; margin-bottom: 20px; padding:0px; list-style:none; display:inline;}

#artikel-yg-nyambung li{float:left; display:inline; list-style:none; height:150px; margin:0 0px 10px 8px; width:100px;}

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

#artikel-yg-nyambung img{padding:0; margin:0; width:100px; height:60px; border:1px solid #eaeaea;}

#artikel-yg-nyambung img:hover{opacity:0.7;}

**Keterangan Kode Cara Membuat Artikel Terkait Bergambar: COBA Kode-kode ini tidak diedit terlebih dahulu, jika sudah diterapkan editlah seperlunya.
Perhatikan Lebar Sesuaikan dengan lebar/panjang postingan artikel.
Text berwarna Merah adalah lebar dan tinggi per kolom dari artikel terkait.
Text berwarna Hijau adalah lebar dan tinggi gambar (aturlah sesuai keinginan).
Text berwarna Biru Muda adalah Besar, jenis huruf dari judul artikel.
Text berwarna Pink adalah jarak antara gambar 1 dan yang lain, diukur dari kiri.
Text berwarna Oranye adalah Jarak atas dan bawah dari Tulisan Artikel Terkait.

6. Cari Kode berikut dengan cara langkah poin 4, <div class='post-footer'>
7. Masukan Kode Dibawah ini diatas <div class='post-footer'> yang kedua.
Kode tersebut mungkin ada 2, pertama untuk versi mobile, kedua untuk versi web (biasanya yang kedua).

<!-- Artikel Terkait Dengan Gambar Start -->

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

<div id='artikel-yg-nyambung'>

<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/AVvXsEgAGHBIhznEOgn4r2OZRoOavZK0j6TFMmXYXMcEsOpjmeOIYj-2S_7aI_MmjhPw2_QryCi9-OCqSaCmIGDqmOiOpKe1Wq7XSo9vONHRef3h6poeaQxvFXOVT5o_MEnNQ-xXQJR_N3QyXrgI/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-yg-nyambung').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 Dengan Gambar End -->

Kira-kira tampilannya scripnya seperti ini  <div class='post-footer'>

**Keterangan Cara Membuat Artikel Terkait Bergambar:
Text berwarna Biru "4" adalah jumlah maksimal keseluruhan artikel yang ingin ditampilkan dengan kelipatan maxresults=4, sesuaikan dengan kode diatas sebelumnya. jika dirubah jadi "8" maka artikel menjadi 2 baris.
Text berwarna Merah dapat dirubah menjadi "related post" atau "baca juga" dan lain-lain.
angkanya untuk jumlah tampilan judul dan gambar.
Text berwarna Pink "s150" adalah Kualitas dari Gambar, lebih besar lebih jelas gambarnya, buat sekitar 150-300 saja.
Text berwarna Hijau adalah link gambar, pengganti jika tidak ada gambar (Sebaiknya diganti sesuai link punya sendiri, supaya pemakaian tidak terbagi-bagi banyak orang).

8. Simpan Templet...!!!