Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Membuat Menu Dropdown

Dalam konsep blog, setiap posting kita akan terarsip otomatis secara rapi setiap bulan. Setiap memasuki bulan baru, seperti Januari, maka arsip bulan Desember akan tampil di sidebar. Masalahnya, kalau kita sudah ngeblog setahun, maka arsip dari Januari sampai Desember akan berjejer di sidebar kita. Bagaimana kalau dua dan tiga tahun lagi?

Langkah praktis mengatasi hal ini adalah dengan membuat pull-down menu seperti di bawah ini:

– Archives –

January 2007
February 2007
Mart 2007
April 2007

Jadi, berapa bulan/tahun kita blogging di blogger/blogspot, menu bulan-bulan tsb tidak akan memenuhi dan berjejer panjang di sidebar kita. Yg tampak hanya nama “Archives”, baru setelah di klik, akan muncul nama bulan arsip-arsip kita.

Untuk membuat arsip pulldown ini ada dua yakni untuk blogger dengan template klasik, dan template baru. Untuk template klasik langkahnya yaitu :

  1. Login ke blogger.com dg id Anda
  2. Klik Template
  3. Di bagian sidebar blog Anda bagian archives, ada kode html sbb:
  4. &<BloggerArchives> 
    <a href="<$BlogArchiveURL$"$gt;'><$BlogArchiveName$></a>

    </BloggerArchives>


  5. Nah, ganti kode di atas dg kode html di bawah ini:
  6. <select name="archivemenu"
    onchange="document.location.href=this.options[this.selectedIndex].value;">
    
    
    <option selected>- Archives -</option>
    <BloggerArchives> <option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option> </BloggerArchives>
    </select>

  7. Apabila selesai, klik SAVE CHANGES. Bila sudah DONE, klik REPUBLISH.
  8. Selesai.

Untuk anda yang memakai template baru, langkahnya lebih mudah yaitu :

  1. login dulu, tentunya dengan id anda
  2. klik LAYOUT
  3. Klik PAGE ELEMENTS, cari element (kotak) yang bertuliskan Blog Archive
  4. Klik Edit pada kotak Blog Archive tadi
  5. Di samping tulisan Style ada beberapa radio button, pilih radio button yang bertuliskan Dropdown Menu dengan cara memberi tanda tik/cek
  6. Klik Save Changes
  7. Selesai

Nah keterangan di atas tadi merupakan langkah-langkah untuk membuat menu Dropdown untuk Arsip, Sekarang bagai mana caranya membuat menu dropdown yang di dalam nya ada linknya, saya ambil contoh untuk menu Dropdown milik saya pribadi yang berada di sebelah kanan atas yang berisi tulisan β€œ blog tutorial β€œ. Untuk membuatnya silahkan anda copy kode HTML di bawah :

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu><option value=0 selected>tulisan disini yang akan muncul duluan</OPTION>

<option value="isi dengan addres yang ingin di tuju">tulisan di sini yang akan muncul</option>
</select></form>

Sebagai contoh untuk menu Dropdown milik saya :

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1
name=menu>

<option>- Blog Tutorial -</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/bikin-blog.html">Membuat Blog</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/cara-setting-blog.html">setting Blog</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/memilih-template.html">Memilih Template</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/mengatur-hurup-dan-warna.html">warna & hurup</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/cara-memposting-artikel.html">Posting Artikel</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/membuat-read-more-1.html">Read more (1)</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/membuat-text-area.html">Text area</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/blogger-emoticons.html">Blogger Emoticons</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/yahoo-messenger-emoticons.html">Yahoo!Emoticons</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/download-gratis.html">Download Gratis</option>

</select></form>

Hasilnya akan seperti ini :

– Blog Tutorial – Membuat Blog setting Blog Memilih Template warna & hurup Posting Artikel Read more (1) Text area Blogger Emoticons Yahoo!Emoticons Download Gratis

Mudah bukan?   Selamat mencoba !

Ingin pintar dalam bahasa HTML silahkan download ebook nya di sini .
Ingin pintar membuat Website sendiri, klik di sini.

sumber : Mario Gagho

23 April 2007 - Posted by | blog tutorial

25 Komentar »

  1. salam kenal,
    ini salah satu menu yang saya cari. terimakasih atas tutorialnya.

    Komentar oleh raden.suparman | 3 Juni 2007 | Balas

  2. edelweis habis pasang dropdown, cari ilmunya disini, makasih mas rohman.

    Komentar oleh UKMPA Edelweis FSUH | 20 Juli 2007 | Balas

  3. Maaf mas aku orang katro dalam dunia website. Pingin buat blog yang canggih kayak profesor Rohman tapi punya kesulitan mendasar. Sehabis meng copy deretan HTML yang mas tunjukkan, aku sangat kesulitan menentukan kemana gerangan aku mem- paste-nya. Saking ndesonya aku jadi mules. Tolong ya prof, eh mas Rohman. Arigato.

    Komentar oleh Yoyo | 11 September 2007 | Balas

  4. buat yoyo : pake templatenya apa nih, klasik apa yg baru? kalo klasik, simpan nya di antara kode sidebar, masih bingung? sama. kalo pake yg baru sangat gampang, klik layout –> elemen halaman –> tambahkan sebuah elemen halaman –> tambahkan ke blog di bawah tulisan HTML/Javascript –> trus paste deh di situ –> klik tombol simpan –> kelar deh

    Komentar oleh rohman | 11 September 2007 | Balas

  5. Trims Prof, langsung tokcer. Aku tak mulas lagi.

    Komentar oleh Yoyo | 11 September 2007 | Balas

  6. Thank You…so..so..much…!!!
    πŸ™‚

    Komentar oleh kohati sumut | 17 Oktober 2007 | Balas

  7. Ass. wr.wb
    Ini aku lagi .. Kang Rohman yg baik, semoga ilmu yg kang rohman berikan bs jd ladang pahala ya..(ada maunya)..Aku nih kan gak tau apa2 pd dasarnya ttg blog makanya gi blajar. Trus kalo aku mo kasih .. menu navigasi (bener gak namanya) di header itu berisi ..misal home, cerita, Dunia Anak, Kuliner … tuh gimana caranya ya kang. Trus pengisiannya tuh gimana juga. (Hihihi malu aku abis gaptex bgt!!!)Wass.

    Komentar oleh Titie | 27 Februari 2008 | Balas

  8. Thank you ya mas atas info anda. Gue dah nerapin di blog gue n ternyata gue berhasil. Cool Man.πŸ˜‰

    Komentar oleh vivi | 9 April 2008 | Balas

  9. Luar biasa, thank’s banget semoga kamu tetap jaya

    Komentar oleh Adi Santoso | 25 April 2008 | Balas

  10. Kang Menu drop down yang akang kasih jadi ilmu baru buat saya, o iyah kang kalau link yang di seleksi di menu drop downnya enggak mau loncat ke halaman baru atau inginnya menutupi halaman utama/awal gimana caranya???,makasih sebelumnya ya..kang.

    Komentar oleh LuckyUline79.Blogspot.com | 22 Juni 2008 | Balas

  11. makasih Kang tutorialnya…

    Komentar oleh theRA!S | 24 Juni 2008 | Balas

  12. Thanks Mas!!! Baruzan dicoba, langsung berhasil!

    Komentar oleh Arish 831 | 1 Juli 2008 | Balas

  13. assalamualaikum
    salam kenal kang, kang saya kesulitan untuk masalah menu dropdown ini, saya memakai template baru. di menu edit HTML tampilannya kok beda ya kalo kita liat page source pada saat kita buka blognya?
    kode diatas dicopy paste kemana kang?

    Komentar oleh bagoesh | 13 Juli 2008 | Balas

  14. @bagoesh ; wa ‘alaikum salam, salam kenal kembali. untuk memasangnya, pilih elemen untuk Javascript/HTML.

    Komentar oleh rohamn | 13 Juli 2008 | Balas

  15. hallo kang rohman, kalau kita mau memperlebar kolom archive untuk jenis blogger baru caranya gimana ya? saya mempunyai kolom archive standart dari blogger tapi saya mau memperlebar ukurannya biar rata sama yang lain, caranya gimana ya?…mohon bantuannya….

    thanks

    Komentar oleh Hendra Ginting | 14 Juli 2008 | Balas

  16. ini dia yang saya cari-cari..makasih Kang ROhman….Banyak belajar nih dari sini

    Komentar oleh JoVie | 16 Juli 2008 | Balas

  17. wow banyak bener nich, cobain semuanya boleh ya kank….????
    ntar kl blm bisa tlg pandu yachπŸ™‚

    Komentar oleh SUGINO | 19 Juli 2008 | Balas

  18. Thank u.

    Komentar oleh Dang Purple | 19 Juli 2008 | Balas

  19. wah bagus sekali

    Komentar oleh shalon83 | 26 Juli 2008 | Balas

  20. mas q download aplikasi mas smuanya ya soalnya q msh binggung dalam menyusun blog…blehkah q jV link mas dengan q,,,mgkin mas bs email q di elank.pamujo@gmail.com
    lam kenal sebelumnya ya mas

    Komentar oleh elank | 10 Agustus 2008 | Balas

  21. Thanks atas infonya! lagi nyari banget nih!!!
    πŸ™‚

    Komentar oleh n_n | 18 Agustus 2008 | Balas

  22. h3… aBieZ baCa n3 LangsuNg di’pRaktEkin…
    maNtaPz Lah tRik dari Kang Rohman!!!

    sKaRanG udaH duLu baCanYa… LagI biKiN tuGas bWt sKuL… (kapan yaWch sekolah bebas PR)

    Komentar oleh @Nn!3 | 25 Agustus 2008 | Balas

  23. Asli mas Rohman sangat bermanfaat…
    ijin copas yach, Semoga kebaikan anda dibalas oleh-Nya

    Tengkyu.

    Komentar oleh welcome to our greenshrub | 27 Agustus 2008 | Balas

  24. very membantu…he3..thanx

    Komentar oleh skunkwork | 29 Agustus 2008 | Balas

  25. wahh…masukan yg sangat baik
    aku newbie blogging nih:)
    backlink aku ya kang:)
    makasih:)

    http://www.haribisnis.blogspot.com
    http://www.philosophyarticle.blogspot.com

    Komentar oleh harry | 19 November 2008 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: