Membuat navigasi blog adalah hal penting untuk meningkatkan page view web/blog, salah satunya adalah Membuat link artikel terkait, artikel yang berhubungan, Related post atau nama lain yang berdasarkan kategori atau label yang diberikan tiap postingan.
Berikut ini tahap-tahap untuk menambahkan script Arttikel Terkait ke dalam Template 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>
//<![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>
<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>
<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;}
di tulis dari berbagai sumber.
Q9T6VC9KFZQU
kawand, mau gak tukaran link... bdw kamu baru ngeblog yagh???/
ReplyDeletemau tau gak knp jarang komentar yg masuk di blog mu???
jawabannya karena kamu tidak mengatur komentarmu, coba degh liat blogku klo di klik pada bagian komentar ada pilihan nama atau anonim. klo mau tau lebih lanjut ke blogku dulu, lalu komen di sana. key... nigh alamatnya: http://beritasangatbohong.blogspot.com
Haha yg baru ngeblog itu kyaknya >> http://beritasangatbohong.blogspot.com deh :D
ReplyDeletecoba tuh atur blogmu, nonaktifkasn pengaturan adult konten
Mantap gan tipsnya, makasih infonya
ReplyDeletekok di blog saya gak bisa sih?? kenapa ya??
ReplyDeleteapa karena tema yang saya gunakan???
liat aja di http://t-you.blogspot.com
tank's infonya gan,,
ReplyDeletemantabs,,
Waduh panjang betul langkahnya, tapi gpp patut dicoba krn related post sangat penting untuk membuat backlink halaman kita harapannya nanti bisa mendongkrak trafik Peluang Bisnis Online Tanpa Ribet
ReplyDeleteKalo Bikin yg ada gambarnya gmn gan?
ReplyDeletekyk di blog ini you might also like
Thnkz kk
Wkwkwk,,,ternyata sudah ada postingan nya disini. Maaf ga baca-baca dulu. nice Blog :)
ReplyDeleteterlalu panjang gan
ReplyDeletemantap gan boleh ane coba... cuma masih binggung... harus baca 3 kali nih.... sewa tenda cikaranga
ReplyDeletethank's gan tutorialnya.
ReplyDeletewah info yg bermanfaat nih gan mantap deh
ReplyDeletemakasih infonya sangat membantu sekali untuk yang belum pasang, nice share and happy blogging
ReplyDelete