Cara Membuat Related Post Bergambar Thumbnails | Blogspot

Cara Membuat Related Post Bergambar Thumbnails | Blogspot | Related Post merupakan widget yang penting bagi blog dengan artikel yang banyak. Dan ini adalah suatu trik untuk menambah pengunjung dengan memancing untuk melihat artikel yang lain. Jadi, apakah anda tertarik? Jika tertarik anda bisa mengikuti tutorial dibawah yang akan saya bahas. Dibawah ini adalah gambaran dari widget yang akan dipasang kali ini.

Cara Membuat Related Post Bergambar Thumbnails | Blogspot

Cara Membuat Related Post Bergambar Thumbnails | Blogspot

Cara Membuat Related Post Bergambar Thumbnails | Blogspot | Related Post tentunya mengandung artikel yang terkait dengan postingan yang sedang dibaca. Sangat banyak memang keuntungan dari widget ini. Entah dari pengunjung, juga pemilik blog. Tidak usah banyak basa-basi lagi langsung saja ke topik dari artikel ini.

Cara Membuat Related Post Bergambar Thumbnails | Blogspot

1. Masuk ke Blogger >> Template >> Edit HTML

2. Lalu Cari kode HTML   ]]></b:skin> dan letakkan kode dibawah ini tepat diatasnya.

NB. Cari lebih cepat dengan (Ctrl+F)

.related-post .post-thumbnail {z-index: 1;position: relative;width: 98px;height: 98px;margin: 0;display: block; border-right: 1px solid #fff;border-bottom: 1px solid #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 2px 2px 5px #444; -moz-box-shadow: inset 2px 2px 5px #444; box-shadow: inset 2px 2px 5px #555; } .related-post { float: left; position: relative; width: 98px; height: 98px; margin: 0 10px 10px 0; background: #F6F6F6; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .related-post .related-post-title { display: none; float: left; background: #000; color: #fff; text-shadow: none; font-weight: bold; padding: 10px; position: absolute; top: -20px; left: 40px; z-index: 2; width: 200px; -webkit box-shadow: 0 0 2px #444; -moz-box-shadow: 0 0 2px #444; box-shadow: 0 0 2px #444; } .related-post:hover .related-post-title {display: block;}

NB.  kode [ width: 98px ] pada script diatas bisa anda sesuaikan dengan ukuran template anda.

3. Selanjutnya, pilih kode yang hampir sama dengan yang dibawah ini.

<div id='related-posts'> <b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'>//<![CDATA[ var ry='<h3> Related Posts</h3> ';rn='<h3>    No related post available</h3> ';rcomment='comments';rdisable='disable comments';commentYN='no'; 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/AVvXsEiiY467RRIcKIUvHkaHPSpWYIAyNSQGzydrH2raZ_zbyuFbWqHFemePJ1YXlbtYpMO_D5sNNcjDtCUdcc1DB4S9DEYq_Lcv6jsyyVYecuJZqW-SL4vRSsXrnAVVrrffeO1hbs41lfPLKilq/'};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+='<div class="clear"/> </div> <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+='<div class="related-post"> <div class="related-post-title"> '+titles[c]+'</div> <a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div> </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('related-posts').innerHTML=dw}; //]]></script> <b:loop values='data:post.labels' var='label'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/> </b:loop> <script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script> </b:if> </div> <div class='clear'/>

NB. kode [var maxresults=6] pada script diatas bisa diganti sesuai keinginan anda.

4. Simpan Template anda. Sekarang template anda sudah terdapat related post untuk memudahkan pengunjung menjelajahi blog anda.

Mungkin itulah sedikit tutorial Cara Membuat Related Post Bergambar Thumbnails | Blogspot.
Semoga Bermanfaat.. ^_^

Creatif By : Vento Deco | Seo Mas Vento

Terimah Kasih telah membaca artikel --> Cara Membuat Related Post Bergambar Thumbnails | Blogspot. Yang ditulis oleh Vento Deco .Pada hari --> Tuesday, 17 March 2015. Jika anda ingin sebarluaskan artikel ini, mohon sertakan sumber link asli. Kritik dan saran dapat anda sampaikan melalui kotak komentar. Trimakasih

<a href="https://seo-mas-vento.blogspot.com/2015/03/cara-membuat-related-post-responsive-dan-ringan-thumbnails-blogspot.html" target="_blank">Cara Membuat Related Post Bergambar Thumbnails | Blogspot</a>