Menu
 
» » Mega Drop Down Menu For Blogger

A+ A-
Mega Drop Down Menu adalah menu terbaik untuk situs / blog yang memiliki banyak item navigasi atau link, hal ini dapat membantu pembaca situs/blog Anda untuk menemukan kategori apapun dengan mudah dan menavigasi melalui situs Anda.
Mungkin perlu Anda ketahui juga dalam pembuatan Mega Drop Down Menu For Blogger ini menggunakan bantuan dari CSS dan jQuery.

Mega Drop Down Menu yang dirancang oleh codrops dan saya telah menyempunakan Menu ini agar bekerja lebih baik dan sempurna. Untuk mengunstal Mega Drop Down Menu For Blogger saya memberikan dua cara di antaranya:
  • A. Hanya Menambahkah Gadget (Tanpa Edit HTML)
  • B. Dengan Cara Edit HTML.
Sebelum saya memabahas Cara memasang Mega Drop Down Menu For Blogger ini lebih baik Anda lihat dulu priviewnya dengan cara menekan tombol berikut.


Cara memasang Mega Drop Down Menu For Blogger

Seperti yang saya bilang di atas Mega Drop Down Menu For Blogger ini telah saya sempurnakan Agar bekerja lebih baik dan sempurna dan disini saya telah membuat dua cara pemasangan yang lebih sempurna, silahkan Anda pilih salah satu yang mana Anda rasa lebih baik.
  • A. Hanya Menambahkah Gadget (Tanpa Edit HTML)
  • B. Dengan Cara Edit HTML.

A. Hanya Menambahkah Gadget (Tanpa Edit HTML)

1. Masuk ke Akun blogger Anda.

2. Pada Dabor klick Tata Letak Tambah Gadget ➨ Pilih elemen HTML/Java Script.

3. Penempatan Gadget tersebut seperti gambar berikut.


4. Sekarang copy kode berikut ini dan paste atau letakkan di elemen HTML/Java Script tadi.



/*----  Mega Drop Down Menu by Oto Website ----*/

<style> ul.ldd_menu {
    margin: 0px;
    padding: 0;
    display: block;
    height: 50px;
    background-color: #D04528;
    list-style: none;
    font-family: "Trebuchet MS", sans-serif;
    border-top: 1px solid #EF593B;
    border-bottom: 1px solid #EF593B;
    border-left: 10px solid #D04528;
    -moz-box-shadow: 0px 3px 4px #591E12;
    -webkit-box-shadow: 0px 3px 4px #591E12;
    -box-shadow: 0px 3px 4px #591E12;
}

ul.ldd_menu a {
    text-decoration: none;
}

ul.ldd_menu > li {
    float: left;
    position: relative;
}

ul.ldd_menu > li > span {
    float: left;
    color: #fff;
    background-color: #D04528;
    height: 50px;
    line-height: 50px;
    cursor: default;
    padding: 0px 20px;
    text-shadow: 0px 0px 1px #fff;
    border-right: 1px solid #DF7B61;
    border-left: 1px solid #C44D37;
}

ul.ldd_menu .ldd_submenu {
    position: absolute;
    top: 50px;
    width: 550px;
    display: none;
    opacity: 0.95;
    left: 0px;
    font-size: 10px;
    background: #C34328;
    border-top: 1px solid #EF593B;
    -moz-box-shadow: 0px 3px 4px #591E12 inset;
    -webkit-box-shadow: 0px 3px 4px #591E12 inset;
    -box-shadow: 0px 3px 4px #591E12 inset;
}

a.ldd_subfoot {
    background-color: #f0f0f0;
    color: #444;
    display: block;
    clear: both;
    padding: 15px 20px;
    text-transform: uppercase;
    font-family: Arial, serif;
    font-size: 12px;
    text-shadow: 0px 0px 1px #fff;
    -moz-box-shadow: 0px 0px 2px #777 inset;
    -webkit-box-shadow: 0px 0px 2px #777 inset;
    -box-shadow: 0px 0px 2px #777 inset;
}

ul.ldd_menu ul {
    list-style: none;
    float: left;
    border-left: 1px solid #DF7B61;
    margin: 20px 0px 10px 30px;
    padding: 10px;
}

li.ldd_heading {
    font-family: Georgia, serif;
    font-size: 13px;
    font-style: italic;
    color: #FFB39F;
    text-shadow: 0px 0px 1px #B03E23;
    padding: 0px 0px 10px 0px;
}

ul.ldd_menu ul li a {
    font-family: Arial, serif;
    font-size: 10px;
    line-height: 20px;
    color: #fff;
    padding: 1px 3px;
}

ul.ldd_menu ul li a:hover {
    -moz-box-shadow: 0px 0px 2px #333;
    -webkit-box-shadow: 0px 0px 2px #333;
    box-shadow: 0px 0px 2px #333;
    background: #AF412B;
} </style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        /**
         * the menu
         */
        var $menu = $('#ldd_menu');

        /**
         * for each list element,
         * we show the submenu when hovering and
         * expand the span element (title) to 510px
         */
        $menu.children('li').each(function () {
            var $this = $(this);
            var $span = $this.children('span');
            $span.data('width', $span.width());

            $this.bind('mouseenter', function () {
                $menu.find('.ldd_submenu').stop(true, true).hide();
                $span.stop().animate({
                    'width': '510px'
                }, 300, function () {
                    $this.find('.ldd_submenu').slideDown(300);
                });
            }).bind('mouseleave', function () {
                $this.find('.ldd_submenu').stop(true, true).hide();
                $span.stop().animate({
                    'width': $span.data('width') + 'px'
                }, 300);
            });
        });
    });
</script>

<ul id="ldd_menu" class="ldd_menu">
 <li>
 <span>Vacations</span>
 <!-- Increases to 510px in width-->
 <div class="ldd_submenu">
  <ul>
   <li class="ldd_heading">By Location</li>
   <li><a href="#">South America</a></li>
   <li><a href="#">Antartica</a></li>
   <li><a href="#">Africa</a></li>
   <li><a href="#">Asia and Australia</a></li>
   <li><a href="#">Europe</a></li>
  </ul>
  <ul>
   <li class="ldd_heading">By Category</li>
   <li><a href="#">Sun & Beach</a></li>
   <li><a href="#">Adventure</a></li>
   <li><a href="#">Science & Education</a></li>
   <li><a href="#">Extreme Sports</a></li>
   <li><a href="#">Relaxing</a></li>
   <li><a href="#">Spa and Wellness</a></li>
  </ul>
  <ul>
   <li class="ldd_heading">By Theme</li>
   <li><a href="#">Paradise Islands</a></li>
   <li><a href="#">Cruises & Boat Trips</a></li>
   <li><a href="#">Wild Animals & Safaris</a></li>
   <li><a href="#">Nature Pure</a></li>
   <li><a href="#">Helping others & For Hope</a></li>
   <li><a href="#">Diving</a></li>
  </ul>
  <a class="ldd_subfoot" href="#"> + New Deals</a>
 </div>
 </li>
 <li>
 <span>Equipment</span>
 <div class="ldd_submenu">
  <ul>
   <li class="ldd_heading">By Location</li>
   <li><a href="#">South America</a></li>
   <li><a href="#">Antartica</a></li>
   <li><a href="#">Africa</a></li>
   <li><a href="#">Asia and Australia</a></li>
   <li><a href="#">Europe</a></li>
  </ul>
  <ul>
   <li class="ldd_heading">By Category</li>
   <li><a href="#">Sun & Beach</a></li>
   <li><a href="#">Adventure</a></li>
   <li><a href="#">Science & Education</a></li>
   <li><a href="#">Extreme Sports</a></li>
   <li><a href="#">Relaxing</a></li>
   <li><a href="#">Spa and Wellness</a></li>
  </ul>
  <ul>
   <li class="ldd_heading">By Theme</li>
   <li><a href="#">Paradise Islands</a></li>
   <li><a href="#">Cruises & Boat Trips</a></li>
   <li><a href="#">Wild Animals & Safaris</a></li>
   <li><a href="#">Nature Pure</a></li>
   <li><a href="#">Helping others & For Hope</a></li>
   <li><a href="#">Diving</a></li>
  </ul>
  <a class="ldd_subfoot" href="#"> + New Deals</a>
 </div>
 </li>
 <li>
 <span>Locations</span>
 <div class="ldd_submenu">
  <ul>
   <li class="ldd_heading">By Location</li>
   <li><a href="#">South America</a></li>
   <li><a href="#">Antartica</a></li>
   <li><a href="#">Africa</a></li>
   <li><a href="#">Asia and Australia</a></li>
   <li><a href="#">Europe</a></li>
  </ul>
  <ul>
   <li class="ldd_heading">By Category</li>
   <li><a href="#">Sun & Beach</a></li>
   <li><a href="#">Adventure</a></li>
   <li><a href="#">Science & Education</a></li>
   <li><a href="#">Extreme Sports</a></li>
   <li><a href="#">Relaxing</a></li>
   <li><a href="#">Spa and Wellness</a></li>
  </ul>
  <ul>
   <li class="ldd_heading">By Theme</li>
   <li><a href="#">Paradise Islands</a></li>
   <li><a href="#">Cruises & Boat Trips</a></li>
   <li><a href="#">Wild Animals & Safaris</a></li>
   <li><a href="#">Nature Pure</a></li>
   <li><a href="#">Helping others & For Hope</a></li>
   <li><a href="#">Diving</a></li>
  </ul>
  <a class="ldd_subfoot" href="#"> + New Deals</a>
 </div>
 </li>
</ul>


Untuk memasukkan link/url ganti semua tanda # dengan url/link tujuan Anda.
Untuk mengganti nama menu Anda ganti teks menu South America dan seterusnya dengan nama menu Anda sendiri.

5. Simpan.

Sekarang Anda bisa lihat sendiri hasilnya. Jika tidak suka dengan cara ini silahkan gunakan cara kedua berikut.

B. Dengan Cara Edit HTML.

Jika kurang suka dengan cara di atas Anda bisa menggunakan cara ini, di cara ini Anda di wajibkan untuk Edit HTML atau menambahkan elemen kedalam template, Caranya:

1. Login ke akun blogger Anda.

2. Pada Dasbor klick Template ➨ Edit HTML

3. Centang Expand Template Widget ➨ Backup dulu templatenya untuk mengantisipasi bila terjadi kesalahan.

4. Selanjutnya dalam Edit Template Anda cari kode ]]></b:skin> atau <style> Bila kesulitan mencarinya coba lihat Cara Cepat Mencari Kode HTML.

5. Bila sudah ketemu sekarang Anda copy kode berikut dan paste atau letakkan di atas kode tadi.



/*----  Mega Drop Down Menu by Oto Website ----*/
ul.ldd_menu{
        z-index:999;
 margin:0px;
 padding:0;
 display:block;
 height:50px;
 background-color:#D04528;
 list-style:none;
 font-family:"Trebuchet MS", sans-serif;
 border-top:1px solid #EF593B;
 border-bottom:1px solid #EF593B;
 border-left:10px solid #D04528;
 -moz-box-shadow:0px 3px 4px #591E12;
 -webkit-box-shadow:0px 3px 4px #591E12;
 -box-shadow:0px 3px 4px #591E12;
}
ul.ldd_menu a{
 text-decoration:none;
}
ul.ldd_menu > li{

 float:left;
 position:relative;
}
ul.ldd_menu > li > span{
        z-index:999;
 float:left;
 color:#fff;
 background-color:#D04528;
 height:50px;
 line-height:50px;
 cursor:default;
 padding:0px 20px;
 text-shadow:0px 0px 1px #fff;
 border-right:1px solid #DF7B61;
 border-left:1px solid #C44D37;
}
ul.ldd_menu .ldd_submenu{
        z-index:999;
 position:absolute;
 top:50px;
 width:550px;
 display:none;
 opacity:0.95;
 left:0px;
 font-size:10px;
 background: #C34328;
 border-top:1px solid #EF593B;
 -moz-box-shadow:0px 3px 4px #591E12 inset;
 -webkit-box-shadow:0px 3px 4px #591E12 inset;
 -box-shadow:0px 3px 4px #591E12 inset;
}
a.ldd_subfoot{
        z-index:999;
 background-color:#f0f0f0;
 color:#444;
 display:block;
 clear:both;
 padding:15px 20px;
 text-transform:uppercase;
 font-family: Arial, serif;
 font-size:12px;
 text-shadow:0px 0px 1px #fff;
 -moz-box-shadow:0px 0px 2px #777 inset;
 -webkit-box-shadow:0px 0px 2px #777 inset;
 -box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul{

 list-style:none;
 float:left;
 border-left:1px solid #DF7B61;
 margin:20px 0px 10px 30px;
 padding:10px;
}
li.ldd_heading{

 font-family: Georgia, serif;
 font-size: 13px;
 font-style: italic;
 color:#FFB39F;
 text-shadow:0px 0px 1px #B03E23;
 padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{

 font-family: Arial, serif;
 font-size:10px;
 line-height:20px;
 color:#fff;
 padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
 -moz-box-shadow:0px 0px 2px #333;
 -webkit-box-shadow:0px 0px 2px #333;
 box-shadow:0px 0px 2px #333;
 background:#AF412B;
}


6. Selanjutnya cari kode </head> dan letakkan kode berikut ini tepat di bawahnya.


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
        <script type='text/javascript'>
            $(function() {
    /**
     * the menu
     */
    var $menu = $('#ldd_menu');
 
    /**
     * for each list element,
     * we show the submenu when hovering and
     * expand the span element (title) to 510px
     */
    $menu.children('li').each(function(){
     var $this = $(this);
     var $span = $this.children('span');
     $span.data('width',$span.width());
   
     $this.bind('mouseenter',function(){
      $menu.find('.ldd_submenu').stop(true,true).hide();
      $span.stop().animate({'width':'510px'},300,function(){
       $this.find('.ldd_submenu').slideDown(300);
      });
     }).bind('mouseleave',function(){
      $this.find('.ldd_submenu').stop(true,true).hide();
      $span.stop().animate({'width':$span.data('width')+'px'},300);
     });
    });
            });
        </script>

7. Masih dalam Edit HTML langkah selanjutnya cari kode <div id='footer-wrapper'> atau <div id='content-wrapper'> lalu letakkan kode berikut ini tepat di bawahnya.
Setiap template berbeda-beda jika Anda tidak menemukan salah satu kode di atas coba Anda cari kode yang mirip dengan kode tersebut.




<ul class='ldd_menu' id='ldd_menu'>
    <li>
     <span>Vacations</span><!-- Increases to 510px in width-->
     <div class='ldd_submenu'>
      <ul>
       <li class='ldd_heading'>By Location</li>
       <li><a href='#'>South America</a></li>
       <li><a href='#'>Antartica</a></li>
       <li><a href='#'>Africa</a></li>
       <li><a href='#'>Asia and Australia</a></li>
       <li><a href='#'>Europe</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Category</li>
       <li><a href='#'>Sun & Beach</a></li>
       <li><a href='#'>Adventure</a></li>
       <li><a href='#'>Science & Education</a></li>
       <li><a href='#'>Extreme Sports</a></li>
       <li><a href='#'>Relaxing</a></li>
       <li><a href='#'>Spa and Wellness</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Theme</li>
       <li><a href='#'>Paradise Islands</a></li>
       <li><a href='#'>Cruises & Boat Trips</a></li>
       <li><a href='#'>Wild Animals & Safaris</a></li>
       <li><a href='#'>Nature Pure</a></li>
       <li><a href='#'>Helping others & For Hope</a></li>
       <li><a href='#'>Diving</a></li>
      </ul>
      <a class='ldd_subfoot' href='#'> + New Deals</a>
     </div>
    </li>
    <li>
     <span>Equipment</span>
     <div class='ldd_submenu'>
      <ul>
       <li class='ldd_heading'>By Location</li>
       <li><a href='#'>South America</a></li>
       <li><a href='#'>Antartica</a></li>
       <li><a href='#'>Africa</a></li>
       <li><a href='#'>Asia and Australia</a></li>
       <li><a href='#'>Europe</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Category</li>
       <li><a href='#'>Sun & Beach</a></li>
       <li><a href='#'>Adventure</a></li>
       <li><a href='#'>Science & Education</a></li>
       <li><a href='#'>Extreme Sports</a></li>
       <li><a href='#'>Relaxing</a></li>
       <li><a href='#'>Spa and Wellness</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Theme</li>
       <li><a href='#'>Paradise Islands</a></li>
       <li><a href='#'>Cruises & Boat Trips</a></li>
       <li><a href='#'>Wild Animals & Safaris</a></li>
       <li><a href='#'>Nature Pure</a></li>
       <li><a href='#'>Helping others & For Hope</a></li>
       <li><a href='#'>Diving</a></li>
      </ul>
      <a class='ldd_subfoot' href='#'> + New Deals</a>
     </div>
    </li>
    <li>
     <span>Locations</span>
     <div class='ldd_submenu'>
      <ul>
       <li class='ldd_heading'>By Location</li>
       <li><a href='#'>South America</a></li>
       <li><a href='#'>Antartica</a></li>
       <li><a href='#'>Africa</a></li>
       <li><a href='#'>Asia and Australia</a></li>
       <li><a href='#'>Europe</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Category</li>
       <li><a href='#'>Sun & Beach</a></li>
       <li><a href='#'>Adventure</a></li>
       <li><a href='#'>Science & Education</a></li>
       <li><a href='#'>Extreme Sports</a></li>
       <li><a href='#'>Relaxing</a></li>
       <li><a href='#'>Spa and Wellness</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Theme</li>
       <li><a href='#'>Paradise Islands</a></li>
       <li><a href='#'>Cruises & Boat Trips</a></li>
       <li><a href='#'>Wild Animals & Safaris</a></li>
       <li><a href='#'>Nature Pure</a></li>
       <li><a href='#'>Helping others & For Hope</a></li>
       <li><a href='#'>Diving</a></li>
      </ul>
      <a class='ldd_subfoot' href='#'> + New Deals</a>

   </div>
    </li>
    <li>
     <span>Tourists</span>
     <div class='ldd_submenu'>
      <ul>
       <li class='ldd_heading'>By Download</li>
       <li><a href='#'>South America</a></li>
       <li><a href='#'>Antartica</a></li>
       <li><a href='#'>Africa</a></li>
       <li><a href='#'>Asia and Australia</a></li>
       <li><a href='#'>Europe</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Category</li>
       <li><a href='#'>Sun & Beach</a></li>
       <li><a href='#'>Adventure</a></li>
       <li><a href='#'>Science & Education</a></li>
       <li><a href='#'>Extreme Sports</a></li>
       <li><a href='#'>Relaxing</a></li>
       <li><a href='#'>Spa and Wellness</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Theme</li>
       <li><a href='#'>Paradise Islands</a></li>
       <li><a href='#'>Cruises & Boat Trips</a></li>
       <li><a href='#'>Wild Animals & Safaris</a></li>
       <li><a href='#'>Nature Pure</a></li>
       <li><a href='#'>Helping others & For Hope</a></li>
       <li><a href='#'>Diving</a></li>
      </ul>
      <a class='ldd_subfoot' href='#'> + New Deals</a>
     </div>
    </li>
   </ul>



Untuk memasukkan link/url ganti semua tanda # dengan url/link tujuan Anda.
Untuk mengganti nama menu Anda ganti teks menu South America dan seterusnya dengan nama menu Anda sendiri.

8. Simpan template.

Sekarang bisa Anda lihat hasilnya!

Sekian untuk tutorial Mega Drop Down Menu For Blogger saya harap Anda suka dengan menu kali ini.

Silahkan tinggalkan tanggapan atau komentar Anda tentang postingan atau article di atas.
Diposting oleh
Label:

Share to:

di 05.19

Posting Komentar Blogger Disqus

  1. Mandala Putra16 Agustus 2012 pukul 05.45

    Keren-keren :)

    BalasHapus
  2. alkautsar20 Mei 2013 pukul 12.56

    Mantap mantap mas brooooooooo
    mantap betolll
    I did it @ my website

    http://alhabibi89.blogspot.com/

    tq tq tq

    BalasHapus
  3. Unknown10 April 2015 pukul 11.31

    makasih bayank buat tutornya,, snagat bermanfaat sekali..

    http://goo.gl/6nQN9m

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".
Konversi Kode di Sini! Daftar Member Aktif

Langganan: Posting Komentar (Atom)
 
Top