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
teknik 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
- Masuk ke Blogger >> TEMPLATE
- Pilih EDIT HTML >> Tunggu sampai Kode HTML terbuka
- Temukan kode ]]></b:skin> dan letakan kode dibawah tepat di atasnya.
/* Teknik SEO Mudah 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;}
- 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>
- 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/AVvXsEjswOmgkglLsrRAFdEGptpoJ6eEt6LF7VuUz4Z9lFKpN6Hmnb_Ermi3sdHI0cZetttl6EVN2ffUNZP7fV0FPsf9v80dfyw4gS8PtoDRA6DRnbNm-WZSxJ8_qqCJMtLUbua60JxuK1rgUv0G/'};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
Biru Bisa anda sesuaikan dengan ukuran template anda
warna
Hijau Jumlah artikel yang akan anda tampilkan.
- Simpan Template anda >> Selesai
Sekarang template anda sudah memeliki artikel terkait atau related post
untuk memudahkan pengunjung menjelajahi blog anda. Jika anda ingin
membuat template menjadi seo-friendly tetapi tidak tahu syarat dan
kriterianya silahkan baca
SYARAT DAN KRITERIA TEMPLATE SEO.
Semoga artikel ini bisa membantu blog anda untuk lebih banyak pengunjung
dan ramai tentunya, memang menjadi blogger harus bersabar yang
terpinting andalahtulisan kita bermanfaat untuk orang lain. .
Salam Blogger,!!!
