Cara Membuat Related Post dengan Gambar/Thumbnails di Blog Blogger ~ Tutorial Bangsat

Cara Membuat Related Post dengan Gambar/Thumbnails di Blog Blogger. tentang Cara Membuat Related Post dengan Gambar Thumbnails di Blog Blogger. Atau Cara Membuat artikel terkait dengan Thumbnails gambar di Blog. Membuat ini sangat bermanfaat untuk para pengunjung blog anda, karena akan memudahkan pengunjung untuk membaca artikel-artikel yang masih mempunyai topik yang sama.

Bahkan jika anda perhatikan ketika anda menggunakan google search di bagian bawah ada beberapa saran pencarian yang masih berhubungan dengan artikel atau sesuatu yang sedang anda cari. Dengan memasang widget ini kita dapat menuntun pengunjung blog kita menuju postingan yang lain yang tentunya berkaitan dengan postingan yang sedang dilihat

Artikel terkait atau related post menampilkan pintasan dari beberapa posting yang masih memiliki konten berhubungan dengan artikel yang dikunjungi oleh pembaca. Menurut logikanya diharapkan dengan memasang artikel terkait ini dapat meningkatkan page view halaman karena letaknya berada dibawah posting

Setelah mengetahui beberapa hal diatas jadi saya setuju dengan para master seo bahwa memasang related post atau artikel terkait adalah salah satu tehnik seo yang disarankan, karena google pun menggunakan hal yang sama. Gambar di bawah adalah contoh related post yang akan dijelaskan oleh Tutorial Bangsat mengenai cara memasangnya.

Cara membuat artikel terkait untuk blogger

Cara membuat related Post di Blog

1. Masuk ke Blogger >> Template
2. Pilih EDIT HTML >> Tunggu sampai Kode HTML terbuka
3. Temukan kode ]]></b:skin> dan letakan kode dibawah tepat di atasnya.

.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;}

4. Selanjutnya cari kode yang mirip dengan kode dibawah >> cari kode yang pertama dan jika tidak ada cari kode-kode selanjutnya.

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'/>
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>
</div>
</div>

5. Jika anda sudah menemukan kode yang mirip dengan kode diatas, copy kode dibawah tepat dibawah kode di atas.

<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/AVvXsEi2ZIlbes1N4MJxD4CKcV-tO0NGlYtQDx11JqF0SSTvT0k6qxT4CE4ou2z2_f8WBheIDxDyey26yxXq3M8VTaQjDyCwSh3yMmRzBCYsMShf53kMMD9ttjJvvSIRJf0oo-Z2X-idZ92XR08t/'};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'/>

Keterangan:

Warna Orange Bisa anda sesuaikan dengan ukuran template anda
warna Merah Jumlah artikel yang akan anda tampilkan.

6. Simpan Template anda. Sekarang template anda sudah memiliki artikel terkait atau related post untuk memudahkan pengunjung menjelajahi blog anda.

Terima Kasih telah membaca artikel tentang Cara Membuat Related Post dengan Gambar/Thumbnails di Blog Blogger . Silahkan baca artikel lainnya di daftar isi.

Unknown

Judul : Cara Membuat Related Post dengan Gambar/Thumbnails di Blog Blogger .
Ditulis oleh : Unknown .
Pada hari : Saturday 26 July 2014 .
Rating Blog : 5 dari 5

Follow me on: Facebook | Twitter | Google+