Senin, 23 November 2009

Cara Membuat Menu Dropdown Sederhana



Yang terakhir yang telah memperkenalkan sebuah menu drop-down cukup bagus tapi tidak tahu bagaimana menerapkan di Blogger. Setelah mempelajari menu saya melihat komposisi semacam ini cukup kompleks, cukup sulit untuk menulis instruksi harus memiliki beberapa komponen dan menyesuaikan CSS, hasil seperti ini:

Pertama, Anda memasukkan kode berikut langsung di bawah atau di atas:

<div id = <body> 'outer-wrapper'>

<link href='http://dl.dropbox.com/u/11103024/menu.css' media='screen' rel='stylesheet' type='text/css'/>
<b:section id='menu' maxwidgets='1' showaddelement='no'>

<b:widget id='HTML91' locked='false' title='Menu' type='HTML'/>
</b:section>

Kode di atas akan menambahkan Javascript / HTML blog baru Anda, kembali ke elemen dimasukkan ke dalam halaman dan menjaga utilitas ini:
Kode 

<ul class="menu">
<li class="no_drop"><a href="#">Home</a></li>
<li><a href="#" class="drop">1 Column</a>
<div class="dropdown_1column">
<div class="col_1">
<ul>
<li><a href="#"> FreelanceSwitch </a></li>
<li><a href="#"> Creattica </a></li>
<li><a href="#"> WorkAwesome </a></li>
<li><a href="#"> Mac Apps </a></li>
<li><a href="#"> Web Apps </a></li>
<li><a href="#"> NetTuts </a></li>
<li><a href="#"> Design </a></li>
<li><a href="#"> Logo </a></li>
<li><a href="#"> Flash </a></li>
<li><a href="#"> Illustration </a></li>
<li><a href="#"> More... </a></li>
</ul>
</div></div></li>

<li><a href="#" class="drop">2 columns</a>
<div class="dropdown_2columns">

<div class="col_1">
<h3>Some Links</h3>
<ul>
<li><a href="#"> ThemeForest </a></li>
<li><a href="#"> GraphicRiver </a></li>
<li><a href="#"> ActiveDen </a></li>
</ul>
</div>

<div class="col_1">
<h3>Useful Links</h3>
<ul>
<li><a href="#"> NetTuts </a></li>
<li><a href="#"> VectorTuts </a></li>
<li><a href="#"> PsdTuts </a></li>
</ul>
</div>

<div class="col_1">
<h3>Other Stuff</h3>
<ul>
<li><a href="#"> FreelanceSwitch </a></li>
<li><a href="#"> Creattica </a></li>
<li><a href="#"> WorkAwesome </a></li>
</ul>
</div>

<div class="col_1">
<h3>Misc</h3>
<ul>
<li><a href="#"> Design </a></li>
<li><a href="#"> Logo </a></li>
<li><a href="#"> Flash </a></li>
</ul>
</div></div></li></ul>

Simpan dan hasilnya.

Kembali  ke atas </ b: skin> pada template untuk mengedit. Untuk warna merah bisa anda sesuaikan sesuai kebutuhan. dan jangan lupa untuk menghapus biru.