Cara Membuat Artikel Terkait Dengan Gambar

Untuk meningkatkn page view pada blog kita tentu dengan adanya Artikel Terkait Dengan Gambar membuat pengunjung akan mudah melihat postingan apa saja yang baru kita tulis atau postingan apa saja yang terkait dengan yang dibaca. kalau dulu saya sudah bagikan buat sobat Blogger Cara Membuat Related Post Gambar Thumbnail Di Blogspot namun kali ini aku bahas lebih lebar thumbnail atau gambar yang lebih lebar dan tentunya akan lebih menarik minat pengunjung untuk malihatnya. Cara Membuat Artikel Terkait Dengan Gambar sangat mudah sekali kita terapkan ke blog kita seperti postingan terkait dibawah postingan dibawah artikel ini.

Cara Membuat Artikel Terkait Dengan Gambar di bawah postingan

nah lebih menarik lagi bkn dari pada turorial ku yang dulu. langsung saja kita pada tutorialnya namun sebelumnya lebih baik backup dulu template kalian untuk caranya silahkan buka halaman Cara Upload Dan Backup Tamplate Blogspot. kalau sudah mari kita mulai tutorial ini.

1. silahkan sobat buka Edit template blogspot.

2. silahkan cari code ]]></b:skin>

3. kalau sudah menemukan kode tersebut silahkan sobat taruh kode CSS dibawah ini tepat diatasnya.

/* Artikel Terkait Dengan Gambar Start-Giga Watt
-------------------------------------------- */
#artikel-yg-nyambung {font-weight:normal; font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; font-size:11px;}
#artikel-yg-nyambung h3{border-bottom: 1px dotted #DBDBDB; font-family: Arial; font-size: 15px; 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: 15px; padding:0px; list-style:none; display:inline;}
#artikel-yg-nyambung li{float:left; display:inline; list-style:none; height:150px; margin:0 0px 13px 10px; width:136px;}
#artikel-yg-nyambung ul li a{margin:0; line-height:18px;}
#artikel-yg-nyambung img{padding:0; margin:0; width:136px; height:90px; border:1px solid #eaeaea;}
#artikel-yg-nyambung img:hover{opacity:0.7;}

lihat warna biru dan merah yang sudah aku tandai, untu yang Biru silahkan sesuaikan lebar pada areal postingan di blog kalian. untuk kode yang berwarna merah yang ke 1 tinggi dari gambar yang akan ditampilkn dan yang berwarna merah ke 2 adalah kode lebar dari gambar.

4. kalau sudah kalian tempatkan kode CSS dia atas sekarang sobat cari kode

Buka Kodenya >>

<div class='post-footer-line post-footer-line-2'>

kalau sobat sudah mendapatkan kode diatas silahkan langsung saja taruh kode dibawah ini tepat dibawahnya.

<!-- 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>Postingan 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/AVvXsEixjaglkCTr95xIImusT6UU9DNyfXh3B4xrj7XVp-mXbj6CXuKmk7EfHgAFDhE41wFRPdUd-ADdH_2pvSOzsKwb3n9VrqkNjddFz50geJpc1b6mhRO6ot7cLCZui6I7Kpmy_FTs9ZkDYg-J/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=8;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
Widget by <a href='http://giga-watt.blogspot.com/2014/01/cara-membuat-artikel-terkait-dengan-gambar.html'>Giga Watt</a>
<div class='clear'/>
</b:if>
<!-- Artikel Terkait Dengan Gambar End -->

perhatikan pemasangannya dan juga warna yang sudah saya tandai, warna biru silahkan tulis sendiri kata yang ingin sobat ganti dan yang berwarna merah berapa related post yang akan kalian tampilkan.

5. sebelum disimpan silahkan cek dahulu cara menaruh kodenya sudah pas atau belum kalau belum silahkan ulangi lagi dan bagi yang sudah benar silahkan kalian simpan dan lihat hasinya.

begitulah tutorial Cara Membuat Artikel Terkait Dengan Gambar di blogspot kali ini semoga dengan adanya related post atau postingan yang terkait akan meningkatkan traffik blog kita terutama dalam hal page views. aku kira tutorial kali sudah paham kalau pun sobat Giga Watt masih bingung sobat bisa tinggalkan komentar dibawah postingan ini. semoga sukses selalu happy blogging.