Loading...
ucapan
Tools Dahsyat untuk Membuat Konten Artikel Unik Tanpa Batas & Niche Apapun yang Anda Inginkan

Search, Edit, Spin, & Posting Ke Semua Blog Anda Cukup dari Satu Dashboard Saja.

Support WordPress, WordPress.com, Blogspot, Tumblr, & Twitter

Tools untuk Membuat Konten Artikel

Subsrcibe Ya.. Dan Tunggu Tutorial Lewat Video


Silahkan Pilih Warna Background Yang Cocok Buat Mata Anda


2015/09/29

Membuat Artikel Terkait Disertai Thumbnail Gambar

Artikel Terkait Disertai Thumbnail Gambar
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:&quot;&quot;;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]='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]+'" 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.

Title : Membuat Artikel Terkait Disertai Thumbnail Gambar
Description : Demo Artikel Terkait Membuat Artikel Terkait Disertai Thumbnail Gambar - sudah lama saya tidak membuka blog , dan kali ini saya akan ...

15 komentar

Langsung saya cobain gan :) mkasih ya..

fiksm.blogspot.com

Boleh juga nih sob :D ditunggu komentarnya :)

kodenya banyak juga gan
apa ngak bikin berat blog?
Makasih sebelumnya

keren nih, tapi itu valid html5 gak gan

artikel terkait saya ga pake gambar sob, lebih nyaman gitu sekarang, tapi kalo ada gambar nya bikin tambah penasaran pasti nya, nanti di coba deh kalo ada waktu.

visit ya http://diansaurs.blogspot.com/2013/12/jiwa-laki-tantang-nyalimu-dengan-honda.html makasih :)

Boleh juga nih sob ditunggu komentarnya

Mantap Mas.. Back Bro..
ridwan-hex blogspot com

Keren mas,, Tips Blognya....

Mampir juga ya...
http://aji-apps.blogspot.com/2013/12/membuat-load-more-otomatis-saat.html

Mantap sob, saya pasang di blog saya dulu :)

Kerenn gan izin coba ya di www.syahdanshare.com

mantap mas, langsung saya coba nih :)
makasi udah share..
blogwalking carabloggerterbaik.blogspot.com

mantap mas, saya mau aplikasikan di blog sederhana saya tentang make money..

update terus ya mas artikelnya, saya akan ikut nyimak terus..

Blogwalking teamprobuxindonesia.blogspot.com

Trimakasih bnget mas info nya sangat membantu,
Skalian numpang Promosi Blogger.
http://onlinekandis.blogspot.com/

Asyiikk saya coba sedot gan.

Berkomentarlah dengan bijak dan sopan, Dilarang menggunakan Link Aktif, Link Mati, Promo, dll.
Dan Berbagilah Jawaban atas apa kesulitan yang sobat-sobat lainnya dapatkan.
Mohon maaf jika ADA komentar atau pertanyaan tidak bisa cepat saya respon,
DIkarenakan Saya tidak selalu online selama 24 Jam.