Cara Membuat Menu Horizontal Dropdown di Blogspot --- Assalamualaikum, Kesempatan Kali Ini saya akan membagikan cara membuat/menambahkan Menu Horizontal Dropdown di blog kita. Fungsinya menurut saya adalah selain mempercantik blog, menu ini juga sebagai pelengkap blog kita dan sebagai fasilitas untuk mempermudah pengunjung menjelajahi blog kita. okey kita langsung saja lihat contohnya pada gambar di bawah atau lihat menu horizontal yang saya gunakan


Rzdown7|membuat menu hrozontal, menu dropdown blog, menu sedrhana, menu dibawah header blogspot, menu halaman|Cara Membuat Menu Horizontal Dropdown di Blogspot


Cara Membuat Menu Horizontal Dropdown di Blogspot sbb :
1. Masuk dulu ke akun blogger anda
2. Setelah berada di Dashboard Klik Design --> Edit HTML
3. Backup Dulu Template anda dengan mengKlik Download Full Template
(Terserah anda Ya atau Tidak.tapi lebih baik Ya)
3. Centang Expand Template Widget
4. Cari Kode ]]></b:skin> 
5. Copy-Paste Kode CSS dibawah tepat Di Atas ]]></b:skin>
#subnavbar {
                background: #ffffff;
                width: auto;
                height: 26px;
                color: #FFF;
                margin: 0;
                padding: 0;
    }
    #subnav {
                margin: 0;
                padding: 0;
    }
    #subnav ul {
                float: left;
                list-style: none;
                margin: 0;
                padding: 0;
    }
    #subnav li {
                list-style: none;
                margin: 0;
                padding: 0;
    }
    #subnav li a, #subnav li a:link, #subnav li a:visited {
                color: #000000;
                display: block;
                font-size: 11px;
                font-weight: bold;
                text-transform: uppercase;
                margin: 0 5px 0 0;
                padding: 6px 13px;
    }
    #subnav li a:hover, #subnav li a:active {
                background: #888;
                color: #FFF;
                display: block;
                text-decoration: none;
                margin: 0 5px 0 0;
                padding: 6px 13px;
    }
    #subnav li li a, #subnav li li a:link, #subnav li li a:visited {
                background: #666;
                width: 140px;
                float: none;
                margin: 0;
                padding: 6px 10px;
                border-bottom: 1px solid #FFF;
                border-left: 1px solid #FFF;
                border-right: 1px solid #FFF;
    }
    #subnav li li a:hover, #subnav li li a:active {
                background: #888;
                margin: 0;
                padding: 6px 10px;
    }
    #subnav li {
                float: left;
                padding: 0;
    }
    #subnav li ul {
                z-index: 9999;
                position: absolute;
                left: -999em;
                height: auto;
                width: 160px;
                margin: 0;
                padding: 0;
    }
    #subnav li ul a {
                width: 140px;
    }
    #subnav li ul ul {
                margin: -25px 0 0 161px;
    }
    #subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
                left: -999em;
    }
    #subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
                left: auto;
    }
    #subnav li:hover, #subnav li.sfhover {
                position: static;
    }
 
6. Setelah Itu Cari Kode <b:widget id='Header1' locked='true'
Contoh :
<b:section class='art-header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='RezDown7 (Header)' type='Header'/>
</b:section>
7. Copy-Paste Kode HTML yang tersedia dibawah ini tepat di bawah kode </b:section> jika ingin menempatkan Di Bawah Header, Jika ingin menempatkan di atas header paste kode di bawah ini tepat Di Atas kode <b:section class='art-header' id='header' maxwidgets='1' showaddelement='no'>

<div id='subnavbar'>
<ul id='subnav'>
<span style='font-weight: bold; text-shadow: 3px 3px 3px rgb(204, 204, 204);'>
<li>
<a href='http://rezdown7.blogspot.com/'>Home</a>
<ul>
<li>
<a href='http://rezdown7.blogspot.com/p/kode-warna-html.html'>HomePage</a>
</li>
</ul>
</li>
<li>
<a href='http://rezdown7.blogspot.com/search/label/Movie'>Download Movie</a>
</li>
<li>
<a href='http://rezdown7.blogspot.com/p/mp3.html'>Download Mp3</a>
<ul>
<li>
<a href='http://rezdown7.blogspot.com/search/label/Lagu%20indo.'>Lagu Indo.</a>
</li>
<li>
<a href='http://rezdown7.blogspot.com/search/label/Mp3%20Barat'>Religi</a>
</li>
<li>
<a href='http://rezdown7.blogspot.com/search/label/Mp3%20Barat'>Western</a>
</li>
</ul></li>
<li>
<a href='http://rezdown7.blogspot.com/p/software.html'>Download Software</a>
<ul>
<li>
<a href='http://rezdown7.blogspot.com/search/label/Software%20%28Tools%29'>Tools</a>
</li>
<li>
<a href='http://rezdown7.blogspot.com/search/label/Software%20%28Security%29'>Security</a>
</li>
<li>
<a href='http://rezdown7.blogspot.com/search/label/Software%20%28Multimedia%20n%20Design%29'>Multimedia n Desaign</a>
</li>
<li>
<a href='http://rezdown7.blogspot.com/search/label/Software%20%28Musik%29'>Musik</a>
</li>
<li>
<a href='http://rezdown7.blogspot.com/search/label/Software%20%28Intrenet%29'>Internet</a>
</li>
<li>
<a href='http://rezdown7.blogspot.com/search/label/Drivers'>Drivers</a>
</li>
<li>
<a href='#'>Utilities</a>
</li>
</ul></li>
<li>
<a href='http://rezdown7.blogspot.com/p/terima-kasih-telah-berkunjung-pilihan.html'>Artikel n Tutorial</a>
<ul>
<li>
<a href='http://rezdown7.blogspot.com/search/label/Tutorial'>Tutorial</a>
</li><ul>
<li>
<a href='http://rezdown7.blogspot.com/search/label/blogger'>Blogspot</a>
</li></ul>
<li>
<a href='http://rezdown7.blogspot.com/search/label/Artikel'>Artikel</a>
</li>
<li>
<a href='http://rezdown7.blogspot.com/search/label/Islami'>Islami</a>
</li><li>
<a href='http://rezdown7.blogspot.com/search/label/NusantarQ'>NusantaraQ</a>
</li><li>
<a href='News|http://rezdown7.blogspot.com/search/label/News'>Indo. News</a>
</li></ul></li>
<li>
<a href='http://rezdown7.blogspot.com/p/tv-online_26.html'>Tv Online</a>
<ul>
<li>
<a href='http://rezdown7.blogspot.com/2007/07/tv-one.html'>Tv One</a>
</li>
<li>
<a href='http://rezdown7.blogspot.com/2007/07/antv.html'>Antv</a>
</li>
<li>
<a href='http://rezdown7.blogspot.com/2010/12/tv-islam.html'>Tv Islam</a>
</li>
<li>
<a href='http://rezdown7.blogspot.com/2007/07/live-tv.html'>Mivo.Tv</a>
</li>
<li>
<a href='http://rezdown7.blogspot.com/2007/07/indowebtv.html'>Indoweb.Tv</a>
</li>
</ul></li>
<li>
<a href='http://rezdown7.blogspot.com/p/buku-tamu.html'>PlayList</a>
</li><li>
<a href='http://rezdown7.blogspot.com/p/daftar-isi.html'>Daftar Isi</a>
</li>
<li>
<a href='http://rezdown7.blogspot.com/2011/01/tukaran-link-n-banner.html'><b>Link Exchange</b></a>
</li></span></ul></div>
Note : Untuk Link dan Judul silahkan diganti sesuai blog anda
Merah = Link/Url
Biru = Judul/Nama

63 komentar :

  1. terimakasih infonnya gan, ada yang lebih sederhana mungkin gan.

    BalasHapus
  2. wah mantab nih sahabat, layak tuk dicoba, makasih ya.

    BalasHapus
  3. @sewa komputer bali :
    Sederhana yg gmn nih maksudx..
    menurut saya ini udah sederhana banget
    ---------------
    @BRI Jakarta Veteran :
    silahkan sobat... n sama2 :D

    BalasHapus
  4. najmun :
    Okey Sob sama2
    ----------------
    Bimbel Blogging :
    makasi pujiaxx sob,sama2 :D

    BalasHapus
  5. kunjungan rutin ke blog saudara, saya suka baca-baca artikel disini, menarik sekali, saya tunggu posting selanjutnya

    BalasHapus
  6. Klo saya ga pake navbar lagi sob alx banyak kode css jadi memberatkan blog :d

    BalasHapus
  7. All About Anime :
    ow gitu yah....
    compress aja kode cssx :)
    ---------------
    SentraClix:
    lagi males daftar mendaftar sob :)

    BalasHapus
  8. wah ia gitu bisa,,,,
    keren juga tuh kalu dipasang di blog aku,,, :(

    BalasHapus
  9. @Mba' Lharaz Angel Iya silahakn di coba kalau gitu :)

    BalasHapus
  10. tq yaa for sharing this..=)

    btw tq sudi komen n3 ifa..=)

    BalasHapus
  11. Punya saya sudah ada dari sononya, tapi menarik untuk di coba.

    BalasHapus
  12. tiefazatie :
    okey sama2.. :)
    dengan senang hati
    ----------------
    Blog Teknik :
    iya sob itu bawaan template sobat :)

    BalasHapus
  13. ada yang lebih sedikit sob javanya atau tanpa edit html..

    BalasHapus
  14. Thanks info bermanfaatnya sob ....
    ntar di coba dech ...

    di tunggu kunjungan baliknya ya ...

    BalasHapus
  15. Wah sangat membantu bro,
    Kayaknya authornya jago coding nih...

    Salam blogger,
    kebebasan berekspresi internet

    BalasHapus
  16. fwebster :
    ini gak pke java sob :D
    n gk berpengruh dgn speed blog
    ---------------------
    KhamarDos Blog :
    okey sob... sama2,okey silahkan
    menuju TKP nih...
    --------------------
    Om Tiger :
    okey sob...
    haha gak juga sob :D
    salam....

    BalasHapus
  17. makasih atas infonya,ini yang lagi daku cari-cari,salam love,peace and gaul.

    BalasHapus
  18. @saryadinilansama2 tas komentarnya kawan..
    salam love,peace n gaul juga :D

    BalasHapus
  19. Bermanfaat sekali sob... kebetulan ane emang hobi koleksi ilmu blogger,, hihihihi

    BalasHapus
  20. @Indrazz AfterlifeAlhamdulillah kalau gitu sob.. :D
    hehe :D

    BalasHapus
  21. bookmark dulu besok praktekin dah malam nih ngantuk

    BalasHapus
  22. nanti ya sob, aku bookmark dulu, hehe., terima kasih infonya :D

    BalasHapus
  23. Kenapa di template saya ga ada kode ini <b:widget id='Header1' locked='true' ,padahal saya ingin sekali pake menu nav hor seperti ini.Nice info sob,thank ya.

    BalasHapus
  24. ijin untuk praktek gan ...

    nice info

    BalasHapus
  25. @Er'endwah gak tau juga tuh sob...
    tapi kemungkinan karna blog kamu gak pke header gan.. kayak blog saya n blog2 lain, tapi sebenernya gk harus di bawah atau di atas kode tersebut,bisa kok di tempatkan di t4 lain sesuai blog km

    BalasHapus
  26. Thank infonya kawan,saya coba utak-atik lagi.

    BalasHapus
  27. Ini Ni artikel yang saya cari,,!!! Terimakasih yah,,!!! Mudah-mudahan bisa bermanfaat di blog saya,,!! :)

    BalasHapus
  28. wah wah wah mantab nih tutornya ntar saya pake yah hehehehe btw klo bisa saya minta tolong buatin menu drop down yg bisa ngeluarin duit xixixixi bisa ga?

    BalasHapus
  29. gan.. ane dah nyoba gan.. cuma belum bisa n yang ini


    Contoh :




    gak ada di template ane gan.. ada saran lain gak

    BalasHapus
  30. @Bangjal Dua Tiga apa gan yang gak ada di template agan?? apakah
    <b:widget id='Header1' locked='true'...dst

    BalasHapus
  31. Informasi yang berguna mas...Cuma saya mungkin belum memakainya.Masalahnya belum ada yang untuk di pasang menu horisontal dropdown-nya.
    maklum saja, baru belajar blogging dan belum banyak menu di blog saya mas.
    Nice info mas...

    BalasHapus
  32. wah bagus mas bisa sy coba2 dolo kalo ane srek ane tarik :D
    visitback yeah :D

    BalasHapus
  33. nice infonya my friend,visit me too...
    http://dollardarineobuxcomtanpareferal.blogspot.com
    http://dollardarineobuxcomtanpareferal.blogspot.com

    BalasHapus
  34. knp menu sayake bwh? tolong di cek ya
    ga ke samping ini http://rof-goodlike.blogspot.com/

    BalasHapus
  35. @danielMank pake tutorial mana sob??
    klo saya liSSnya,jadinya menurun kayak gitu :)

    BalasHapus
  36. @danielMank pake tutorial mana sob??
    klo saya lihat itu krna CSSnya gak ada,jadinya menurun kayak gitu :)

    BalasHapus
  37. ccs itu apa sob
    maaf saya pemula gag tw bgtuan hehehe
    tlng d jelasn lbh detai thx

    BalasHapus
  38. kl mw edit aja bog aq kk
    id:refivaloflive@gmail.com
    pass:sayangkuyqm

    BalasHapus
  39. @daniel Cascading Style Sheet (CSS),Contohnya kode paling atas di artikel ini

    BalasHapus
  40. ccs nya sama ok bos dengan artikel yg di atas,saya sudah ikutin cara" di atas.. pertamanya sih mau ,setelah saya otak atik blog saya lg, jadinya k bwh kwkwkwwk,

    BalasHapus
  41. nah sekarang udah bener nih, tp kenapa kepanjangan ya bos? ampe ke bwh itu menu???

    BalasHapus
  42. @daniel Hapus salahsatu menunya gan...soalnya kalau kelebihan emank gitu. :D

    BalasHapus
  43. Tehngkiu Gan... udah tak coba oke...Lanjutkan

    BalasHapus
  44. infonya menarik gan..dan memang sy lagi cari...mao coba gan..numpang ilmunya...

    BalasHapus
  45. Terimakasi kawan, saya coba sukses.

    BalasHapus
  46. Makasih mas tipsnya..cari2 baru dapat di blog ini he...

    BalasHapus
  47. terimakasih bang, izin copy y!!

    BalasHapus
  48. @guntur silhkn gan, jgn lupa sumber linkx dipasang :)

    BalasHapus
  49. terima kasih mantap dan keren bos !! izin ya saya pasang di blog saya bos....!

    BalasHapus
  50. wah makasih nih atas tutorialnya..
    langsung coba dulu ah..

    BalasHapus
  51. belum bisa buat ni, tolong di bantu ya

    BalasHapus
  52. Nice tutorial sob..kapan-kapan bakal saya terapkan nih di blog saya.

    Nice blog & Thanks :)

    BalasHapus
  53. makasih infonya mas... sy masih newbie

    BalasHapus

Dimohon Untuk Tidak Melakukan KOMENTAR SPAM!!
- Memasukkan Link Aktif
- Promo/Iklan
- Komentar Tidak Sesuai Postingan
- Posting Berualang-Ulang