• INFO DAFTAR CUG
  • WA:085200000285
  • PIN: D703CC94

cara membuat Menu Dropdown dengan JavaScript di blog - arminaven

 

Advertisement
Solusi Nelpon SMS Paket Internet Telkomsel Murah - KLIK DISINI

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 klik tombol di bawah untuk melihat demo :





Caranya silahkan arahkan mouse sobat ke deretan menu yang ada pada halaman demo 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 :

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 :

    http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif

    http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif


  • 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 ]]></b:skin>, 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.


    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.


    Agar tidak terlalu monoton, pada pembuatan dropdown kali ini akan saya beri sentuhan baru, yaitu pemakaian background yang berbeda. Jika pada postingan yang lalu saya memberikan contoh background banner seperti di bawah ini :







    Maka kali ini saya akan memberi contoh banner seperti ini :









    Dan contoh menu dropdown yang akan di bahas adalah seperti demo di bawah ini :





    Agar tidak terlalu menyita space halaman karena penuh dengan kata-kata yang membingungkan, kita langsung saja pada topik pembahasan. Untuk membuat menu dropdown pada template klasik, silahkan ikuti langkah-langkah berikut ini :

  • Langkah pertama adalah membuat tiga banner untuk background tulisan, banner ini bisa dibuat dengan program design & grafik semisal Adobe photoshop atau Corel Draw ataupun program-program lainya yang sejenis.


  • Langkah kedua adalah mengupload banner-banner yang telah sobat buat, salah satu contoh adalah dengan menggunakan jasa situs www.photobucket.com. Untuk cara menguploadnya saya sudah terangkan, jika belum faham silahkan klik di sini. Saya ambil contoh, banner yang telah saya upload mempunyai URL address sebagai berikut :

    http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif

    http://i162.photobucket.com/albums/t253/rohman24/bannerjava5.gif

    http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif


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

    3. Klik menu Edit HTML

    4. Copy seluruh kode template lalu paste pada program notepad, ini untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting kode template

    5. Tambahkan kode berikut di bawah kode <head> dan sebelum kode </head>, atau jika ingin lebih mudah simpan di bawah kode <title><$BlogPageTitle$></title> :



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



    7. Masukan kode berikut diatas kode ]]></b:skin>



    8. .raden{
      background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif');
      text-align:center;
      width:175px;
      font-family: georgia, Helvetica, sans-serif;
      padding-left:5px;
      padding-right:5px;
      padding-top:5px;
      padding-bottom: 5px;
      display:block;
      text-decoration: none;
      color: #F6E151;
      }

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

      .ogahniye{
      background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif');
      text-align:center;
      width:175px;
      font-family: georgia, Helvetica, sans-serif;
      padding-left:5px;
      padding-right:5px;
      padding-top:8px;
      padding-bottom: 5px;
      display:block;
      text-decoration: none;
      color: #0572FA;
      height: 18px;
      }

      .hide{
      display: none;
      }

      .show{
      display: block;
      }


      a{cursor: hand}



    9. Masukan kode berikut di sidebar blog sobat, dimana saja sesuai dengan keinginan sobat :



    10. <a class="raden"><font size="5"><b>Navigasi</b></font></a>

      <a class="ogah" onclick="showHide('ogahku1')">Blog Tutorial</a>

      <div id="ogahku1" class="hide">

      <a href="http://kolom-tutorial.blogspot.com/2007/04/bikin-blog.html" class="ogahniye">Membuat blog</a>

      <a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-link-1.html" class="ogahniye">Membuat link</a>

      <a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-marquee.html" class="ogahniye">Membuar marquee</a>


      <a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-icon-yahoo-messenger.html" class="ogahniye">Icon YM</a>

      </div>

      <a class="ogah" onclick="showHide('ogahku2')">Aksesori blog</a>

      <div id="ogahku2" class="hide">

      <a href="http://kolom-tutorial.blogspot.com/2007/04/yahoo-messenger-emoticons.html" class="ogahniye">Yahoo ! Emoticons</a>

      <a href="http://kolom-tutorial.blogspot.com/2007/04/blogger-emoticons.html" class="ogahniye">Blogger Emoticons</a>

      <a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-jam-blog-di-sidebar.html" class="ogahniye">Pasang jam</a>

      <a href="http://kolom-tutorial.blogspot.com/2007/05/ada-video-di-artikel.html" class="ogahniye">Pasang Video</a>

      </div>

      <a class="ogah" onclick="showHide('ogahku3')">My Other Blog</a>

      <div id="ogahku3" 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://contoh-blog.blogspot.com/" class="ogahniye">Blog Menu D'tree</a>

      <a href="http://kolom-authorized.blogspot.com/" class="ogahniye">Authorize service</a>

      </div>

      <a class="ogah" onclick="showHide('ogahku4')">Links Temanku</a>

      <div id="ogahku4" class="hide">

      <a href="http://free-7.blogspot.com/" target="_blank" class="ogahniye">Free 7</a>

      <a href="http://jaloee.blogspot.com/" target="_blank" class="ogahniye">Jaloee</a>

      <a href="http://sundajava.blogspot.com/" target="_blank" class="ogahniye">Liezmaya</a>

      <a href="http://anangku.blogspot.com/" target="_blank" class="ogahniye">Anang</a>

      </div>






    11. Klik tombol Preview untuk melihat perubahan yang baru di buat

    12. Jika sudah OK, klik tombol Save Changes Template
    13. Selesai.


    Keterangan kode-kode diatas :

    • kode di bawah ini adalah kode untuk mengaktifkan tombol yg di klik, jadi jangan di rubah! kecuali jika obat sudah familier dengan Javascript dan bisa membuat variasi baru dari kode ini :


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



    • Kode-kode di bawah ini, nilainya harus di sesuaikan dengan kondisi blog sobat :



    • .raden
      --> .raden hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk enyertakan dot ( . ) diepan kata yang di buat.

      background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif');
      --> ini adalah gambar background untuk tulisan yang saya buat yaitu sebuah ombol.

      text-align:center;
      --> kode untuk membuat tulisan berada di tengah, bisa diganti dengan kata Left untuk sebelah kiri, dan right untuk sebelah kanan.

      width:90%;
      --> lebar dari tombol adalah sebesar 90% dari besarnya space sidebar dimana tombol ini di tempatkan, silahkan ganti nilainya dan sesuaikan dengan ukuran blog sobat.

      font-family: georgia, Helvetica, sans-serif;
      --> Font (jenis hurup) yang dipilih adalah jenis georgia, ini bisa diganti dengan jenis huruf lainnya semisal verdana dan lain-lain.

      padding-left:5px;
      --> batas (jarak) tulisan sebesar 5px dari tepi kiri tombol,nilai ini bisa di rubah sesuai keinginan sobat.

      padding-right:5px;
      --> batas (jarak) tulisan sebesar 5px dari tepi kanan tombol,nilai ini bisa di rubah sesuai keinginan sobat.

      padding-top:5px;
      --> batas (jarak) tulisan sebesar 5px dari tepi atas tombol,nilai ini bisa di rubah sesuai keinginan sobat.

      padding-bottom: 5px;
      --> batas (jarak) tulisan sebesar 5px dari tepi bawah tombol,nilai ini bisa di rubah sesuai keinginan sobat.

      display:block;
      --> block berarti ditampilkan,jadi jangan dirubah.

      text-decoration: none;
      --> Tidak ada tek dekorasi. Sebaiknya jangan di rubah.

      color: #F6E151;
      --> Pemilihan warna, bisa dirubah kode warnanya sesuai dengan keinginan sobat.



      .ogah
      --> .ogah hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk menyertakan dot ( . ) didepan kata yang di buat.



      .ogahniye
      --> .ogahniye lagi-lagi hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk menyertakan dot ( . ) didepan kata yang di buat.



      .hide
      display: none;
      --> Pendifinisian untuk .hide disembunyikan (tidak tampil).



      .show
      display: block;
      --> Pendifinisian untuk .show ditampilkan.



      a{cursor: hand}
      Agar gambar mouse berubah jadi gambar tangan ketika berada di atas tombol.


    • Kode yang saya berikan diatas memuat links yang saya miliki, jadi links tersebuat harus di rubah dengan links milik sobat.



    Mudah-mudahan keterangan di atas sudah jelas. Selamat mencoba !


    Hosting Indonesia
    belajar komputer

    sumber: http://www.krtutorplus.com/2007/06/menu-dropdown-dengan-javascript.html

    DAFTAR CUG SEKARANG | KLIK DISINI

    cara membuat Menu Dropdown dengan JavaScript di blog - arminaven 4.5 5 Unknown cara membuat Menu Dropdown dengan JavaScript di blog - arminaven Bagi sobat yang suka akan pernak-pernik blog, ada kabar baik nih. Pada kesempatan kali ini saya akan membahas tentang cara membuat menu Dro...


    Tidak ada komentar:

    Posting Komentar

    1.Jangan lupa koment yah kawan,untuk mempererat silaturrahim, NO CAPTCHA berkomentarnya.
    2.Silahkan kawan becanda,asal dengan etika.
    3.Komentar Dengan Moderasi untuk menghindari SPAMMER. Yang mau pasang Link,gunakan NAME/URL. Link LIVE otomatis terhapus
    4. Yang gak punya akun maka silahkan berkomentar sebagai "Anonim"
    5.Gunakan media komentar ini sebagai sarana saran, masukan serta request :)
    6.Terimakasih kunjungan dan komentarnya kawan,Mohon maaf jika belum bisa berkunjung balik

    J-Theme