Beranda » » Cara membuat Related Post di atas kotak komentar

Cara membuat Related Post di atas kotak komentar

12
Sebelum nya saya juga pernah membuat artikel tentang Related Post ini , namun pada kesempatan kali ini saya akan memberikan versi ke dua nya . apa beda nya dengan related post yang sebelumnya ? kalo yang ini bedanya Related post atau Artikel terkait  berada di atas kotak komentar atau berada di luar postingan , contohnya bisa di lihat di blog ini. jadi dengan begini tidak terlalu mengganggu isi postingan bukan . apa anda tertarik ? kalau begitu berikut adalah langkah-langkah nya :



1. Login ke blogger.com

2. setelah itu pilih Rancangan >> Edit Html

3. kemudian backup template anda dulu , pilih Download Template Lengkap

4. lalu centang Expand Template Widget

5. kemudian letakan kode di bawah ini , tepat di bawah kode ]]></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>

6. kemudian cari kode yang mirip di bawah ini , dan sisipkan kode yang berwarna merah kedalamnya

<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 != &quot;true&quot;'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/>

</b:if>


</b:loop>
</b:if>
</span>

7. lalu cari kode <div class='post-footer-line post-footer-line-3'/>
apabila tidak ketemu , coba hapus sebagian huruf di mulai dari kanan , dan cari lagi.

contohnya saya akan menhapus simbol / dan >
maka akan menjadi <div class='post-footer-line post-footer-line-3'

8. kalau sudah ketemu , letakan kode di bawah ini . tepat dibawah kode diatas

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-posts'>
<h4>Posts Terkait:</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

9.  kemudian simpan template anda dan lihat hasil nya ...

12 comments:

asfa blog said...

mantap nih bos ilmunya thanks for sharing

Egi Gusniawan Pradana said...

@Asfa Blog : sama2 kawan :) terima kasih telah mampir

Igun Suka-Suka said...

artikel nya bagus-bagus gan,,
mau dicoba akh,,

Egi Gusniawan Pradana said...

Igun Suka-Suka : silahkan sobh :D

nangza said...

maksutnya yang nomor 7 gmn tuh, setelah ketemu kodenya trus diapain, masak trus disimpan, he he

Egi Gusniawan Pradana said...

@Nangza : hehe maap gan ada yg kurang , tapi sekarang udah saya perbaiki ,,

terima kasih telah mengoreksi :)

kampus photoshop said...

setelah mengikuti step by step dan langsung sukses...
terima kasih gan, salam kenal...

main ya ke blog saya : http://www.kampusphotoshop.blogspot.com/
saya tunggu kedatangan agan di sana...
terima kasih..

Royan Sableng said...

beh gan melihat kodenya yang buanyak jadi bingung..hehehe
tapi akan saya coba

follback ya

oIm_hIm87 said...

makasih banget..alhamdulillah berhasil...

Blog Ringan said...

ma kasih mas, ini sangat membantu

Senyum said...

ini mantap mass...

hendra frans said...

Berhasil gan.
ask gan, supaya lebih banyak dan memperbesar hurufnya bagaimana ya gan ?

Post a Comment

Blog ini DoFollow ..