Sunday, 21 May 2017

Cara Membuat Related Post Bergambar dan Responsive di Blog

A ssalamu'alaikum Wr. Wb. - Selamat datang di Seikoku Ananta tempat beragam informasi seputar Android , Lifestyle , Tutorial Editing Foto , Aplikasi , Tips dan Trik serta beragam informasi menarik dan bermanfaat lainnya. Semoga apa yang telah kami sampaikan disini bermanfaat bagi kita semua Amin

Baca Juga

Cara Membuat Related Post Bergambar dan Responsive di Blog

Membuat Related Post Bergambar dan Responsive di Blog , merupakan bukan hal yang baru bagi para blogger di indonesia , diluar sana pasti sudah banyak tutorial yang membahas tentang cara membuat related post ini , disekian banyak tutorial diluaran sana pasti berbeda - beda hasilnya ada related post teks dengan gambar dan ada related post yang menampilkan teks saja dan pada kesempatan kali ini saya akan memberikan script related post bergambar tentunya sangat keren dan responsive.

Related Post Bergambar akan lebih mudah meningkatan pageview di blog , karena pengunjung akan tertarik ketika melihat gambar. Nah jika 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 bagian kode Template -> Lalu tekan CTRL + F -> Cari Kode  </style>
4. Lalu letakkan kode dibawah ini diatas kode </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 kode dibawah ini di bawah kode tombol share

***Letakkan di bawah tombol share
-----------------------------------
<!-- 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='<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]='http://1.bp.blogspot.com/-pmznJmXBJ7M/UfWrTRltmLI/AAAAAAAAFg8/8VCw4AcPMyc/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='&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=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
<div class='clear'/>
</b:if>
<!-- Artikel Terkait Dengan Gambar End -->
6. Selesai -> Silahkan langsung di save


Itulah Cara Membuat Related Post Bergambar dan Responsive di Blog jika kalian tertarik untuk mecobanya silahkan dicoba. Demikian yang bisa saya sampaikan semoga bermanfaat :)


0 komentar

Post a Comment