 |
| Demo Artikel Terkait |
Membuat Artikel Terkait Disertai Thumbnail Gambar - sudah usang aku tidak membuka blog, dan kali ini aku akan membagikan artikel yaitu bagaimana menciptakan artikel terkait disertai thumbnail gambar, artikel terkait ini aku sanggup dari tutornesia yang sesudah itu aku redesign semoga lebih lezat 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 arahan <data:post.body/>, biasanya ada dua, pastekan arahan di bawah ini sempurna di bawah arahan kedua <data:post.body/>, namun jangan hanya fokus pada arahan <data:post.body/> saja, alasannya ialah 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 == "item"'> <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/AVvXsEhIWpJBR6i1rsWEbbUNvxf0adHEtRL9CSh52Rr7BQjE68lynZhv_8waUHqMORQTTqselcOCkJYTV68737y2cZmZRC639gXYAtuRIcXJzEhRidZh6dkAkXk2Cx5EDiOm7kofTlwyv2D9s3zw/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='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=19"' type='text/javascript'/> </b:loop> <script type='text/javascript'>var maxresults=8;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script> </div> <div class='clear'/> </b:if> <!-- Artikel Terkait FHD :] End -->Modifikasi lagi sesuai harapan anda, ganti arahan maxresults=8 dengan jumlah artikel terkait harapan anda, kalau masih ada pertanyakan silahkan berkomentar dibawah ini, terima kasih atas kunjungannya.
