Artikel terkait / Related post 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, saya berkesimpulan itu
adalah sesuatu yang hampir sama fungsinya dengan related post atau
artikel terkait tetapi mungkin beda penamaan saja.
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.
Selanjutnya jika anda tertarik untuk memasang artikel terkait / related
post ikuti langkah-langkah yang saya berikan. Gambar di bawah adalah
contoh related post yang akan saya jelaskan cara memasangnya.
Cara membuat related Post
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.
/* Belajar blog dan seo Related Posts --- */
.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'>5. Jika anda sudah menemukan kode yang mirip dengan kode diatas, copy kode dibawah tepat dibawah kode di atas.
<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>
<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/AVvXsEhd4ogU6Y3lClxN2KKGNVG7P0ZOX_n7wIFTVwN9ZbS-YdpT_0oV6vpa8Zhzte4YpMp7WDusVG4iXkkkJETKVHeyvMRq0662Qk1OCrxjbssmAnl6rH0KL3gLkHFmXj1yWA9j-y8P-3fgYQVb/'};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'/>
- Warna Orange Bisa anda sesuaikan dengan ukuran template anda
- warna Merah Jumlah artikel yang akan anda tampilkan.
Sekarang template anda sudah memeliki artikel terkait atau related post untuk memudahkan pengunjung menjelajahi blog anda.
semoga bermanfaat trimakasih telah mampir ke blog ini.
.gif)
