mas template

Membuat Menu Drop Down di Blogspot

Kemarin saya ditanya oleh seorang temen, apa itu menu drop down dan bagaimana cara membuatnya. Perlu teman-teman semua ketahui menu drop down adalah menu horisontal yang terdapat di bawah header blog. Dan apabila mouse kita letakkan ke salah satu menu tersebut akan muncul sub menu yang susunannya ke bawah. yang tentunya menu yang berkaitan Ah... pokoknya gitulah menurut pengertian saya. Untuk lebih jelasnya temen-temen semua dapat lihat disini. Bagaimana menarik kan?


Untuk cara membuatnya, saya akan jelaskan satu persatu, perhatikan baik-baik ya..........
1.  Cari kode berikut ]]></b:skin>
2.  Lalu letakkan kode berikut ini.
#navdropdownmenu{
background:#99C9FF url(http://lh3.ggpht.com/_FnaS8cIU2Yw/Sfx5s4I_f9I/AAAAAAAAACc/z5BMLSJUVlQ/s800/navbar.gif) repeat-x top;
width:700px;
height:auto;
margin:0;
padding:0;
border-top: 1px solid #AFAFAF;
border-bottom: 1px solid #FFFFFF;
}
#navdropdownmenu ul{
float:left;
list-style:none;
margin:0;
padding:0;
}
#navdropdownmenu li{
list-style:none;
float:left;
}
#navdropdownmenu li a, #navdropdownmenu li a:link, #navdropdownmenu li a:visited{
color:#000000;
font-weight:bold;
display:block;
text-shadow: 0px 1px 1px #fff;
padding:9px 10px 9px 10px;
font-size: 12px;
font-family: verdana;
text-decoration:none;
}
#navdropdownmenu li a:hover{
background:#9f9f9f;
color:#ffffff;
}
#navdropdownmenu li ul{
z-index:10;
position:absolute;
height:auto;
width:200px;
visibility:hidden;
}
#navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{
float:none;
background:#99C9FF url(http://lh3.ggpht.com/_FnaS8cIU2Yw/Sfx5s4I_f9I/AAAAAAAAACc/z5BMLSJUVlQ/s800/navbar.gif) repeat-x top;
width:200px;
border-width:1px;
border-style:solid;
border-color:#575757;
}
#navdropdownmenu li ul li a:hover{
background:#000000;
color:#ffffff;
}
#navdropdownmenu li:hover ul{
left:auto;
visibility:visible;
}
Oya,. jika anda telah menggunakan navigasi menu yang biasa, hapuslah semua kode CSS dari navigasi menu tersebut.

3.  Cari kode yang mirip dengan kode dibawah.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='It's a Hardlife' type='Header'/>
</b:section>
</div>
4.  Dibawahnya, ketikkan kode berikut.
<div id='navdropdownmenu'>
<ul id='navdropdownmenu'>
<li><a href='http://wongsuruh.blogspot.com/search?max-results=1000'>Daftar Isi</a></li>
<li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Norah Jones</a>
<ul>
<li><a href='#'>Don&#39;t Know Why</a></li>
<li><a href='#'>Feelin The Same Way</a></li>
<li><a href='#'>Come Away With Me</a></li>
</ul>
</li>
<li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Sting</a>
<ul>
<li><a href='#'>Englishman In Newyork</a></li>
<li><a href='#'>Shape Of My Heart</a></li>
<li><a href='#'>Fields Of Gold</a></li>
<li><a href='#'>If I Ever Lose My Faith In You</a></li>
<li><a href='#'>Fragile</a></li>
<li><a href='#'>Desert Rose</a></li>
</ul>
</li>
<li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Sade</a>
<ul>
<li><a href='#'>Smooth Operator</a></li>
<li><a href='#'>Kiss Of Life</a></li>
<li><a href='#'>Your Love Is King</a></li>
</ul>
</li>
<li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Alanis</a>
<ul>
<li><a href='#'>That I Would Be Good</a></li>
<li><a href='#'>Front Row</a></li>
<li><a href='#'>One</a></li>
</ul>
</li>
<li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Meja</a>
<ul>
<li><a href='#'>Dindi</a></li>
<li><a href='#'>Venus</a></li>
<li><a href='#'>Red Light</a></li>
<li><a href='#'>The One</a></li>
<li><a href='#'>Circle Game</a></li>
<li><a href='#'>Aqua de Beber</a></li>
</ul>
</li>
</ul>
</div>

Gantilah tulisan http://wongsuruh.blogspot.com dengan link yang anda inginkan dengan url yang anda inginkan. Anda bisa menambah atau mengurangi jumlah kode tersebut.

5.  Klik Simpan Template.

6.  Lihat hasilnya.


Gampang bukan, jika ada yang mau ditanyakan isi aja kotak komentar yang ada di bawah, saya akan berusaha menjawabnya.

Semoga bermanfaat......
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

29 comments:

  1. langkah Nomor 3 kok saya belum ngarti ya mas?
    bagian "header-wrapper" kok ndak ada.
    trus kalo itu dimasukin kan ntar jadine ada
    "div" 2 numpuk.
    kaya gini:
    """"
    """"
    (tanpa spasi)
    emang gitu ya?
    Maaf ini saya masih pemula banget, mohon bimbingannya mas... :)

    ReplyDelete
  2. @Ardy:Kalo nggak ada div id='header-wrapper' cari header-inner kalo masih tetep nggak bisa coba anda ganti template yang ada div id='header
    itu disini juga berlaku sama jika mau membuat multi level drop down. Jangan menyerah kalo ada apa apa bisa langsung tanya ke saya, siapa tahu dapat membantu. Makasih....

    ReplyDelete
  3. @:Untuk cara membuatnya, saya akan jelaskan satu persatu, perhatikan baik-baik ya..........
    1. Cari kode berikut ]]> .

    Nah dari langkah pertama dah bingung gan.. carinya dimana gan? kok gak dijelaskan masuknya kemana dulu terus buka anu, terus anu anu. setelah gt cari kode ini. mgkin lebih mudah dimengerti gan. maklum msh katrok abizzz gan..

    ReplyDelete
  4. @anonymous:
    Maaf kalo di layar agan nggak tampil, baik saya lengkapi disini kode itu adalah ]]>.
    Untuk seterusnya agan bisa ikuti langkah selanjutnya.
    Jika masih belum jelas jangan sungkan2 untuk tanya kembali.
    Makasih komentnya gan. Sukses selalu

    ReplyDelete
  5. hehehe koment said lucu gan...

    maaf ya said.. yang ditulis maskolis udah benar kok...

    cuman saya masih mau minta tolong ni maskolis. dropdown yang kedua kok kotaknya terpotong cara agar bisa sama dengan yang lainnya gimana ya.. ?
    mohon bantuannya terimakasih.. tetap semangat blognya sangat membantu bagi pemula seperti saya.

    ReplyDelete
  6. Sangat membantu sekali untuk para blogger yg sedang mempercantik tampilan blognya,, thanks,,

    ReplyDelete
  7. bagus sekali infonya, thanks.
    sekalian mau tanya, kalau di dalam menu tadi ada sub menu, apa kah caranya sama ? atau harus revisi code lagi? misal di sub menu Fragile, ada 2 sub menu lagi:
    Fragile --> New version
    Fragile --> Old version

    Makasih sebelumnya

    ReplyDelete
  8. @Easy job:
    Untuk membuat multi level drop down seperti itu, silahkan baca tutorialnya disini

    ReplyDelete
  9. saat melewati slide maka menu tersebut tidak dapat di sentuh..

    kenapa yach..

    ReplyDelete
  10. Assalamualaikum mas kolis, bagaimana cara menggunakan menu yang telah didownload dari apycom.com

    ReplyDelete
  11. mas kolis. hari ini ada yg aneh dgn dropdown menuku. template dari blog ku kudownload lalu kuupload di blog lain. tapi kok menjadi tidak fungsi dropdownnya. Mengapa bisa spt itu mas?

    ReplyDelete
  12. kok hasilnya tidak sama seperti padagambar ya?
    hanya berbentuk menu yang terus turun kebawah

    ReplyDelete
  13. Mas Kolis kalau buat menu dropdown pada template yang seperti web ini http://maskolis.com tu gimana caranya, trims
    Bambang Ponorogo

    ReplyDelete
  14. wah,terimakasih maskolis cara membuat menu dropdown horizontal sangat bagus,saya langsung praktekkan.

    ReplyDelete
  15. maaf mau tanya kalau menu drop nya bercabang bisa kah jadi di dalam menu drop ada menu drop lg

    tolong pencerahanya ^^

    levpc69@yahoo.com < email makasih masss hehee

    ReplyDelete
  16. script no 2 di simpan di atas ]]> atau di bawah ]]> ??? jelaskan yaa :D

    ReplyDelete
  17. maaf mas , kalo di template bawaan saya udah ada menu drop down nya , gimana cara ganti nya .. dihapus dulu atau gimana cara nya ? tolong bantuan nya .. masih belajar :)

    ReplyDelete
  18. Itu bisa gk nyesuaikan dengan tamplatenya?

    ReplyDelete
  19. mas sy sdh aplikasikan template Jhony See Book Sekali ke blog saya yang menjadi pertanyaan untuk mengisi Menu dan Sub Menu nya gimana ya.. apa harus buat halaman baru sesuai Menu dan Sub Menu nya atau edit di HTML nya .. mohon pencerahan lebih rinci beserta tutorialnya, terima kasih.

    ReplyDelete
  20. mas kholis tanya...
    gimna caranya me linkkan menu dropdown ke satu halaman posing. jadinya judul didropdown akan sama di judul postingannya..?

    ReplyDelete
    Replies
    1. ok sudah bisa mas ternyata setelah tanda "/" hehe..maklum newbii

      Delete


  21. thanx ya gan atas info nya semoga sukses selalu blog nya gan :)
    dan sukses selalu gan info nya :)

    PROMOSI
    HOT PROMO DARI RAJAPOKER88 di

    http://www.rajapoker88.com/?ref=577053


    Untuk member setia rajapoker88 dapatkan bonus referal dari kami sebesar 10% dari kemenangan teman Referal anda dan dapatkan juga 10 POINT setiap turn over 1 juta rupiah point ini akan di undi setiap 1 minggu sekali

    peringatan: untuk bonus selalu di bagikan setiap hari senin
    dan untuk batas mengklaim bonus setiap hari minggu selama 7 hari
    jika batas mengklaim bonus lewat dari seminggu maka bonus dinyatakan hangus!!

    keterangan lebih lanjut untuk mengklaim bonus silakan hubungi :
    YM: afb88_cs1@yahoo.com
    YM: idr.afb88@yahoo.com
    pin bb : 2257e32b

    segera bergabung dengan kami dan kumpulkan pointnya.
    Terima Kasih.

    Permainan yang kami sediakan yaitu :
    * Poker
    * Tangkas
    * Domino99

    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK BRI, BANK MANDIRI, DAN BANK DANAMON.

    Untuk keterangan lebih lanjut, silahkan Hubungi kami di :
    * WWW.RAJAPOKER88.COM (pingbox)
    * TWITTER : @RAJAPOKER88
    * YM : RAJAPOKER88.indo
    * PIN BB : 75CB33AF
    * PHONE NUM : (+84) 169 859 6613
    * SKYPE : RajaPoker88

    Terima Kasih,
    Salam Rajapoker88.com

    ReplyDelete
  22. tq gan atas infonya & sukses selalu gan :)


    PROMOSI

    hello semua para coment gan gan :)
    ayo bergabung bersama kami di website www.senang77.com
    cara mendapatkan uang dengan mudah gabunglah bersama kami..
    kami juga menyediakan bonus turn over 0.3% dan akan di bagikan dalam

    1 minggu dan balance akan masuk kedalam secara otomatisnya


    WWW.senang77.COM
    PENDAFTARAN
    http://senang77.com/Register000.aspx

    Kami juga menyediakan kode referral :)

    http://www.senangpoker.com/?ref=859522

    kami bisa dihunbungi melalui :

    YM : cs.senangpoker@yahoo.com
    FACEBOOK : cs.senangpoker@yahoo.com
    BBM : 764a99d1
    Twitter : senangpoker
    SKYPE : senang.poker


    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK

    BRI, BANK MANDIRI, DAN BANK DANAMON.


    TERIMA KASIH
    salam manis :) senang77.com / senang77.net / senang77.info :)

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger