Hanya arsip

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

Menu Dropdown dengan JavaScript (2)

Melanjutkan Postingan kemarin lusa yaitu tentang membuat menu dropdown dengan JavaScript. Pada postingan yang lalu telah di bahas tentang membuat menu dropdown pada template baru, maka pada postingan kali ini akan di bahas mengenai cara pembuatan pada template klasik.

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 di bawah, silahkan sobat
arahkan mouse sobat pada banner menu lalu klik untuk melihat submenu yang terdapat di dalam nya :

Navigasi
Menu utama 1

Link 1 di sini
Link 2 di sini
Link 3 di sini
Link 4 di sini

Menu utama 2

Link 1 di sini
Link 2 di sini
Link 3 di sini
Link 4 di sini

Menu utama 3

Link 1 di sini
Link 2 di sini
Link 3 di sini
Link 4 di sini

Menu utama 4

Link 1 di sini
Link 2 di sini
Link 3 di sini
Link 4 di sini

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. Atau jika sobat seperti saya yakni tidak mempunyai daya kreasi yang tinggi untuk menciptakan bentuk-bentuk banner yang menarik, maka sobat bisa menggunakan software Banner Maker, dengan software Banner Maker akan sangat mudah sekali karena pada software tersebut sudah
    tersedia puluhan bentuk banner yang menarik, kita tinggal pilih mana yang kita suka dan hanya memberikan sedikit sentuhan seni saja untuk merubahnya agar lebih menarik. Dimana kita bisa mendapatkan software Banner Maker ? (iklan dulu nih) Untuk mendapatkannya, sobat bisa mendapatkannya di situs www.ObralPlus.com, dengan harga yang sangat murah hanya Rp25.000 saja kita sudah mendapatkannya, dan tidak hanya software itu saja yang kita dapatkan tapi masih puluhan software serta ebook yang sangat berharga. Jika tertarik silahkan klik di sini.
  • 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 :

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

    6. Masukan kode berikut sesudah kode <style type="text/css">, dan sebelum kode
      </style>, dimana saja yang penting di antara kode tersebut :


      7. .raden{
      background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif');
      text-align:center;
      width:90%;
      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:90%;
      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:90%;
      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}

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



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

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

    9. Jika sudah OK, klik tombol Save Changes Template
    10. 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.
    • Hasil dari pembuatan kode diatas adalah seperti di bawah ini, silahkan sobat arahkan mouse ke gambar tombol menu, dan kemudian klik untuk melihat submenu yang terdap didalamnya :

    Navigasi

    Blog Tutorial

    Membuat blog

    Membuat link

    Membuar marquee

    Memasang Icon YM

    Aksesori blog

    Yahoo ! Emoticons

    Blogger Emoticons

    Pasang jam

    Pasang Video

    My Other Blog

    Rubrik Elektronik

    Free Blog Template

    Blog Menu D’tree

    Authorize service

    Links Temanku

    Free 7

    Jaloee

    Liezmaya

    Anang

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

    10 Juni 2007 - Posted by | blog tutorial, menu dropdown

    3 Komentar »

    1. jkhjkk

      Komentar oleh pranoto | 1 Oktober 2007 | Balas

    2. mas saya gokoolnaruto…….
      salam kenal……
      saya baru belajar wordpress nih
      saya ingin jago kaya mas
      mohon bantuanya ya………
      ^_^

      Komentar oleh Anonymous | 1 November 2007 | Balas

    3. sangat bagus sekali

      Komentar oleh MORODADI | 27 Februari 2008 | Balas


    Tinggalkan Balasan ke Anonymous Batalkan balasan

    « Sebelumnya | Berikutnya »