Membuat Artikel Terkait atau More Artikel

Dari Dashboard > Design > Edit HTML

Beri tanda centang pada Expand Widget Templates


Langkah pertama > Penempatan kode CSS
dibawah <b:skin><![CDATA[
........
diatas ]]></b:skin>

.post-footer h3{border-bottom:2px double #000; font-size:15px; font-weight:bold; color:#000; margin:10px 0 3px; padding:4px 0 4px 5px}
.post-footer ul{margin:0 0 0; padding:0 0 0}
.post-footer li{border-bottom:1px #000 dotted; margin-left:30px; padding-bottom:.25em; line-height:1.5em}

Kode css diatas hanya sampel saja, bisa disesuaikan.


Langkah kedua > Penempatan JavaScript
dibawah ]]></b:skin>
........
diatas </head>

<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>

Langkah ketiga > Penempatan kode HTML dan JavaScript
dibawah <body>
........
diatas </body>

Lebih detailnya dibawah post-footer-line-3 atau line yang terakhir blog anda :

<div class='post-footer-line post-footer-line-4' style='margin-top:50px;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<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=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h3>More Artikel:</h3>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
</div>



Semoga Bermanfaat...

Alhamdulillah

12 comments:


  1. bro, sudah dicoba tapi ada yang error seperti nya?
    begini katanya bro : Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar. <br/> Pesan error XML: The reference to entity "callback" must end with the ';' delimiter.
    mohon solusinya bro saya gak paham yg begini-an hehe ...thanks?

  2. sudah saya ganti, dicoba lagi bro...

  3. ok bro thanks membantu sekali sudah berhasil!
    oya bro sekalian tanya boleh gak? kalo cara membuat jarak antara kolom komentar dengan footer gimana bro bisa gak? mohon pencerahan-nya thanks.

  4. Alamat Blognya bro...?
    Jika tidak melihat langsung blognya tidak akan bisa bro, karena setiap template berbeda...

  5. ini alamat blog nya bro : http://johnsuntitledblog.blogspot.com/

  6. maksudnya dengan menu footer, jika salah tanyakan lagi... :)
    ini akan membuat dengan menu footer, dan jika tidak salah ini kode CSS di template anda :
    #content-wrapper {
    margin:10px auto 0;
    text-align:left;
    width:600px;
    }

    Pada margin isi nol diganti dengan yang lebih besar, seperti :
    #content-wrapper {
    margin:10px auto 50px;
    text-align:left;
    width:600px;
    }

    isi 50px pada margin diganti sesuai dengan seberapa besar jarak yang bro inginkan.

    Jika saya salah tanyakan lagi... :D

  7. iya bro bener dengan "menu footer", tapi gak berhasil. saya pengen kaya di blog bro nano, kalo di blog bro nano kan antara #kumpulan dengan #credit atau .comments dengan #credit (kalo gak salah. karna gak ada menu footer) deket jarak nya? kalo di blog saya jauh bener kelihatan-nya (dengan #footer-wrapper nya), dari kemaren-kemaren gak ketemu permasalahan nya, apa ada kesalahan di CSS nya ya bro? jadi bingung saya..

  8. maksudnya mau dipersempit jaraknya bro ?

  9. ya bro di persempit gitu, karna terlalu lebar kebawah kurang srek saya liat nya bro? hehe..

  10. Sebelumnya di tab Edit HTML beri tanda centang Expand Widget Templates dan cari kode ini iframe allowtransparency disitu ada attribute height='410' diperkecil saja ukuran tingginya...

    Semoga Bermanfaat...

  11. wow sippp bro.. thanks berat membantu sekali sukses.
    hmmm.. seperti nya saya harus berguru yang lebih banyak lagi sama bro nano sip dah thanks ya bro?

  12. Sama-sama bro...
    wah jangan berguru sama saya... saya masih sangat amatir... :)

Posting Komentar


Creative Commons License
Membuat Artikel Terkait atau More Artikel by Nano Yulianto is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at http://nanoyulianto.blogspot.com/2010/10/membuat-artikel-terkait-atau-more.html.
Permissions beyond the scope of this license may be available at http://nanoyulianto.blogspot.com/.