Home » tips dan trik , tutorial blog » Cara Membuat Tab Menu Dropdown/Bercabang Horizontal Pada Blog

Cara Membuat Tab Menu Dropdown/Bercabang Horizontal Pada Blog

1:33 AM | Labels: tips dan trik, tutorial blog

Cara Membuat Website Undangan Nikah Online

Cara Membuat Tab Menu Dropdown/Bercabang Horizontal Pada Blog - Kali ini saya akan share tentang Cara Membuat Tab Menu Dropdown/Bercabang Horizontal Pada Blog. Mungkin sudah agak banyak yang share di google tentang Cara Membuat Menu Horizontal Bercabang Pada Blog, tapi kali ini saya ingin membahasnya bagi teman-teman yang belum berhasil. Langsung saja, dibawah ini adalah langkah langkahnya sebagai berikut :

1. Seperti biasa Login ke Blogger

2. Pada Dasbor, pilih Rancangan/Layout, kemudian klik Edit HTML

3. Sebelum mengutak-atik template, sebaiknya Download Template Lengkap terlebih dahulu untuk mengantisipasi adanya kesalahan Editing template.

4. Cari kode </head> , untuk mempermudah pencarian tekan tombol Ctrl+F atau menggunakan tombol F3

5. Setelah menemukan kode </head> , copy dan paste script berikut diatas kode tersebut, kemudian Simpan Template

<style type='text/css'>
#catmenucontainer{
height:29px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYKL6GvlhYqW6suIf3Gt6WOhfEBpOJYrMXPSuwSSugd7xzxZ8qfUSiTmmyC8Gm4lg36-ivB10CXWTtfunRm4tJyux9nak8mJQgipuathlq0pC37Wo4wnDc4dTL9qTNtUPM-FdIILNOkbOO/) repeat-x;
display:block;
padding:0px 0 0px 0px;
font: 14px &quot;Century gothic&quot;,verdana, Arial, sans-serif;
font-weight:normal;
border-top:1px solid #686D6F;
}

#catmenu ,#catmenu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}

#catmenu  a {
color: #999;
display: block;
font-weight: normal;
padding: 4px 10px 6px 10px;
}

#catmenu  a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhyphenhyphenYJOfbS8Dp_q9AmcM1p3JvHC2w2_7Yl_rsS8e2RpY1SBMhIr7SZBC3TA4flee3dDtR9T_qGATwATktSgn09bfaW7uoayj1Y1KLs1AqtAOM1tPLXsXn3xY1tvrH_GKRS1KxDOf6WqxHmA/) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}

#catmenu  li {
float: left;
margin: 0px;
padding: 0px;
}

#catmenu  li li {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 130px;
}

#catmenu  li li a, #catmenu  li li a:link, #catmenu  li li a:visited {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYKL6GvlhYqW6suIf3Gt6WOhfEBpOJYrMXPSuwSSugd7xzxZ8qfUSiTmmyC8Gm4lg36-ivB10CXWTtfunRm4tJyux9nak8mJQgipuathlq0pC37Wo4wnDc4dTL9qTNtUPM-FdIILNOkbOO/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#E8EBEE;
border-bottom:1px solid #2C3133;
}

#catmenu  li li a:hover, #catmenu  li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhyphenhyphenYJOfbS8Dp_q9AmcM1p3JvHC2w2_7Yl_rsS8e2RpY1SBMhIr7SZBC3TA4flee3dDtR9T_qGATwATktSgn09bfaW7uoayj1Y1KLs1AqtAOM1tPLXsXn3xY1tvrH_GKRS1KxDOf6WqxHmA/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
border-bottom:1px solid #2C3133;
}

#catmenu  li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}

#catmenu  li:hover ul {
left: auto;
display: block;
}

#catmenu  li:hover ul, #catmenu li.sfhover ul {
left: auto;
}
</style>

nb : anda bisa mengubah script diatas seperti width (lebar), color solid (warna), border (garis tepi) dsb. jika kode warna anda bisa mendapat di corel draw, macromedia flash player atau yg lain, tapi jika anda tidak mempunyai aplikasi tersebut disini anda bisa mendapatkannya di Kode Warna

6. Sekarang buka menu Elemen Laman dekat Edit HTML, kemudian klik Tambah Gadget.
7. Lalu copy dan paste kode HTML dibawah ini

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

Keterangan :
Tulisan Berwarna Merah : silahkan ganti dengan alamat link/ URL yang anda inginkan. Biasanya terdapat pada address bar browser.
Tulisan Berwarna Hijau : adalah pesan saat menu disentuh, bisa dihapus jika anda tidak memerlukannya. Contohnya menghapus di home, caranya hapus bagian title="beranda"
Tulisan Berwarna Biru : Judul Menu yang diinginkan misalnya : home atau info dsb.

Pahami script demi scriptnya, sehingga anda bisa menambah atau mengurangi menunya. Sebaiknya copy terlebih dahulu di Microsoft Word agar lebih mudah mengeditnya, jangan sampai ada scipt yang hilang karena bisa berakibat fatal, mungkin kalau spasi ke samping atau bawah(Enter) masih tdk apa2. Jika belum mengerti, inilah contoh script yang saya gunakan (terakhir kali posting ini diupdate) untuk blog ini :

<ul>

<li><a href="http://www.jogoyitnan-free.blogspot.com/search/label/bengkel?max-results=5" title="bengkel u-power">U-Power</a></li>

<li><a href="http://jogoyitnan-free.blogspot.com/search/label/tips%20dan%20trik?max-results=5" title="tutorial dan trik">Tutorial dan Trik</a>

<li><a href="http://jogoyitnan-free.blogspot.com/search/label/tutorial%20blog?max-results=5" >Tutorial Blog</a></li>

<li><a href="http://jogoyitnan-free.blogspot.com/search/label/pelajaran?max-results=5" >Pelajaran</a></li>

</ul>

</li>

<li><a href="http://www.jogoyitnan-free.blogspot.com/2011/02/my-profil.html" >My Profil</a></li>

<li><a href="http://www.facebook.com/nuradika.pradana.reeza" >Facebook</a></li>

</ul>

</li>

<li><a href="http://smpn1wonosobo.sch.id" title="Sekolah Saya">My Education</a>

<li><a href="http://smpn1wonosobo.sch.id" >SMPN1 Wonosobo</a></li>
<li><a href="http://sdbumireso.wordpress.com" >SDN Bumireso</a></li>
</ul>
</li>
<li><a href="http://jogoyitnan-free.blogspot.com/2011/04/tukar-link.html" title="link exchange">Tukar Link</a></li>
</ul>

</div>
</div>

8. Jika sudah klik simpan, dan lihat hasilnya...

Sekian dari saya tentang Cara Membuat Tab Menu Dropdown/Bercabang Horizontal Pada Blog. Semoga bermanfaat dan berhasil. Terima Kasih

Update Oktober 2011 : Jika anda belum bisa menggunakan Cara Membuat Tab Menu Dropdown/Bercabang Horizontal Pada Blog, ada Contoh lain tentang Cara Membuat Tab Menu Horizontal Dropdown dengan Script CSS (massive blue dropdown)

Salam, Reeza

Terima kasih atas kunjungan Saudara di blog kami, semoga bermanfaat :)

36 comments:

ak said...: kbetulan lg cari yg ky gini .. thanks tipsnya; June 28, 2011 at 7:42 PM
S. RIYADI RAMLI said...: salam kenal, trima ksih yg sebesar-besarnya atas berbagi ilmunya. smoga mendapatkn ilmu yg blh byk lg. n terpenting bermanfaat bagi org byk. skali lg trima ksih...; August 6, 2011 at 8:07 PM
S. RIYADI RAMLI said...: sya coba, di tutorian n trik yg kluar 1 yaitu tutorial blog. trus yg my profil, facebook n blog kok gk ada? apa sya kurang di tmpat edit template HTML nya? tlg bantuannya. trima ksih sblmnya.; August 6, 2011 at 9:48 PM
Nuradika Pradana Reeza said...: oh.. maaf sob, salah script di Edit HTML. soalnya saya sudah ubah script tab menu punya saya. silahkan di coba ulang. and jangan sampai lupa mungkin saja ada script yang hilang, seperticlass="children"> dsb.
Terima Kasih, Semoga Bermanfaat; August 7, 2011 at 1:59 AM
Anonymous said...: tetep gak bisa. masih kocar-kacir.....; September 24, 2011 at 1:37 AM
Riyan fikri said...: thanks sobat ...
artikel ini sangat berguna bagi saya ...
saya sudah mencobanya ...
dan akhirnya berhasil. .

sekali lagi thanks . . .; November 23, 2011 at 6:27 PM
Nuradika Pradana Reeza said...: ya sama-sama, makasih sudah berkunjung :); November 24, 2011 at 3:23 AM
Megat Juliaidi said...: bang ini apa yang kurang soalnya pass bikin cabangnya gak ada cuman ada 1; December 8, 2011 at 3:45 AM
Anonymous said...: mau tanya sob, gimana supaya tab menu dropdown selalu terlihat semua karena punya saya tertutup oleh elemen lainnya...; February 16, 2012 at 3:50 PM
Sumaryanto said...: gan...menu horizon misal menu 4, trus saya buat dropdown , misal menu 4.1 menu 4.2 dan seterusnya..tapi kok yg keluar cuma menu 4.1 nya doang ? kasih info gan salahku dimana ? tks; February 19, 2012 at 2:14 AM
fasttotrusty said...: thanks tutornya.
visit blog kami http://fasttotrusty.blogspot.com; February 20, 2012 at 10:26 AM
Unknown said...: kak kok menu dropdown nya dibelakakng enti ya gimana caranya biar dropdown nya didepan entri ,soalnya kayak terselip dibawahnya :-o; February 25, 2012 at 4:33 AM
Rumah Muslimah said...: Postingan yg bermanfaat; March 18, 2012 at 6:12 AM
Unknown said...: WAHHH,,,ini sngat bagus,,,trimakasih tas,,ilmu na ea,,ngan brhenti tuk sharing,,thk;s ea ;;); March 23, 2012 at 9:07 AM
Isneli Yulailah said...: Thanks ya.Artikel seperti ini memang sdh lama saya cari-cari.Bermanfaat sekali untuk saya sebagai pemula.Sukses selalu untuk anda!; May 5, 2012 at 7:40 AM
onlajer said...: BISA DICUBA NIH; May 18, 2012 at 11:25 PM
10 said...: Mantap tahnk sharing Ilmunya :D; May 24, 2012 at 10:37 AM
Unknown said...: Kereennnn..... Sukses Brow,,,

THANK's Banget Brow....; June 10, 2012 at 2:28 PM
Unknown said...: cihuyyyyy, asyik. terima kasih mas...; July 2, 2012 at 12:44 PM
Unknown said...: Terimakasihhhhh bangeeeeet: ne liat, dengan tipsnya sampean mas, blogku lumayan bagus, hehe: http://insidesidogiri.blogspot.com/ makasih mas; July 2, 2012 at 3:05 PM
Muse-ik4u said...: saya blogger beginning, trus html code yang agan posting udah saya coba & hasilnya memang manjur gan.. thank's.. ;); July 21, 2012 at 1:15 PM
Unknown said...: kok dropdown'nya di blog ane tulisan menunya pada di tengah semua ya..? gak di sebalah kiri..
gimana ya gan?; July 26, 2012 at 11:26 AM
Fairvz said...: mantaappp,,,gan; July 26, 2012 at 7:56 PM
Unknown said...: Ok gan,,,aku sudah bisa pasang tab menunya,,,thanks banget infonya. bermanfaat sekali..
kunbal aku ya gan,,,
erigasangeger.blogspot.com; August 17, 2012 at 4:50 AM
yepi said...: Terimakasih sob, langsung dipraktekin nih. :); August 24, 2012 at 1:27 AM
pekerja said...: This comment has been removed by the author.; October 14, 2012 at 10:18 AM
Uem Cuters said...: Saya coba terapkan gan, trims ya. Ditunggu kunjungannya...; October 16, 2012 at 5:42 AM
Unknown said...: Kok menunya gx drop down mohon penjelasannya !!
padahal gw ud perhatiin detail nya ...; October 17, 2012 at 5:00 AM
maya sari said...: hai... salam kenal ya... jangan lupa mampir n follow me juga ya... di http://nova-fms.blogspot.com makasih ya.... ;); November 16, 2012 at 9:35 PM
Anonymous said...: mas,
ko dropdown menunya ga keluar ya...please help; November 28, 2012 at 6:51 PM
Jimmaoresign said...: kgk bisa di copy bang linknye
?; March 21, 2013 at 4:17 AM
Bli Wahyu said...: thx tipsnya,, follow blog ku ya baru bikin sih :D
http://helixwahyudipra.blogspot.com/; June 14, 2013 at 8:26 PM
Unknown said...: wahh.. thank you mas Bro.. bisa bisa !
walaupun nggak terlalu canggih jadinya..
visit me : squidybaflowbskey.blogspot.com; June 21, 2013 at 3:22 AM
Unknown said...: kok tambah gadged nya gak ada?????????????:)]; May 31, 2014 at 10:42 AM
Emjannah said...: tutorialnya bagus... mampir blog saya ya... http://emjannah.blogspot.com/; January 20, 2015 at 10:32 PM
obat maderic asam urat said...: makasih bantuannya; March 28, 2016 at 12:42 AM