Konfigurasi Dropdown Menu

Apabila kita banyak menu, label dan kategori, memang kita perlukan navigation horizontal menu yang ada sub menu yang mana kita boleh guna seperti yang selalu orang sebut dropdown menu.

Selalunya pada blog menu yang biasa ia akan diletakkan berada di atas post dengan keadaan yang mendatar atau horizontal. Dan bila kita nak gunakan dropdown menu untuk blogspot di tempat yang sama di mana diruangan 'Layout' kita akan buang 'Pages' yang disediakan pihak blogger blog (blogspot). Kita akan gantikan dengan skrip atau kod HTML/Javascript untuk dropdown menu. Perkara ini bagi sesetengah blogger yang tak biasa akan pening dengan skrip HTML ni.

Saya akan terangkan di bawah dan skrip ini anda boleh Copy & Paste pada blog anda. Dropdown menu ini saya telah perbaiki dari masa ke semasa hingga sekarang. Sebab apa, sebelum ni kod yang digunakan tiada masalah untuk digunakan pada blog biasa. Tetapi akan ada masalah bila terdapat pertembungan kod javascript yang lain contoh jika anda ada guna image slider. Saya adjust dan sekarang inshaAllah boleh guna bersama image slider jika blog anda telah gunakan fungsi slider image. Kod ini adalah untuk diletakkan di bahagian Layout (Add a Gadget).

Langkah pertama yang anda perlu lakukan adalah...

Salin kod di bawah :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
</script>
<script type="text/javascript">
  $(function() {
    //We initially hide the all dropdown menus
    $('#dropdown_nav li').find('.sub_nav').hide();

    //When hovering over the main nav link we find the dropdown menu to the corresponding link.
    $('#dropdown_nav li').hover(function() {
      //Find a child of 'this' with a class of .sub_nav and make the beauty fadeIn.
      $(this).find('.sub_nav').fadeIn(100);
    }
                                , function() {
                                  //Do the same again, only fadeOut this time.
                                  $(this).find('.sub_nav').fadeOut(50);
                                }
                               );
  }
   );
</script>
<style>
  #dropdown_nav a {
 font-family:Arial, Sans-Serif;
        font-size:12px;
        font-weight:bold;
        color:#fff;
        text-decoration:none;
      }
      #dropdown_nav {
        width:960px;
        padding:0px;
        display:inline-block;
        list-style:none;
        -moz-box-shadow:inset 0px 0px 1px #fff;
        -webkit-box-shadow:inset 0px 0px 1px #fff;
        border:1px solid #ffa800;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        background:#fbb803;
      }
 
      #dropdown_nav li {
  padding:10px 0px 10px 0px;
  float:left;
  position:0;
  display:inline-block;
      }
 
      #dropdown_nav li a {
        padding:10px 15px 10px 15px;
        text-shadow:-1px 1px 0px #000000;
        -moz-box-shadow:inset 0px 0px 1px #fff;
        -webkit-box-shadow:inset 0px 0px 1px #fff;
        border-right:1px solid #ffa800;
      }
      #dropdown_nav li a:hover {
        background:#fdd601;
      }
      #dropdown_nav li a:active {
        background:#fbb803;
      }
 
      #dropdown_nav li a.first {
        -moz-border-radius:5px 0px 0px 5px;
        -webkit-border-radius:5px 0px 0px 5px;
      }
      /*#dropdown_nav li a.last {
      -moz-border-radius:0px 5px 5px 0px;
      -webkit-border-radius:0px 5px 5px 0px;
    }
      */
 
      /* Sub-Nav styling */
      #dropdown_nav .sub_nav {
        width:160px;
        padding:0px;
        position:absolute;z-index: 400;">
        top:76px;
        left:0px;
        border:1px solid #ffa800;
        background:#fbb803;
      }
 
      #dropdown_nav .sub_nav li {
        width:160px;
        padding:0px;
      }
 
      #dropdown_nav .sub_nav li a {
        display:block;
        border-bottom:1px solid #ffa800;
      }
      #dropdown_nav .sub_nav li a:hover {
        background:#fdd601;
      }
      #dropdown_nav .sub_nav li a:active {
        background:#fbb803;
      }
</style>
<!-- Navigation Start -->
<ul id="dropdown_nav">
  <li><a class="first" href="http://j-reka.com/">Home</a></li>
  <li><a href="http://j-reka.com/search/label/laman2">Laman2</a><ul class="sub_nav"><li><a href="http://j-reka.com/search/label/label1">Label1</a></li><li><a href="http://j-reka.com/search/label/label2">Label2</a></li>
  <li><a href="http://j-reka.com/search/label/label3">Label3</a></li>
    <li><a href="http://j-reka.com/search/label/label4">Label4</a></li>
   </ul>
  </li>
  <li><a href="http://j-reka.com/search/label/laman3">Laman3</a>
  </li>
  <li><a href="http://j-reka.com/search/label/laman4">Laman4</a>
  </li>
  <li><a href="http://j-reka.com/p/how-to-order.html">How To Order</a>
  </li>
  <li><a href="http://j-reka.com/p/checkout.html">Checkout</a>
  </li>
  <li><a class="last" href="http://j-reka.com/p/contact-us.html">Contact Us</a>
  </li>
 </ul>

Teks yang saya tebalkan itu nilainya anda boleh ubah mengikut kesukaan anda. Seperti :
Yang bertanda # mewakili kod bagi warna. Anda boleh pilih warna kod di sini : http://www.j-reka.com/p/blog-page.html Ingat, bila pilih kod warna jangan lupa letak # diawal kod.

Teks yang berwarna merah anda boleh ubah mengikut kelebaran layout blog anda.

Teks yang berwarna biru tu anda tukar dengan url (link) blog anda dan tajuk/label halaman anda.

Teks yang berwarna coklat dan berwarna perang tu anda tukar dengan url (link) blog anda dan tajuk/label halaman anda. Cuma ia adalah contoh dimana pada laman itu ada lagi kategori atau sub menu. Jika anda ingin buat di halaman lain ia boleh disalin semula kemudian ubah kepada url page label yang anda telah buat.
*Yang berwarna coklat adalah menu utama.


Langkah kedua

Log in blogger.com --> Klik tajuk blog anda --> Klik 'Layout' --> Jika di atas Blog Post (Catatan Blog) terdapat Add a Gadget, klik Add a Gadget --> Klik HTML/Javascript --> Masukkan (paste) kod di atas.

*Jika di atas Blog Post ada 'Pages', anda boleh remove kerana drop down menu ini akan menggantikan 'Pages' biasa dari blogspot ini.

Klik 'View blog'

Selesai jika ia dapat berjalan dengan lancar dan dropdown menu berfungsi dengan baik.

Ok itu sahaja semoga berjaya...

*****

Takpe, jika tutorial ini masih membuatkan anda pening, upah je saya membuatkannya untuk anda. Hehehe..

Tak mahal untuk sesuatu yang penting buat blog anda. Cuma RM25 bagi pertama kali memasukkan kod untuk dropdown menu manakala tambahan RM10 sekali pada satu-satu masa buat memasuk dan mengaturkan link URL untuk dropdown menu jika ada penambahan di lain masa.

Saya perlu caj untuk berlaku adil ke atas kreativiti dan masa saya tambahan pula pelanggan yang sedang menunggu hasil kerja yang perlu saya siapkan untuk mereka kerana mereka telah mengeluarkan belanja juga.

Contoh pelanggan saya yang gunakan dropdown menu ada di sini : www.sherazcollection.blogspot.com 

Nama saya Hairizal Hamidon. Saya memulakan perniagaan berdaftar sejak tahun 2007. Saya membuat bisnes dari rumah dan lebih banyak tumpuan saya pada bisnes online. Kini saya lebih cenderung kepada pemasaran bisnes internet dan menyediakan servis buat blog dan web di J-REKA.COM.