Ad 468 X 60

Senin, April 15, 2013

Cara Membuat Menu Dropdown List di Blogspot

Posted By Unknown , Senin, April 15, 2013 Be the first to comment!
Contohnya :
Menu dropdown tersebut menggunakan sedikit tambahan pada bagian style CSS, menggunakan efek melengkung (perhatikan ujung-ujung menu, terlihat tidak membentuk siku). Lalu, cara menambahkannya ke blog susah tidak ? tentunya tidak sulit, kali ini kita hanya perlu memasukan 1 script ke TEMPLATE dan 1 script lagi ke bagian menu TATA LETAK.

Berikut saya perjelas langkah-langkahnya !
 1. Login ke www.blogger.com menggunakan akun blog anda.
2. Buka menu TEMPLATE, pilih EDIT HTML
3. Cari kode ]]></b:skin> (Gunakan CTRL+F untuk memudahkan pencarian)
4. Setelah ketemu, masukan kode dibawah ini tepat di atas kode ]]></b:skin> 
#DropdownMenu {
    background:#f0f0f0;
border-radius:6px;
    width: 880px;
    height: 35px;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    color:#FFFFFF;
    font-weight: bold;
    margin-bottom: 35px;
    padding: 4px;


} 
#Dropdownbox {
    width: 875px;
border-radius:6px;
    float: left;
    margin: 0;
    padding: 0;
}

#strike { 
border-radius:6px;
    margin: 0;
    padding: 0;
}
#strike ul {
border-radius:6px;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#strike li {
border-radius:6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
#strike li a, #strike li a:link, #strike li a:visited {
border-radius:6px;
    color:#000000;
    display: block;
    font-size: 16px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    margin: 0;
    padding: 9px 15px 8px;
}
#strike li a:hover, #strike li a:active {
border-radius:6px;
    background:#000000;
    color:#00FFFF;
    margin: 0;
    padding: 9px 15px 8px;
    text-decoration: none;
}
#strike li li a, #strike li li a:link, #strike li li a:visited {
border-radius:6px;
      background:#000000;
    width: 150px;
    color:#00FFFF;
    font-size: 14px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    float: none;
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
}
#strike li li a:hover, #strike li li a:active {
border-radius:6px;
     background:#000000;
    color:#00FFFF;
    padding: 7px 10px;
}
#strike li {
border-radius:6px;
    float: left;
    padding: 0;
}
#strike li ul {
border-radius:6px;
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0;
    padding: 0;
}
#strike li ul a {
border-radius:6px;
    width: 140px;
}
#strike li ul ul {
border-radius:6px;
    margin: -32px 0 0 171px;
}
#strike li:hover ul ul, #strike li:hover ul ul ul, #strike li.sfhover ul ul, #strike li.sfhover ul ul ul {
border-radius:6px;
    left: -999em;
}
#strike li:hover ul, #strike li li:hover ul, #strike li li li:hover ul, #strike li.sfhover ul, #strike li li.sfhover ul, #strike li li li.sfhover ul {
border-radius:6px;
    left: auto;
}
#strike li:hover, #strike li.sfhover {
border-radius:6px;
    position: static;
5. Untuk kode yang di beri warna merah dan putih itu merupakan kode warna. Anda bisa mengganti warna background dan tulisan dari menu yang akan anda buat. Untuk kode #ff6803 itu adalah warna orange, yang menjadi warna background dari menu ini, silahkan anda ganti bila memang perlu. Lalu untuk kode #FFFFFF yang di dalam kotak berwarna putih, itu adalah untuk warna tulisan dalam menu.. Silahkan anda ganti bila memang diperlukan. Bila anda kesulitan untuk menentukan kode warna, silahkan cari disni Kode HTML warna.
6. Bila sudah, silahkan SIMPAN template anda
7. Sekarang kita menuju menu TATA LETAK
8. pilih TAMBAH GADGET/ADD GADGET lalu cari HTML/JAVA SCRIPT
9. Letakan script html di bawah ini di kolom yang disediakan. (Ingat, untuk kolom judul gadget tidak perlu diisi)

<div id="DropdownMenu">
  <div id="Dropdownbox">
 <ul id="strike">
   <li><a href="http://azhariian.blogspot.com/">Home</a></li>
   <li>
     <a href="http://azhariian.blogspot.com/search/label/Chord%20Gitar">Chord Gitar</a>
     <ul>
       <li>
         <a href="http://azhariian.blogspot.com/search/label/Reggae">Reggae</a>
   </li></ul>
   </li><li><a href="http://azhariian.blogspot.com/search/label/Blogspot">Tutorial Blog</a></li>
   <li><a href="http://azhariian.blogspot.com/p/blog-page.html">About Me</a></li>
</ul></div>
</div>

10. Anda bisa mengganti Menu1, Menu 2 dan yang lain dengan nama menu yang anda inginkan dan untuk kode "#" itu adalah alamat link dari menu yang anda buat. Sengaja saya beri tanda # agar tidak menuju halaman apapaun, silahkan anda ganti dengan alamat link yang anda inginkan.

11. Bila sudah klik SIMPAN, dan lihat perubahannya pada blog anda.

From : Digital Areas

Get Free Email Updates Daily!
Label: ,

0 komentar:

Langganan: Posting Komentar (Atom)