Hanya arsip

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

Menu Dropdown dengan JavaScript

Bagi sobat yang suka akan pernak-pernik blog, ada kabar baik nih. Pada kesempatan kali ini saya akan membahas tentang cara membuat menu Dropdown menggunakan JavaScript.

Biar agak seru, silahkan perhatikan contoh menu dropdown dibawah. Caranya silahkan arahkan mouse sobat ke deretan menu dibawah lalu klik untuk membuka submenu yang ada di dalamnya dan untuk menutupnya kembali sobat klik sekali lagi ke menu yang ingin di tutup, silahkan mencoba :


Menu utama 1

Menu utama 2

Menu utama 3

Menu utama 4

Bagaimana sudah di coba belum? kalau belum, coba dulu deh biar agak seru pembahasannya! Nah kalau sudah, bagaimana tanggapannya, seru tidak? kalau seru silahkan sobat baca artikel ini sampai tuntas (kaya adu banteng aja pake acara seru apa kagak), nah kalau sekiranya tidak seru, ya mending cari topik lain biar semangat bacanya.

Oke biar tidak terlalu ngelantur, kita langsung ke topik bahasan. Untuk membuat menu
seperti di atas, kita perlu memasang kode JavaScript serta stylesheet CSS pada template blog kita, akan tetapi karena di blogger terdapat dua pemakaian template yaitu template klasik dan template baru, maka tentu saja dalam membuat menu dropdown tersebut caranya berbeda pula. Oleh karena itu, pembahasannya pun akan saya bagi dua juga yaitu untuk template klasik serta untuk template baru. Akan tetapi karena pembahasannya terlalu panjang, maka kali ini akan saya bahas untuk template baru saja, dan untuk template klasik akan saya bahas pada postingan berikutnya.

Untuk membuatnya silahkan ikuti langkah-langkah berikut ini :

  • Langkah pertama yaitu membuat dua buah tombol untuk background dari tulisan menu, sebaiknya warna ataupun style nya di bedakan, ini dimaksudkan agar antara menu utama dengan sub menu akan terlihat perbedaannya.
    sebagai contoh lihat gambar tombol di bawah ini :
  • Langkah kedua adalah menyimpan file gambar tombol tersebut pada hosting untuk menyimpan gambar, bisa di blogger sendiri atau dengan hosting lain. Agar lebih terarah, saya ambil contoh menggunakan hosting lain yaitu www.photobucket.com.
    Untuk cara upload gambar ke situs ini sudah saya terangkan pada postingan terdahulu, jika ingin baca –
    baca lagi silahkan klik di sini.
    Saya ambil contoh kedua tombol tadi sudah saya upload dan mempunyai URL address sebagai berikut :

  • Langkah ketiga adalah memasukan kode JavaScript serta stylesheet CSS pada kode template blog,
    silahkan ikuti langkah-langkahnya :
    1. Sign in di blogger.com dengan id sobat
    2. Klik menu LayOut
    3. Klik menu Edit HTML
    4. Klik tulisan Download Full Template, lalu save data tersebut.
      Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template
    5. Klik kotak kecil di samping tulisan Expand Widget Templates untuk memberi tanda centang.
      Sekali lagi jangan lupa klik kotak kecil di samping tulisan Expand Widget Templates
    6. Tunggu beberapa saat sampai proses selesai
    7. Simpan kode berikut di bawah kode <title><data:blog.pageTitle/></title>


    8. <script>

      var last_expanded = '';

      function showHide(id)

      {

      var obj = document.getElementById(id);

      var status = obj.className;

      if (status == 'hide') {

      if (last_expanded != '') {

      var last_obj = document.getElementById(last_expanded);

      last_obj.className = 'hide';

      }

      obj.className = 'show';

      last_expanded = id;
      } else {
      obj.className = 'hide';
      }
      }

      </script>

    9. Masukan kode berikut di dalam stylesheet CSS, atau untuk lebih mudah silahkan cari kode * Footer, lalu simpan kode berkut di atasnya


    10. .ogah{
      background-image:url('http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif');
      text-align:center;
      width:90%;
      font-family: georgia, Helvetica, sans-serif;
      padding-left:20px;
      padding-right:20px;
      padding-top:10px;
      padding-bottom: 10px;
      display:block;
      text-decoration: none;
      color: #000000;
      height: 20px;
      }

      .ogahniye{
      background-image: url('http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif');
      text-align:center;
      width:90%;
      font-family: georgia, Helvetica, sans-serif;
      padding-left:20px;
      padding-right:20px;
      padding-top:13px;
      padding-bottom: 10px;
      display:block;
      text-decoration: none;
      color: #000000;
      height: 20px;
      }

      .hide{
      display: none;
      }

      .show{
      display: block;
      }

      a{cursor: hand}

    11. Klik tombol SAVE TEMPLATE
    12. Sedikit unek-unek, kode-kode diatas tentunya tidak seratus persen mutlak harus begitu, tapi bisa di sesuaikan dengan kondisi blog sobat.Contoh : width:90%; –> angka “90” artinya lebar dari gambar yang akan tampil sebesar 90%, nilai ini bisa diganti dan di sesuaikan dengan blog sobat, misal di ganti menjadi “80” atau berapa saja.

    13. Klik menu Page Elements
    14. Klik tulisan Add a Page Element
    15. Klik tulisan ADD TO BLOG di bawah tulisan HTML/JavaScript
    16. Masukan kode berikut :


    17. <a class="ogah" onclick="showHide('ogahku1')">Menu utama 1</a>
      <div id="ogahku1" class="hide">
      <a href="#" class="ogahniye">Link 1 di sini</a>>
      <a href="#" class="ogahniye">Link 2 di sini</a>
      <a href="#" class="ogahniye">Link 3 di sini</a>
      <a href="#" class="ogahniye">Link 4 di sini</a>
      </div>
      <a class="ogah" onclick="showHide('ogahku2')">Menu utama 2 </a>
      <div id="ogahku2" class="hide">
      <a href="#" class="ogahniye">Link 1 di sini</a>
      <a href="#" class="ogahniye">Link 2 di sini</a>
      <a href="#" class="ogahniye">Link 3 di sini</a>
      <a href="#" class="ogahniye">Link 4 di sini</a>
      </div>
      <a class="ogah" onclick="showHide('ogahku3')">Menu utama 3 </a>
      <div id="ogahku3" class="hide">
      <a href="#" class="ogahniye">Link 1 di sini</a>
      <a href="#" class="ogahniye">Link 2 di sini</a>
      <a href="#" class="ogahniye">Link 3 di sini</a>
      <a href="#" class="ogahniye">Link 4 di sini</a>
      </div>
      <a class="ogah" onclick="showHide('ogahku4')">Menu utama 4 </a>
      <div id="ogahku4" class="hide">
      <a href="#" class="ogahniye">Link 1 di sini</a>
      <a href="#" class="ogahniye">Link 2 di sini</a>
      <a href="#" class="ogahniye">Link 3 di sini</a>
      <a href="#" class="ogahniye">Link 4 di sini</a>
      </div>


    18. Klik tombol SAVE CHANGES
    19. Klik pada element yang baru di buat, tahan lalu pindahkan di tempat yang di sukai ( di drag & drop )
    20. Klik tombol SAVE
    21. Selesai

    Keterangan : pada kode diatas ada tanda pagar (#), tanda itu harus di ganti dengan URL yang mau di pasang.
    Contoh :



    <a class="ogah" onclick="showHide('ogahku1')">My Other Blog</a>
    <div id="ogahku1" class="hide">
    <a href="http://rubrik-elektronik.blogspot.com" class="ogahniye">Rubrik elektronik</a>>
    <a href="http://rohman-freeblogtemplate.blogspot.com" class="ogahniye">Free Blog Template</a>
    <a href="http://user-online.blogspot.com" class="ogahniye">User Online blog</a>
    <a href="http://contoh-blog.blogspot.com" class="ogahniye">D'Tree Menu</a>
    </div>

    Maka contoh hasilnya akan seperti ini, silahkan klik pada tombol menu untuk melihat reaksi yang di timbulkan :

    My Other Blog

    Jika di lihat dari reaksi menu ini yang bersifat membuka dan menekan isi yang ada di bawahnya, maka menu ini hanya cocok di simpan pada sidebar dan tidak cocok apabila di simpan pada header.

    Mudah-mudahan dapat di mengerti. Selamat mencoba !

    8 Juni 2007 - Posted by | aksesori blog, blog tutorial

    6 Komentar »

    1. Low bang….boleh kasih komentar khan..???

      Begini bang, menurut saya lebih baik kode Javascript berikut ini ditaruh diantara tag ]]></b:skin> dan tag </head>.

      <script>
      var last_expanded = ”;
      function showHide(id)
      {
      var obj = document.getElementById(id);
      var status = obj.className;
      if (status == ‘hide’) {
      if (last_expanded != ”) {
      var last_obj = document.getElementById(last_expanded);
      last_obj.className = ‘hide’;
      }
      obj.className = ‘show’;
      last_expanded = id;
      } else {
      obj.className = ‘hide’;
      }
      }

      </script>

      Tapi sebelum itu tag pembuka kode javascriptnya yaitu <script> di ganti menjadi seperti ini :

      <script type=’text/javascript’>
      //<![CDATA[

      Sedangkan untuk tag penutupnya di ganti menjadi seperti ini :
      //]]>
      </script>

      Jadi hasilnya adalah seperti ini :

      <script type=’text/javascript’>
      //<![CDATA[
      var last_expanded = ”;
      function showHide(id)
      {
      var obj = document.getElementById(id);
      var status = obj.className;
      if (status == ‘hide’) {
      if (last_expanded != ”) {
      var last_obj = document.getElementById(last_expanded);
      last_obj.className = ‘hide’;
      }
      obj.className = ‘show’;
      last_expanded = id;
      } else {
      obj.className = ‘hide’;
      }
      }
      //]]>
      </script>

      Nah, baru kode javascript yang keduanya baru ditambahakan di sidebar….

      Thank you….

      Komentar oleh Kevin Alfonzo | 11 Juni 2007 | Balas

    2. Terima kasih sobat kevin atas komentarnya. Memang banyak jalan menuju Rhoma (irama) kan he..he..Seperti yang saya katakan pada artikel diatas, silahkan saja untuk memodifikasi Javascript nya jika sobat emang familier dengan Java. Saya cuma memberi contoh saja, dan memang kode tersebut sudah saya coba serta hasilnya ya yg seperti diatas, bekerja dengan baik kalau menurut saya. Sekali lagi terima kasih, jika sobat lebih tahu silahkan untuk berbagi dengan kami.

      Komentar oleh rohman | 11 Juni 2007 | Balas

    3. Kembali kacih Bang…..:D

      Komentar oleh Kevin Alfonzo | 11 Juni 2007 | Balas

    4. iya koq, aq dengan mengikuti arahan dari mas rochman bisa tuch.
      Thx yach mas…

      Komentar oleh anyie_ku | 13 November 2007 | Balas

    5. minta script untuk buat icon disamping link diatas

      Komentar oleh sentral-info-gaul | 11 April 2008 | Balas

    6. gimana caranya bikin javascript expand/collapse isi postingan kita.
      plz send to yudhis_1st@yahoo.com
      or my blog is yudhiztira@blogspot.com

      Komentar oleh Yudhistira | 19 Juni 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: