Cara Membuat Related Post Bergambar Thumbnails | Blogspot - Hallo sahabat TIPS BELAJAR BISNIS ONLINE DAN INTERNET MARKETING, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Related Post Bergambar Thumbnails | Blogspot, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogging, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat Related Post Bergambar Thumbnails | Blogspot
link : Cara Membuat Related Post Bergambar Thumbnails | Blogspot

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/AVvXsEidq6rPoClVpuuvBfSXAQVZgJYtrE63dublnhPicPWHCHOvFglJn9kmbX2un9SXWVy1woyERkhxUFw0uYTeqNnO_aO4LCsqPoY_bpRgi8tnwKZ7W13U9ISm1mlsRIM_EGpL7D3hG6pEhYoW/'};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>

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.

Demikianlah Artikel Cara Membuat Related Post Bergambar Thumbnails | Blogspot

Sekianlah artikel Cara Membuat Related Post Bergambar Thumbnails | Blogspot kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Related Post Bergambar Thumbnails | Blogspot dengan alamat link https://tipstopmarketing.blogspot.com/2016/08/cara-membuat-related-post-bergambar.html

Tweet