Friday, December 14, 2012

Cara membuat menu drop down pada blogspot

10:13 AM  Unknown  No comments

Cara membuat menu drop down pada blogspot


menu-dropdownKetika sebuah blog tumbuh menjadi besar, maka semakin banyak pula menu dan link yang dibutuhkan. Jika kebetulan thema yang disediakan tidak mendukung, maka kita sendiri yang akan kebingungan dalam meletakan menu-menu tadi. Memang bisa kita mengganti thema kembali tetapi konsekuensinya kita harus melakukan setting ulang terhadap thema tersebut. Salah satu alternatif agar kita tidak perlu mengganti thema adalah dengan membuat menu drop down. Menu drop down merupakan menu tersembunyi di menu utama dan akan muncul ketika kita mengklik menu utama tadi atau hanya meletakan kursor di menu utama tadi. Bagaimana cara membuat menu drop down tadi ? Berikut ulasannya.
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.
Drop-Down-Menu
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 <body>
  5. Masukkan kode berikut dibawah kode <body>
<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>
  1. Kode diatas berfungsi untuk membuat sebuah JavaScript/HTML di Elemen Laman.
  2. Klik  Simpan Template
  3. Masuk ke Elemen Laman Menu, kemudian klik Edit. Lihat Screenshoot !
             Elemen-Laman
      9.  Masukkan kode dibawah ini

<ul>
<li><a href=”">Home</a></li>
<li><a href=”#”>1 Column</a>
<div>
<div>
<ul>
<li><a href=”#”>Totto 1</a></li>
<li><a href=”#”>Totto 2</a></li>
<li><a href=”#”>Totto 3</a></li>
<li><a href=”#”>Totto 4</a></li>
<li><a href=”#”>Totto 5</a></li>
<li><a href=”#”>Totto 6</a></li>
<li><a href=”#”>Totto 7</a></li>
<li><a href=”#”>Totto 8</a></li>
<li><a href=”#”>Totto 9</a></li>
<li><a href=”#”>More…</a></li>
</ul>
</div></div></li>
<li><a href=”#”>2 columns</a>
<div>
<div>
<h3>Totto 10</h3>
<ul>
<li><a href=”#”>Totto 11</a></li>
<li><a href=”#”>Totto 12</a></li>
<li><a href=”#”>Totto 13</a></li>
</ul>
</div>
<div>
<h3>Totto 14</h3>
<ul>
<li><a href=”#”>Totto 15</a></li>
<li><a href=”#”>Totto 16</a></li>
<li><a href=”#”>Totto 17</a></li>
</ul>
</div>
<div>
<h3>Totto 18</h3>
<ul>
<li><a href=”#”>Totto 19</a></li>
<li><a href=”#”>Totto 20</a></li>
<li><a href=”#”>Totto 21</a></li>
</ul>
</div>
<div>
<h3>Totto 22</h3>
<ul>
<li><a href=”#”>Totto 23</a></li>
<li><a href=”#”>Totto 24</a></li>
<li><a href=”#”>Totto 25</a></li>
</ul>
</div></div></li></ul>

Ganti kode # dengan URL tujuan. Ganti Totto 1, Totto 2, Totto 3, Totto… dengan anchor teks dari URL tersebut.
Kemudian Klik  Simpan Mudah bukan ? Sebenarnya semua hal tidak terlalu sulit seperti yang kita bayangkan.

Kategori : ,
Bookmark and Share
Artikel yang berhubungan :


0 comments:

Post a Comment

MULTI TAB 1

VIDEO

MULTI TAB 2

HTML

MULTI TAB 3

MULTI TAB 4

MULTI TAB 5



MULTI TAB 6

Entri Populer

MULTI TAB 7


MULTI TAB 9

Buku Tamu

MULTI TAB 10

Daftar Blog Saya

Search




 
KEMBALI KEATAS
') }else{document.write('') } }