Membuat Artikel Terkait Disertai Thumbnail Gambar

wahab

Artikel Terkait

2015/09/29

14 Komentar

Demo Artikel Terkait

Membuat Artikel Terkait Disertai Thumbnail Gambar - sudah lama saya tidak membuka blog, dan kali ini saya akan membagikan artikel yaitu bagaimana membuat artikel terkait disertai thumbnail gambar, artikel terkait ini saya dapat dari tutornesia yang setelah itu saya redesign agar lebih enak dilihat, tidak usah berlama-lama, berikut tutorialnya :



Sebelum memulai, alangkah baiknya anda melihat demo nya terlebih dahulu :

Penerapan Artikel Terkait Disertai Thumbnail Gambar

1. Masuk ke Template > Edit HTML > Letakkan CSS berikut diatas ]]></b:skin> atau </style>

#inikotak {width:100%;height:40px;background:#2282ba;color:#fff;text-align:center;margin:0 auto;margin-top:20px;text-transform:uppercase;font:20px Oswald;border-radius:3px;line-height:40px;vertical-align: middle;position:relative;}
#inikotak::after {content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #2282ba;border-right:20px solid transparent;width:0;height:0;line-height:0}
#artikel-terkait-fhd {margin-left:-30px}
#artikel-terkait-fhd a:hover,a:active{color:#2c3e50;}
#artikel-terkait-fhd ul {width:100%;margin-bottom: 20px; padding:0px;list-style:none; }
#artikel-terkait-fhd ul li{float:left;text-align:center;height:144px;margin:0 20px 10px 0;width:137px;font-size:12px;}
#artikel-terkait-fhd img{padding:3px;width:130px;height:80px;border-radius:4px;box-shadow: 0px 0px 3px 0px rgba(69,62,69,1);}
#artikel-terkait-fhd ul li:nth-child(4n+4){margin-right:0;}

Sesuaikan CSS diatas dengan Template blog anda, css diatas tadi saya menggunakan font Open Sans, masukkan script Open Sans jika sebelumnya belum ada di template anda, atau bisa modifikasi lagi dengan font sesuai keinginan anda.

Langkah selanjutnya cari kode <data:post.body/>, biasanya ada dua, pastekan kode di bawah ini tepat di bawah kode kedua <data:post.body/>, namun jangan hanya fokus pada kode <data:post.body/> saja, karena tiap template berbeda, jika sebelumnya telah ada artikel terkait di template anda, sebaiknya hapus saja script artikel terkait sebelumnya, dan ganti dengan script ini :

<!-- Artikel Terkait FHD :] Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='inikotak'>Baca Juga Artikel Terkait Lainnya</div>
<div id='artikel-terkait-fhd'>
<script type='text/javascript'>//<![CDATA[
var ry='';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/AVvXsEgKlnYC5aTq9XbsrMlbwW9nlGIfTg-hdA-4aGPehpCPg_WOjyB5-heUAwRVl_YhTyYJBnLK9xQPS5hZR1I2gv6J4D448XvucHLxdZv71xNIqOWSNNrFZY4C2WFar6z-GbWojvnuOL2sgxD_/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/","/s200/")+'" title="'+titles[c]+'"/></a></div><a href="'+urls[c]+'" title="'+titles[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-fhd').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;amp;callback=related_results_labels&amp;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>
<div class='clear'/>
</b:if>
<!-- Artikel Terkait FHD :] End -->

Modifikasi lagi sesuai keinginan anda, ganti kode maxresults=8 dengan jumlah artikel terkait keinginan anda, jika masih ada pertanyakan silahkan berkomentar dibawah ini, terima kasih atas kunjungannya.

Pengelola Blog : ABDUL WAHAB

Judul : Membuat Artikel Terkait Disertai Thumbnail Gambar
Ditulis oleh :Blog Shiro pada hari 2015/09/29
Rating Blog : 5 dari 5
Terima kasih sudah membaca artikel tentang Membuat Artikel Terkait Disertai Thumbnail Gambar
Kalian boleh menyebar luaskannya atau mengcopy paste-nya jika artikel ini sangat bermanfaat bagi Blog dan teman-teman kalian.
Namun jangan lupa harap memberikan link aktif dofollow ke URL
https://fajriandaviar.blogspot.com/2014/01/membuat-artikel-terkait-disertai-gambar.html
Dan Terima kasih sekali lagi atas kunjungannya.

Kritik dan saran atau apapun bisa kalian sampaikan melalui kotak komentar.
Dan mohon maaf jika komentar atau pertanyaan tidak bisa cepat saya respon,
karena Saya tidak selalu online dikarenakan sibuk.