Cara Membuat Related Post Bergambar dan Responsive di Blog
Membuat Related Post Bergambar dan Responsive di Blog , merupakan bukan hal yang gres bagi para blogger di indonesia , diluar sana pasti sudah banyak tutorial yang membahas perihal cara membuat related post ini , disekian banyak tutorial diluaran sana pasti berbeda - beda akhirnya ada related post teks dengan gambar dan ada related post yang menampilkan teks saja dan pada kesempatan kali ini aku akan memperlihatkan script related post bergambar tentunya sangat keren dan responsive.
Related Post Bergambar akan lebih mudah meningkatan pageview di blog , alasannya yaitu pengunjung akan tertarik dikala melihat gambar. Nah jikalau kalian tertarik untuk mencobanya silahkan ikuti langkah - langkah dibawah ini.
Cara Membuat Related Post Bergambar dan Responsive di Blog
1. Silahkah Log in ke halaman Blogger, Jika memiliki lebih dari satu blog pilih salah satu blog yang ingin di pasang related post bergambar ini.
2. Pilih Menu Template -> Pilih Edit HTML
3. Tekan di bab instruksi Template -> Lalu tekan CTRL + F -> Cari Kode </style>
4. Lalu letakkan instruksi dibawah ini diatas instruksi </style>
/* Artikel Terkait Dengan Gambar Start
-------------------------------------------- */
#artikel-yg-nyambung {font-size:14px; text-align: center; font-weight:600;}
#artikel-yg-nyambung h2{border-bottom: 1px dotted #CCC; font-size: 20px; color: #000; padding-bottom: 0px; font-weight: normal; height: 25px; margin-bottom: 10px; margin-top: 10px; text-align: left;}
#artikel-yg-nyambung ul {width:300px; margin-bottom: 20px; padding:0px; list-style:none; display:inline;}
#artikel-yg-nyambung li{float:left; display:inline; list-style:none; height:170px; margin:0 0px 10px 8px; width:205px;}
#artikel-yg-nyambung ul li a{margin:0; line-height:18px;}
#artikel-yg-nyambung img{padding:0; margin:0; width:208px; height:110px; border-radius: 2px;}
#artikel-yg-nyambung img:hover{opacity:0.7;}
5. Selanjutnya letakkan instruksi dibawah ini di bawah instruksi tombol share
***Letakkan di bawah tombol share
-----------------------------------
<!-- Artikel Terkait Dengan Gambar Start -->
<b:if cond='data:blog.pageType == "item"'>
<div id='artikel-yg-nyambung'>
<script type='text/javascript'>//<![CDATA[
var ry='<h2 class="artikelterkait"><span>Baca Juga Bisnis Ini :</span></h2>';rn='<h2 class="artikelterkait"><span>Jelajah Artikel Lainnya</span></h2>';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/AVvXsEgWcNoOcD6fiMBfpw26m5SfXUklDzXVL0dKgFMQIiHa8mT3gUJHaVHen22gQd9OiY4tNRp4ped_WBey0oOwsi815i4EOHpsh1_DUQgTo1fsYzaF8hGwnxfXgBZR8ksz2Jxhb0ea69ZdVGWC/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]+'"><img alt="'+titles[c]+'" src="'+ thumb[c].replace("/s72-c/","/s200/")+'"/></a></div><a href="'+urls[c]+'">'+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='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=19"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</div>
<div class='clear'/>
</b:if>
<!-- Artikel Terkait Dengan Gambar End -->
6. Selesai -> Silahkan eksklusif di save
Itulah Cara Membuat Related Post Bergambar dan Responsive di Blog jikalau kalian tertarik untuk mecobanya silahkan dicoba. Demikian yang mampu aku sampaikan supaya bermanfaat :)