Membuat Artikel Terkait Disertai Thumbnail Gambar

Demo Artikel Terkait

Membuat Artikel Terkait Disertai Thumbnail Gambar - sudah usang aku tidak membuka blog, dan kali ini aku akan membagikan artikel ialah bagaimana menciptakan artikel terkait disertai thumbnail gambar, artikel terkait ini aku sanggup dari tutornesia yang sesudah itu aku redesign supaya lebih yummy 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 aku memakai font Open Sans, masukkan script Open Sans kalau sebelumnya belum ada di template anda, atau sanggup modifikasi lagi dengan font sesuai harapan anda.

Langkah selanjutnya cari instruksi <data:post.body/>, biasanya ada dua, pastekan instruksi di bawah ini sempurna di bawah instruksi kedua <data:post.body/>, namun jangan hanya fokus pada instruksi <data:post.body/> saja, alasannya tiap template berbeda, kalau 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/AVvXsEhF0w_udlxCqB5LHLQjqD6U0ycKQrQdHuDyodgiIVVO-p2SsdQ-X-_q07NiJq6rZw1l9kcHYIofWW615ZOKFsCM8WdZhqRNc6OjFWmVnBFcFvFUhyphenhyphenqul-N17sD1G8wVIsJYlg9VEy2yPDsG/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="Artikel Terkait Disertai Thumbnail Gambar Membuat Artikel Terkait Disertai Thumbnail Gambar" src="'+ thumb[c].replace("/s72-c/","/s200/")+'" title="Membuat Artikel Terkait Disertai Thumbnail Gambar"/></a></div><a href="'+urls[c]+'" title="Membuat Artikel Terkait Disertai Thumbnail Gambar" 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 harapan anda, ganti instruksi maxresults=8 dengan jumlah artikel terkait harapan anda, kalau masih ada pertanyakan silahkan berkomentar dibawah ini, terima kasih atas kunjungannya.

Tweet

Subscribe to receive free email updates: