Cara Membuat Related Post dengan Gambar/Thumbnails di Blog Blogger. Berikut ini Seocips.com akan membagikan tentang bagaimana cara membuat related post dengan gambar thumbnails di Blog Blogger atau yang lebih kita kenal dengan Artikel terkait. 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 pageview 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.
Cara membuat related Post di Blog ( V1 )
2. Pilih EDIT HTML
3. Temukan kode
.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; }4. Selanjutnya cari atau temukan kode yang mirip dengan salah satu kode dibawah ini ( cari kode yang pertama dan jika tidak ada cari kode-kode selanjutnya ).
.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;}
<div class='post-footer'>5. Jika anda sudah menemukan salah satu kode yang mirip dengan kode diatas, copy kode dibawah ini dan letakan dibawah kode di atas ( di bawah salah satu kode pada langkah ke 4 ), kemudian simpan / save Template anda.
<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 id='related-posts'>Keterangan:
<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/AVvXsEhUNd-mKwn0qgYIIRmEQx0gmAYMc-wa56BBAoib4q-t5YAjBTGBcsfFoiHCZXLrXPHWqCC5yVO1q-MnDCzz6aW-w_73avaKhKyQW3TPdgwCx-u4msi3kTVmm38S3QZ7hgV6BqZwxkrTJ5M4/'};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=5;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</b:if>
</div>
<div class='clear'/>
- Warna Orange Bisa anda sesuaikan dengan ukuran template anda
- warna Merah adalah jumlah artikel yang akan di tampilkan.
Membuat Related Post ( V2 )
Related post ini juga sudah saya tambahkan alt, title dan deskripsi otomatis sesuai postingannya, sehingga tidak perlu takut gambar-gambar di related post ini akan mengurangi nilai SEO template blog sobat. Selain tampilannya menarik related post ini seo friendly. Bagaimana tampilan related post ini? mungki sobat dapat melihat gambar diatas. Dan untuk cara membuatnya baca DISINI.
Post Comment