Cara Membuat Related Post / Artikel terkait SEO

Pada beberapa templates blog standar sering kali tidak dijumpai widget related posts. Padahal widget yang satu ini sebenarnya cukup penting untuk meningkatkan pageview blog. Ada banyak cara untuk pemasangan widget yang satu. Seperti cara instan menggunakan jasa LinkWithin atau lainnya.

Namun sebagian widget Related Post tersebut menambah beban loading blog. Dan jelas hal itu mengurangi SEO (kira-kira, he.. he..).

Untuk itu, mungkin diperlukan widget Related Post yang cepat loading. Sederhana namun terkesan elegant.

Fungsinya adalah menampilkan artikel atau konten yang berkaitan dalam blog kita (sesuai dengan label). Yah… dapat juga dikatakan semacam rekomendasi (membujuk) dari kita kepada pengunjung untuk melihat artikel atau konten lain. Monggo di coba…

Berikut View Demo nya;

Widget Related Post

Kode CSS untuk related Post

Log in ke blogger dengan akun yang anda miliki.
Klik rancangan.
Edit Html » Centag kotak Expand template widget.
Cari kode </head>
letakkan kode dibawah ini sebelum kode </head> yang anda temukan.

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(“http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png”) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style>

<script type=’text/javascript’>//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel==’alternate’){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break;}}}}
function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];}}
relatedTitles=tmp2;relatedUrls=tmp;}
function contains(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false;}
function printRelatedLabels(){var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;document.write(‘<ul>’);while(i<relatedTitles.length&&i<20){document.write(‘<li><a href=”‘+relatedUrls[r]+'”>’+relatedTitles[r]+'</a></li>’);if(r<relatedTitles.length-1){r++;}else{r=0;}
i++;}
document.write(‘</ul>’);document.write(‘<span style=”font-size: xx-small;”><a href=”http://redaksiexpo2012.blogspot.com/2013/08/cara-membuat-related-post-artikel.html” rel=”dofollow” title=”Cara membuat related post artikel berkaitan”>Related Posts blog</a>[?]</span>’);}//]]></script>

Kode Source HTML Artikel terkait

Setelah anda selesai menempatkan css related postnya, maka ini adalah langkah terakhir. Untuk diketahui bahwa penempatan source HTML related post adalah kunci dari tutorial ini. Ini menjadi sangat penting karena beberapa kegagalan sering terjadi pada langkah ini. So monggo diperhatikan baik-baik…

Nah berhubung kebanyakan template berbeda-beda strukturnya, maka kita bisa coba opsi berikut;

Cara pertama untuk memnampilkan related post ini adalah cari kode <data:post.body/> jika ada dua, pilih yang kedua dan letakkan kode di bawah ini tepat dibawah kode <data:post.body/> tersebut:

<b:if cond=’data:blog.pageType == "item"’><data:post.body/>
<div id=’related-posts’><font face=’Arial’ size=’3′><b>Artikel terkait dengan <data:blog.pageName/>: </b></font><font color=’#FFFFFF’><b:loop values=’data:post.labels’ var=’label’><data:label.name/><b:if cond=’data:label.isLast != "true"’>,</b:if><b:if cond=’data:blog.pageType == "item"’>
<script expr:src=’"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=4"’ type=’text/javascript’/></b:if></b:loop> </font>
<script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if>
</b:if>

Jika anda belum berhasil, bisa dicoba alternatif selanjutnya; adalah pada <data:post.body/>, kita buat sedikit perubahan dengan mengapus sebagian kodenya seperti berikut (dan letakkan Tepat Dibawanya <data:post.body/>

<b:if cond=’data:blog.pageType == "item"’>
<div id=’related-posts’><font face=’Arial’ size=’3′><b>Artikel terkait dengan <data:blog.pageName/>: </b></font><font color=’#FFFFFF’><b:loop values=’data:post.labels’ var=’label’><data:label.name/><b:if cond=’data:label.isLast != "true"’>,</b:if><b:if cond=’data:blog.pageType == "item"’>
<script expr:src=’"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=4"’ type=’text/javascript’/></b:if></b:loop> </font>
<script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if>
</b:if>

Saya yakin, jika langkah-langkah dan penempatannya benar maka Related Post tersebut akan berhasil. Selamat mencoba.