Related Post atau Postingan Terkait itu sendiri banyak versi. Namun tujuannya tetap sama yakni menampilkan artikel terkait menurut kategorieatau label dari tulisan yang sedang kita baca. Dan ini biasanya sangat membantu jumlah PageView ( halaman yang di baca ) pada blog kita, Terutama bagi visitor yang ingin menggali lebih dalam artikel lainnya yang kita tulis.
Untuk tata letak bagusnya “ Related Post “ di simpan tepat bawah artikel, atau sedikit jarak dengan artikel.
* Perhatian
Dan perlu di ingat Post terkait ini akan berjalan atau terlihat jika artikel kita mempunyai label/kategorie/tag yang sama dari beberapa tulisan.
1. Login/masuk ke Blogger.com jika belum log in.
2. Pada halaman Dasboard masuk ke Layout ( tata-letak ), pilih tab Edit Html.
3. Kemudian tandai/centang kotak di samping tulisan “Expand Template Widget”
4. Setelah itu tempatkan script berikut ini di bawah tag ]]></b:skin>
<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>');
}
//]]>
</script>
5 Kemudian cari bagian ini, dan tambahkan seperti kode yang di beri warna
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'/>
<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=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
</span>
6. Sekarang cari kode baris post-footer berikut ini.
Simpan Perubahan ( save template ).
Jika ingin memberi style atau gaya pada tampilan Widget Related Post ini. kita bisa menambahkan pada halaman Css-nya, script berikut, sebelum tag]]></b:skin>
Untuk List
Untuk tata letak bagusnya “ Related Post “ di simpan tepat bawah artikel, atau sedikit jarak dengan artikel.
* Perhatian
Dan perlu di ingat Post terkait ini akan berjalan atau terlihat jika artikel kita mempunyai label/kategorie/tag yang sama dari beberapa tulisan.
Menambah Script Artikel Terkait “ Related Post “
Berikut ini tahap-tahap untuk menambahkan script Arttikel Terkait ke dalamTemplate Blog.1. Login/masuk ke Blogger.com jika belum log in.
2. Pada halaman Dasboard masuk ke Layout ( tata-letak ), pilih tab Edit Html.
3. Kemudian tandai/centang kotak di samping tulisan “Expand Template Widget”
4. Setelah itu tempatkan script berikut ini di bawah tag ]]></b:skin>
<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>');
}
//]]>
</script>
5 Kemudian cari bagian ini, dan tambahkan seperti kode yang di beri warna
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'/>
<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=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
</span>
6. Sekarang cari kode baris post-footer berikut ini.
<div class='post-footer-line post-footer-line-3'>kemudian masukan di bawahnya script ini.
<b:if cond='data:blog.pageType == "item"'>
<div class='related-posts'>
<h4>Posts Terkait:</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>
Simpan Perubahan ( save template ).
Jika ingin memberi style atau gaya pada tampilan Widget Related Post ini. kita bisa menambahkan pada halaman Css-nya, script berikut, sebelum tag]]></b:skin>
.related-posts h4{
margin: 0 0 0 10px;
padding: 0 0 0;
font-size: ukuran font;
color: #nilai warna;
}
Untuk List
.related-post ul{
margin: 0 0 0;
padding: 0 0 0;
list-style-type:none;}
.related-posts li{
margin: 0 0 0;
padding: 2px 0px 0px;
list-style-type:none;
font-size: ukuran font;}
.related-posts li a{color: #nilai warna}
.related-posts li a:hover{color: #nilai warna; text-decoration:none;}
December 28, 2011 | 0
comments | Read More
0 Comments
hhe * . Postingan kali adalah kumpulan dari semua cara yang juragan ketahui tentang men-SEO-kan template blogger / blogspot kita. Jadi kalo ada yang kurang silahkan sobat-sobat blogger tambahkan ilmu yang sobat miliki melalui kolom komentar. Tutorial step by step mengedit template blogger / blogspot agar SEO Friendly ini adalah hanya salah satu cara untuk meningkatkan SERP ( apa itu SERP dapat sobat baca disini ). Nah dari pada sobat ketiduran ngedengerin ocehannya juragan yang gak jelas, lebih baik kita langsung membahas step by step Complete SEO Guide untuk blogger templates :
