Tuesday 16 December 2014
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...
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8kW7nYZOkaKSr22ld5ARWRvCsq1PMdy6yAGdnBNIYwLFfAO_OUgPPT-aEDaulPaiA2aQebVd_F7vuV7wV6hgJ8iqQ_f7pqFen1BF-kW-9GRy5tUxUyQfbGlga-8iQAwX6S4hubkg6ek4/")
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>
Gue yakin, jika langkah-langkah dan penempatannya benar maka Related Post tersebut
akan berhasil. Selamat mencoba.
