March 5, 2013

Membuat Menu Dropdown Horizontal Melayang Di Blog

Siang sob, kali ini saya mau sedikit share mengenai tampilan menu dropdown melayang seperti yang ada di blog saya ini.

Ada yang tertarik??? kalo ada, maka tepat sekali kalau membaca postingan kali ini, kalo tidak tertarik ya ga papa juga sih silahkan baca-baca yang lain, atau mau meresapi tulisan ini juga ga masalah, hehehe...
 


Ok, langsung aja sob , kita mulai ujian praktek nya :

1. Login ke blogger.



2. Pilih Template - Edit HTML.



3. Untuk mengantisipasi kesalahan silahkan backup dulu template dengan klik "Cadangkan/Pulihkan"

3. Jangan lupa centang dulu "Expand Template Widget".

4.Masukkan kode berikut ini dibawah kode <div id='header-wrapper'> :

<li><a href='/'><span>Homepage</span></a></li>
<li><a href='http://aiizahh.blogspot.com/' target='_blank'><span>Menu 1</span>Tanpa Sub Menu</a></li>

<li><a class='arrow' href='#'><span>Menu 2</span>Dengan Sub Menu</a>
<ul>
<li><a href='http://aiizahh.blogspot.com/' target='_blank'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='http://aiizahh.blogspot.com/' target='_blank'>Sub Menu 2</a></li>
<li class='hr'/>
</ul>
</li>

<li><a class='arrow' href='#'><span>Menu 3</span>Dengan Sub Menu</a>
<ul>
<li><a href='http://aiizahh.blogspot.com/' target='_blank'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='http://aiizahh.blogspot.com/' target='_blank'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='http://aiizahh.blogspot.com/' target='_blank'>Sub Menu 3</a></li>
<li class='hr'/>
</ul>
</li>

5. Simpan Template.

6. Enjoy.


*Keterangan :
-  Kode merah merupakan link dari menu/sub menu tersebut.
-  Kode biru merupakan nama menu bagian atas.
-  Kode hijau nama menu bagian bawah, kosongkan bila tidak ingi 2 baris nama.
-  Kode kuning merupakan sub menu silahkan ganti link, nama sub menu sesuai keinginan anda.
-  Kode coklat merupakan kode untuk membuat menu dengan sub menu nya tidak perlu diubah.
-  Silahkan tambahkan menu dan sub menu nya sesuai kebutuhan

Ok, gimana sob??? Udah pada selesai bikin, hehehe...

Terima kasih, semoga bermanfaat.

11 comments

  1. Keren Bro. tapi kira2 berat gk diblog?

    Oh ya sob, ditunggu followbacknya

    ReplyDelete
    Replies
    1. ga berat sob...
      btw, dah saya follback yah...

      Delete
  2. gan ..Follback ya gan....ma kasih..mohon kerja samanya..!!! :D

    ReplyDelete
    Replies
    1. =p* follback apa gan, agan follow aja belum masa dah bilang minta follback??? 7:(

      Delete
  3. Artikel yang sangat bermanfaat, ..mantap, Eitss jngn lupa daftar di sini ya AutoTraffic Exchange dan SEO Killer

    ReplyDelete