Latest Movie :
SELAMAT DATANG DAN SLAMAT MEMBACA BLOG SAYA YANG SEDERHANA INI santun saya PUJANGGA HINA

membuat dropdown menu

Membuat Drop Down Menu


Drop-Down Menu
Membuat Drop Down Menu - Drop Down Menu memang sangat populer dan sangat dibutuhkan pada saat ini. Jika di blog anda terdapat banyak link dan bingung untuk menaruhnya dimana. Nah, Drop-Down Menu adalah jawabannya. Drop Down Menu yang bagus dan indah ini dibuat full CSS tanpa JS (JavaScript). Sehingga anda tidak perlu khawatir jika loading blog anda lambat. Saya telah menerapkan hasil Drop Down Menu ini di blog saya yang satunya. Silahkan lihat hasilnya :



Langkah untuk membuat Drop-Down Menu :

1. Login ke blogger.com
2. Masuk ke menu Rancangan (Design) dan pilih Edit HTML
3. Centang Expand Widget Template
4. Cari kode
< head>
5. Masukkan kode berikut dibawah kode

<blockquote>
<div style="text-align: justify;">
<link href="http://dl.dropbox.com/u/11103024/menu.css" media="screen" rel="stylesheet" type="text/css"></link>
<b:section id="menu" maxwidgets="1" showaddelement="no">
<b:widget id="HTML91" locked="false" title="Menu" type="HTML">
</b:widget></b:section></div>
</blockquote>
<blockquote>

Kode diatas berfungsi untuk membuat sebuah JavaScript/HTML di Elemen Laman.
6. Klik  Simpan Template 
7. Masuk ke Elemen Laman
8. Cari Elemen Laman yang bernama Menu, kemudian klik Edit. Lihat Screenshoot !
Elemen Laman
(Klik Untuk Memperbesar)
9. Masukkan kode dibawah ini
<blockquote>
<ul class="menu">
<li class="no_drop">Home</li>
<li>1 Column
<div class="dropdown_1column">

<div class="col_1">

<ul>
<li><a href="#">budi 1</a></li>
<li><a href="#">budi 2</a></li>
<li><a href="#">budi 3</a></li>
<li><a href="#">budi 4</a></li>
<li><a href="#">budi 5</a></li>
<li><a href="#">budi 6</a></li>
<li><a href="#">budi 7</a></li>
<li><a href="#">budi 8</a></li>
<li><a href="#">budi 9</a></li>
<li><a href="#">More...</a></li>
</ul>

</div>
</div>
</li>
<li>2 columns
<div class="dropdown_2columns">


<div class="col_1">

<h3>
  budi 10</h3>

<ul>
<li><a href="#">budi 11</a></li>
<li><a href="#">budi 12</a></li>
<li><a href="#">budi 13</a></li>
</ul>

</div>


<div class="col_1">

<h3>
  Totto 14</h3>

<ul>
<li><a href="#">budi 15</a></li>
<li><a href="#">budi 16</a></li>
<li><a href="#">budi 17</a></li>
</ul>

</div>


<div class="col_1">

<h3>
  budi 18</h3>

<ul>
<li><a href="#">budi 19</a></li>
<li><a href="#">budi 20</a></li>
<li><a href="#">budi 21</a></li>
</ul>

</div>


<div class="col_1">

<h3>
  Totto 22</h3>

<ul>
<li><a href="#">budi 23</a></li>
<li><a href="#">budi 24</a></li>
<li><a href="#">budi 25</a></li>
</ul>

</div>
</div>
</li>
</ul>
</blockquote>
<blockquote>
Ganti kode # dengan URL tujuan. Ganti budi1,budi 2, budi 3, budi.. dengan anchor teks dari URL tersebut. 10. Kemudian Klik  Simpan 

Mudah bukan ? Sebenarnya semua hal tidak terlalu sulit seperti yang kita bayangkan. Baik, jika anda merasa ada kesulitan atau apapun. Silahkan tulis di kotak komentar dibawah ini. Semoga berhasil
Share this article :

Post a Comment

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. mari berkreasi - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger