Cara Download Membuat Artikel Terkait Disertai Thumbnail Gambar Update Terbaru

Sedikit Info Seputar Membuat Artikel Terkait Disertai Thumbnail Gambar Terbaru 2017 - Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Membuat Artikel Terkait Disertai Thumbnail Gambar, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang Artikel Artikel Terkait, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Membuat Artikel Terkait Disertai Thumbnail Gambar Terbaru
link: Membuat Artikel Terkait Disertai Thumbnail Gambar

Berbagi Membuat Artikel Terkait Disertai Thumbnail Gambar Terbaru dan Terlengkap 2017

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/AVvXsEg9x_ZwCOx0niFftMWmLMGRuk2fG9GcenN3hogZtjJXh3Sqo9hGZC1YKKo_6jJbvYEJOZ_MIszCGzWx2oSA2IplB_sl00937Qkv9FRJM9uLWeZFaSi8lxzHgBH13Gh8CxNBAOovdFrXRMrQ/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.

Itulah sedikit Artikel Membuat Artikel Terkait Disertai Thumbnail Gambar terbaru dari kami

Semoga artikel Membuat Artikel Terkait Disertai Thumbnail Gambar yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Free Template BLogspot.Com. jangan lupa baca juga artikel-artikel lain dari kami.

Terima kasih Anda baru saja membaca Membuat Artikel Terkait Disertai Thumbnail Gambar