Membuat Artikel Terkait Dengan Menu DropDown

Ini pertanyaan dari Sahabat saya, cara membuat artikel terkait dengan tag <select> dan <option>.



Demo :

Demo Artikel Terkait Dengan Menu DropDown

Contohnya akan berlaku sampai 21 Mei 2011 21:00 WIB, dan akan saya ganti seperti sebelumnya karena ini demo template.

N2y Template Sweet JQuery




Cara membuatnya

Dari Dashboard > Design > Edit HTML


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}

Kode css diatas untuk judul "Artikel Terkait".



Langkah kedua > Penempatan Kode 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('<select style="margin:10px 0;" onchange="document.location.href=this.options[this.selectedIndex].value;" name="artikelterkait" title="Artikel Terkait">');
while (i < relatedTitles.length && i < 20) {
document.write('<option style="padding:0 10px;" value="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</option>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</select>');
}
//]]>
</script>

Langkah ketiga > Penempatan kode HTML
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 Pertanyaannya terjawab... :D

Jika ingin artikel terkait seperti biasa, anda bisa lihat disini :

Membuat Artikel Terkait atau More Article


Alhamdulillah

32 comments:


  1. kak ko ga bisa juga yah, malah keluar tulisan kyak gini
    Invalid data reference post.labels: No dictionary named: 'post' in: ['blog']

  2. tadi saya coba lagi dari artikel ini bisa bro... coba di ikuti dulu seperti yang artikel yang diatas, setelah berhasil baru diganti sesuai selera...

  3. berhasil kang... makasih kang buat bimbinganNy....
    suka bgt sm blog akang yg sederhana tp isiNy jauh dr kata sederhana... blog bagus

  4. kang udah smingguan atw tepatNy stlh make artikel terkait menu dropdown saya ga bisa loggin lgsg dr www.blogger.com krna slalu muncul tulisan Not Found
    Error 404, saya klo loggin ke blog lewat google account, itu kira2 kenapa yah kang krna sebelumnya saya lancar2 ja klo loggin dr www.blogger.com

  5. Kalau itu ngadu ke Blogger Bro, karena itu server milik Blogger...

    saya kasih masukkan sedikit, sebelum login harus dibersihkan cookies yang ada di Browser anda... dan login lagi... jika masih tidak bisa lihat updated statusnya Blogger tentang migrasi akun di Buzz Blogger, siapa tahu anda terkena itu... sering-sering baca berita terbaru dari Blogger bro...

  6. klo cookies udah kang,,, bisa lebih jelas tnntng migrasi akun buzz kang... btw blog ane udah terhubung sm google buzz kang

  7. kenapa yah kang pas ane mau klaim blog ane tp malah Account user tidak ditemukan
    padahal ane ga salah masukin nickname... ada masukan gak kang

  8. untuk antisipasi ganti password alamat email... memang Blogger lagi banyak perbaikkan sana-sini, kalau tidak salah Blogger sudah menjadi hak milik Google...

    coba baca disini bro :
    I can't sign in. What should I do?

  9. oiah kang saat itu ane udah login di email ane, udah login di google akun, jd ane ga lupa/slh pswrd kang... nah pas mau kaim blog Account user tidak ditemukan itu kira2 knapa yah

  10. Biasanya ada konfirmasi tentang keaslian akun dari Google dengan meminta nomor hp, itu harus di ikuti...

    Jika punya 2 alamat email dari Google, harus memakai 2 browser, dan satu browser satu alamat email... contoh menggunakan FireFox atau Chrome... di rekomendasikan mendingan punya satu saja, karena akan berdampak penghapusan salah satu alamat email... syukur jika yang dihapus alamat email kedua, jika alamat email yang utama, kan bisa repot...

    Diatas hanya menurut pengalaman saya saja bro...

  11. kang help... knpa blog saya http://www.s1s1-9elap-qu.blogspot.com malah jadi http://pageinxt.com/?dn=raezen.fileave.com&fp=OsvNqwgJY9ifoo3uvkWZDIk%2BueCoWCA0f%2FnAAKKBOwzL8AZY15%2FR6KXtkbITe29fxvIdSba3wbKY5Kp8g2eavw%3D%3D&prvtof=U4kQ4dL0CylAaiP5fpKRR9vlDgS1qu8wUDyMvtWAwAHYsNiV10%2FohwO2MLPHNdFpuTKrKGJHvBBY8cfMiSOObA%3D%3D&poru=92Sc1ynPCX3HABntYHVgcLzgo3CVlJlkB4Wq7hyeiUfJUhtiLlkanoNM2%2BmS6%2BeSulc8e2z8jP1STWlgVoBEhFHSmBYtTQzcdQhI19xUIYc%3D&cifr=1&flrdr=yes&nxte=js

    knpa yah kang

  12. itu ada yang gak senang dengan Blog anda bro...

  13. coba Scriptnya di cek satu-satu bro...

  14. ketemu script ini kang




    kang script diatas saya hapus trus artikel terkait menu dropdown pnya akang ilang lagi, apa yg salah yah

    klo blog saya di injek script ada cara ngamaninnya gak kang biar aman, mohon bantuannya kang

  15. kurung siku yang ada di kode scriptnya di ganti memakai simbol bro, agar terbaca di kotak komentar....

  16. seperti kayak menulis kode di posting bro :
    &lt; = <
    &gt; = >

  17. ini kang

    >script src='http://raezen.fileave.com/scrolltop.js' type='text/javascript'/>

    <title></title>

  18. Ini Scriptnya punya DinamicDrive, kalau <title></title> jangan dihapus, itu untuk judul Blog...

    Mungkin ya bro, situs fileave.com itu mempunyai batas waktu jika ada yang meng-upload file disana, atau bisa juga terbentur masalah akun premium... sebenarnya dari Blogger sudah mempunyai sistem keamanan yang kuat, jadi tidak perlu khawatir bro... itu hanya kesalahan file hosting saja bro...

    Ada Script yang bisa digabungkan, ada yang tidak bisa... Jika di paksa terkadang salah satu Scriptnya tidak berfungsi...

  19. jadi kemaren error karna script menu drop down yah kang, btw ada alternatif laen ga kang biar bisa menu dropdown artikel terkaitnya

  20. Yang error yang ini bro...
    <script src='http://raezen.fileave.com/scrolltop.js' type='text/javascript'/>
    File hosting fileave.com yang error, kalau Script didalamnya tidak bermasalah bro...

  21. oke kang makasih, brati ertikel terkait pnya akang bisa ta pasang lg

  22. Terima kasih kembali bro...
    Jika ada pertanyaan jangan sungkan bertanya bro... :)

  23. wah ini model baru lagi ya bang artikel terkait nya, dicoba dulu bang thanks..?

  24. Silahkan bro dicoba...
    Your welcome... :)

  25. kang knapa yah dgn blog ane ko ada sebagian label yang ga nampak di artikel terkait sm label

  26. kak kenapa yah ga semua artikel saya terlihat di tags label sm ertikel terkait

  27. Maaf bro baru di balas...

    Memang jika artikel terkait seperti itu bro, secara acak munculnya bro. Itu yang membuat terlihat seolah kita mempunyai artikel yang banyak. Jika ingin menambahkan jumlahnya bisa bro...

    Di JavaScript artikel terkait yang berada di post-footer-line ada Script, dan didalamnya ada tulisan seperti ini bro :
    max-results=5

    angka 5 diganti saja bro... :)

  28. skali lagi, trimakasih penjelasan nya kang

  29. Tidak perlu terima kasih bro, memang Blog ini saya buat untuk seperti ini bro... :)

  30. mas mau nanya ni.. gimana sih cara membuat head blog bisa menjadi tempat demo. seperti blog ini, saya suka liat tampilannya. mohon petunjuknya mas :)

  31. Saya panggil Intan ya..

    Intan, saya kurang menangkap pertanyaannya, yang dimaksud sebagai tempat demo ?. Apakah ingin membuat Header seperti blog ini atau ... ?

  32. thanks ya gan ilmunya,,,,,,,,,,,,

Posting Komentar


Creative Commons License
Membuat Artikel Terkait Dengan Menu DropDown by Nano Yulianto is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at http://nanoyulianto.blogspot.com/2011/05/membuat-artikel-dengan-menu-dropdown.html.
Permissions beyond the scope of this license may be available at http://nanoyulianto.blogspot.com/.