Setelah kemarin blog ini membahas tentang Cara Membuat Menu Top Di Atas Header, kayaknya kurang komplit deh kalo yang di bahas cuma di atas header doang, gak kompilt gak enak hehehe . . .

Mencoba-dan terus mencoba sekarang blog ini akan sharing tentang Cara Membuat Menu Drop Down di Bawah Header, apa blog sobat belum ada menu di bawah header? kalo belum ada dan sobat ingin memasang menu di bawah header blog sobat, sobat tepat sekali jika berkunjung dan membaca postingan/articles kali ini, karna itulah yang akan kita bahas! kalo sobat nggak ngerti menu di bawah header itu apa, kayaknya gak usah saya jeasin deh, hehehe . . . kalo gak ngerti sobat bisa lihat gambar di bawah ini:

contoh menu drop down di bawah header

menu di atas sudah saya modifikasi sedikit jadi ada iconnya juga, kalo sobat gak suka bisa sobat buang ke jalan iconnya, xixixix . . .

Ok dah kita lansung aja ya menuju cara pemasangannya ke blog sobat, untuk pemasangannya silahkan sobat ikuti langkah-langkah berikut:

1.Masuk ke akun blogger sobat.

2.Pada menu pilih Rancangan ➨ Edit HTML.

3.Sekarang centang Expand Template Widget, jangan lupa download dulu templatenya untu mengansipasi bila terjadi kesalahan.


4.Di dalam Edit HTML sekarang sobat cari kode ]]></b:skin> jika kesulitan mencarinya coba sobat baca Cara Cepat Mencari Kode HTML.


5.Jika sudah ketemu sekarang sobat copy kode berikut dan pastekan/letakkan di atas kode ]]></b:skin>.

#catmenucontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(http://1.bp.blogspot.com/-HWnzqeoLkqM/TZfDIsnBUJI/AAAAAAAAC6Y/HLNb-3kfkec/s1600/2.gif) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}
#catmenu{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525 url(http://4.bp.blogspot.com/_4HKUHirY_2U/S6mTqAdkycI/AAAAAAAAA2E/zxCSk-6MwLI/catmenu.jpg) repeat-x;
height:33px;
}

#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}

#catmenu li a:hover, #catmenu li a:active {
background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/S6mTqmy1HdI/AAAAAAAAA2M/6D7APyygWZA/catmenuhov.jpg) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}

#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;

}

#catmenu li li a:hover, #catmenu li li a:active {
background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/S6mTqmy1HdI/AAAAAAAAA2M/6D7APyygWZA/catmenuhov.jpg) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}

#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#catmenu li li {
}

#catmenu li ul a {
width: 140px;
}

#catmenu li ul a:hover, #catmenu li ul a:active {
}

#catmenu li ul ul {
margin: -34px 0 0 170px;
}

#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
left: -999em;
}

#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
left: auto;
}

#catmenu li:hover, #catmenu li.sfhover {
position: static;
}

6.Masih di dalam Edit mplare, sekarang sobat cari Kode <div id='content-wrapper'> ,jika sudah ketemu copi - paste kode dibawah ini tepat dibawah kode <div id='content-wrapper'>
setiap template berbeda-beda, jadi coba cari kode yang mirip dengan <div id='content-wrapper'>


<div id='catmenucontainer'>
<div id='catmenu'>

<ul>
<li><a href='http://LINK URL SOBAT/'>Home</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-4</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-3</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-4</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6-2</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-7</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-8</a></li>
</ul>

<div style='float:right;margin-right:20px;'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=pbtemplates'><img src='http://4.bp.blogspot.com/_4HKUHirY_2U/S6m5f0b1vkI/AAAAAAAAA38/wPNiRj2nZ9w/Mail_Read.png'/></a>
<a href='http://feeds.feedburner.com/pbtemplates'><img src='http://1.bp.blogspot.com/_4HKUHirY_2U/S6m5gDGJGAI/AAAAAAAAA4E/cHINlVzdTLI/RSS.png'/></a>
<a href='http://www.twitter.com/btipandtrick'><img src='http://2.bp.blogspot.com/_4HKUHirY_2U/S6n2fLHS5RI/AAAAAAAAA4c/G9M3awpSwZI/Twitter.png'/></a>
<a href='mailto:123@abc.com'><img src='http://3.bp.blogspot.com/_4HKUHirY_2U/S6n2qsFN6vI/AAAAAAAAA4k/NrkOt_6IvYs/contact.png'/></a>
</div>

</div>
</div>

<div class='clear'/>

7.Selanjutnya simpan template sobat.

Keterangan;
Ganti 'http://LINK URL SOBAT/' dengan URL link blog sobat.
Ganti kode-kode 'Your-Link-Here' dengan link tujuan yang ingin sobat masukkan
Ganti 'Link-Title' dengan title link sobat.
Ganti 'Link-Name' dengan nama link yang sobat inginkan.


Oke dah,Sekian dulu untuk postingan/articles kali ini, semoga dapat bermanfaat untuk sobat semuanya!

Bagaimana,apakah sobat berhasil menerapkannya ke blog sobat? Silahkan tinggalkan komentar/tanggapan sobat tentang postingan/articles kali ini!

Posting Komentar Blogger Disqus

  1. saya gagal karen kode content-wrapper'
    tidak ada di html blogspot

    BalasHapus
  2. @Raymond DamsonWah kok bisa gak ada? apa sobat sudah tidak melewatkan tahap 3?

    BalasHapus
  3. Makasih Buat Infonya . Nice Post !!!

    BalasHapus
  4. Artikel cara membuat menu drop down nya mantap.

    BalasHapus
  5. nice post...!!!
    tapi mas bagaimana caranya menghapus iconnya

    BalasHapus
  6. @Robby_JS Untuk menghapus Icon gambarnya silahkan hapus kode:

    <div style='float:right;margin-right:20px;'>

    sampai kode

    </div> yg pertama.

    BalasHapus
  7. ngak ada div id conten wrappernya gmana nich

    BalasHapus
  8. @SMP NEGERI 2 KRATON Sya mnulis d atas, bila tidak ada kde trsebut coba anda cri kode yg lain, yg hmpir sma.

    BalasHapus
  9. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  10. gue da bisa sob,,thank you sob atas sharenya..
    http://bisnisjssonline.blogspot.com

    BalasHapus
  11. cara buat menu2 ngayang seperti di label gmna gan

    BalasHapus
  12. ini yang aku cari-cari...makasih ya. tapi kenapa ya hasilnya ko malah diatas header? mohon bantuannya ka supaya jadi dibawah header... terimakasih sebelumnya.

    BalasHapus
  13. @Desy RahmawatiPrhtikan lngkah2nya, letakkan kode yang kedua di bawah kode <div id='content-wrapper'>

    BalasHapus
  14. Horee...alhamdulillah akhirnya jadi juga. Makasih ya ka bantuannya. :)

    BalasHapus
  15. waahh Nice info... :)
    Makasih ya informasi'y

    jangan lupa mampir kesini ya..
    http://quantamultimedia.com/


    terimakasih ^_^

    BalasHapus
  16. MAKASIH BERHASIL GAN!!!! COBA LIHAT http://papua-green.blogspot.com/

    BalasHapus
  17. wah mantep gann...
    bgus ni tips nya TOT ASLII..

    Mapirrgann

    BalasHapus
  18. 'content-wrapper' gak dapat gan, jadi gagal dechhh

    BalasHapus
  19. boleh dicoba nih gan
    vsit yah http://hardiyankesuma.blogspot.com/

    BalasHapus
  20. Thx Sob, Bermanfaat Bgt, dah q pasang di Blog Saya \o/, Visit Back yah Sob..
    arieff-gamers.blogspot.com

    BalasHapus
  21. gan maaf newbie, gan gimana untuk mendapatkan link url menjadi http://1.bp.blogspot.com/...bla-bla...
    mohon penceraha yach maaf agak menyimpang

    BalasHapus
  22. @rons_snorItu adalah url gambar.
    Pada saat membuat postingan klick 'Insert Image' untuk mengUpload gambar dari pc Anda.
    Jika sudah klick tab 'HTML' maka Anda akan melihat url gambar yang telah Anda upload tadi.

    BalasHapus
  23. Thanks sharing nya sob, saya juga ikutan pusing cari kode div id='content-wrapper =p*

    apa ga ada pilihan penempatan lain selain div id='content-wrapper ?


    BalasHapus
  24. Sebelum nya terima kasih gan keren banget
    tapi saya mau naya gimna cara memperkecil lebar nya biar sesuai gan ?

    BalasHapus
  25. @ubudscooterrentalSemua Template intinya sama, cuma kode nya saja yang mungkin sedikit berbeda, coba Anda cari kode yang hampir mirip dengan kode yang saya sebutkan di atas!

    BalasHapus
  26. @Junnot marleyGanti width:1000px; dengan keinginan Anda!

    BalasHapus
  27. bagus gan........mohon ijin untuk menshare artikel ini di blog saya.....dan untuk kawan kawan bloger yang tidak menemukan code 'content-wrapper'coba pasang di bawah code class='descriptionwrapper'>saya sudah mencoba dan itu berhasil...,kunjungi http://dimasera-ketikajarikumenari.blogspot.com/

    BalasHapus
  28. @Indra DimaseraSilahkan gan!
    Terimakasih juga karna telah berbagi ilmu kepada teman2 yang kesulitan di atas! :-d

    BalasHapus
  29. gan kalo kode yg ada pd no 6 nggak ketemu trus cari kode yg gimana??

    BalasHapus
  30. yess dah bisa !!!!!
    agam agan semuanyyaaa kalo nggak bisaaa

    kode dibawahnya nomer 6 di kopi aja ke "TATA LETAK>>TAMBAH GADGET>>HTML/JAVA SCRIPT"
    SILAHKAN MENCOBA \o/

    BalasHapus
  31. @Raqhni SandikaMaaf bila baru sempat membalas komentar Anda, di karenakan kesibukan di dunia nyata.

    Saya rasa Saya tidak perlu menjawab pertanyaan Anda lagi, jika Anda melatakkan tag tersebut di gadget.

    Di blog ini ada banyak pilihan Navigations Menus Cantik yang bisa di letakkan di gadget tanpa harus edit HTML. Jika ingin navigation yang lainnya bisa Anda cek di Label Navogation Menus.

    Terimakasih juga telah memberi masukkan kepada pembaca yang lainnya!

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top