Sunday, April 22, 2012

Cara Membuat Drop Down Menu

pada posting kali ini say akan menjelaskan tentang bagaimana membuat drop down menu pada template anda. Salah satu penggunaannya untuk mempermudah navigasi pada blog ,dan dapat juga untuk menghiasi blog agar tampilan lebih bagus.

cara nya pun cukup simple, tidak perlu pengetahuan lebih...hehe

1. Yang pasti login dulu ke blogger kita,Dashboard>Desain>Page Elemen
2.Pilih gadget HTML/JavaScript
3. Copy dan paste kode yang ada di bawah :

<div id='ebtnavbar'>
      <ul id='ebtnav'>
        <li>
          <a href='#'>Home</a>
</li>         <li>
          <a href='#'>About</a>
</li>         <li>
          <a href='#'>Contact</a>
</li>   <li>
           <a href='#'>Sitemap</a>
           <ul>
                <li><a href='#'>Sub Page #1</a></li>
                <li><a href='#'>Sub Page #2</a></li>
                <li><a href='#'>Sub Page #3</a></li>
              </ul>
</li>
      </ul>
    </div>

4. Ganti # dengan Link Page Blog dan teks dalam huruf tebal dengan nama halaman. Dan kode yang berwarna hijau adalah kode yang membuat drop down menu. Kita dapat copy dan paste tepat sebelum </ span> di bawah tab yang kita suka.

Untuk menambahkan tab lain, cukup paste kode berikut tepat di atas </ ul>:

<li>
          <a href='#'>Tab Name</a>
</li>

5. Simpan gadget tersebut  
6. Sekarang masuk ke "Design" > "Edit HTML"
7. Backup dulu template, untuk berjaga-jaga, dan cari kode :

]]></b:skin>

8. Copy dan paste  kode dibawah, tepat diatas kode diatas :

/*----- EBT Drop Down Menu ----*/
#ebtnavbar {
    background: #060505;
    width: 960px;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;
}
9. Lalu simpan template

Dan lihat hasilnya..:D
 

Comments
8 Comments

8 komentar:

Tolong di kasih contoh dong. ! :)) Dan menu dropdown ini cocok/ fix dgn template blogku ini ? fandan20.blogspot.com

emang mas, kadang ada blog berbeda codenya..
kasoh contoh apanya mas??mlah bingung akunya..

@mirah anugraheny : terima kasih sudah berkunjung mbak..okee saya sudah mampir mbak..:D

Terimakasih atas sharing ilmunya Gan, postingan ini singkat namun jelas mudah dipahami. Salam sukses.

terima kasih juga sudah berkunjung mas...:D

kl sitemap itu isi dari keseluruhan blog om, contoh : http://gratisant.blogspot.com/p/sitemap.html

eemmm kurang cocok nih drop downnya dgn tampilan blogku .hehehe

 

Followers

Labels