Cara Membuat Horizontal Dropdown menu ala blazerracing


Masih menggunakan Template yang tidak mempunyai menu horizontal ? Atau ingin mengubah Menu horizontal sobat ? Semua pertanyaan itu akan saya bahas pada postingan kali ini, yaitu Cara Membuat Horizontal Dropdown menu ala blazerracing.

Apa itu Menu horizontal ? Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header.
Sebelumnya, saya mendapat ilmu ini dari sobat saya, yaitu blazerracing , terimakasih kepadanya ^_^


 Sangat Ellegant bukan ? 

Keuntungan Menu Horizontal :

1. Menjadi wadah dari beberapa link
2. Pengunjung akan lebih mudah menjelajahi blog anda, karena semua link terpampang disana.
3. Blog akan terlihat indah dan Profesional dengan adanya Menu Horizontal.

Jadi, apa salahnya kita mencoba Tutorial dibawah ini  (•̃-̮•̃)


Langkah Penting !!

Bagi yang sudah mempunyai Menu Horizontal lama, dan ingin mengubahnya ke Style ini, silahkan ikuti langkah-langkah ini terlebih dahulu. Bagi yang belum mempunyai menu horizontal, Lewati saja langkah ini.

1. Login ke Blogger >> Rancangan >> Edit HTML >> centang  Expand Widget Templates.


2. Cari kode <div id="menu">
atau cari kode yang mirip, biasanya terletak dibawah kode </head>

3. Lalu, hapus rangkaian kodetersebut, sampai bagian akhir
( Lihat Screen Shoot dibawah )


Klik untuk memperbesar.
4. Setelah dihapus, klik Pratinjau. Jika Horizontal menu lama sobat tidak ada, berarti sudah berhasil dan Simpan Template.


Cara Membuat Horizontal Dropdown menu ala blazerracing :


1. Login ke Blogger >> Rancangan >>Add a gadget  >> HTML / Javascript
2. Letakkan kode berikut di kotak kosong tersebut :



<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Scriptnya panjang sob</span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
<style type="text/css">#black{background:-webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)); width:930px; height:32px; color:#5A6C8C; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; border-bottom:1px solid #666;-moz-box-shadow: 1px 1px 10px #888;-webkit-box-shadow:1px 1px 10px #888;-webkit-border-radius: 6px;-moz-border-radius: 6px;border-left:1px solid #333}#NavbarMenuleft{width:700px; float:left; margin:0; padding:0;}#search{width:240px; font-size:11px; float:right; margin:0; padding:0;}#nav{margin:0; padding:0;}#nav ul{float:left; list-style:none; margin:0; padding:0;}#nav li{border-left:1px solid #ff0000;list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;}#nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;}#nav li a:hover, #nav li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px; text-decoration:none;}#nav li li a, #nav li li a:link, #nav li li a:visited{background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/S6mTqmy1HdI/AAAAAAAAA2M/6D7APyygWZA/catmenuhov.jpg); width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px solid #151f23; font:normal 14px Georgia, Times New Roman;-moz-box-shadow: 1px 1px 10px #888;-webkit-box-shadow:1px 1px 10px #888;-webkit-border-radius: 6px;}#nav li li a:hover, #nav li li a:active{background:#4a4d4c; color:#fff; padding:3px 10px;}#nav li{float:left; padding:0;}#nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;}#nav li ul a{width:140px;}#nav li ul ul{margin:-24px 0 0 170px;}#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;}#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto;}#nav li:hover, #nav li.sfhover{position:static;}#searchbox{padding:0; margin:0;}#search input{background:#fff; color:#000; float:left ;margin:5px 0 0 10px; width:168px; padding:3px 7px; border:1px solid #cdcdcd; font:normal 11px arial, verdana, Times New Roman;}#search .btn{background:#333; color:#fff; font-size:11px; margin:5px 0 0 3px; padding:2px; width:30px; cursor:pointer; border-left:1px solid #666; border-top:1px solid #666; border-right:2px solid #111; border-bottom:2px solid #111;}#top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;}#top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;}#top a:hover{color:#cc0000; text-decoration: underline;}#top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;}.topleft {width: 304px; float: left; margin: 0; padding:0;}.topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;}.topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}</style><div id='outer'>
<div id='black'>
<div id='navbarmenuleft'>
<ul id='nav'>
<li><a href='URL blog sobat''>Home</a></li>
<li><a href='#'>Tutorial</a>
<ul>
<li><a href='#'>Tutorial Blogspot</a></li>
<li><a href='#'>Tutorial Point Blank</a></li>
</ul></li>
<li><a href='#'>Tips</a>
<ul>
<li><a href='http://acernoval.blogspot.com/'>Tips Blogspot</a></li>
<li><a href='#'>Tips Kesehatan</a></li>
<li><a href='#'>Tips Handphone</a></li></ul></li>
<li><a href='#'>Download Icon</a>
<ul>
<li><a href='#'>Social Network Icon</a></li>
</ul></li>
<li><a href='#'>Tool</a>
<ul>
<li><a href='#'>PR Checker</a></li>
<li><a href='#'>Kode Warna</a></li>
</ul></li>
<li><a href='#'>News</a></li>
</ul></div><div id='search'><form action='/search/' id='searchform' method='get' style='display:inline;'><input id='searchbox' maxlength='200' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='search...'/><input class='btn' type='submit' value='go'/></form></div></div></div>


</div></div></div></div>

Catatan :

1.  Ganti semua menu dengan nama menu yang sobat inginkan.
2.  Ganti tanda  #  dengan link tujuan sobat.

4. Selesai, dan Simpan Template ^_^

Semoga bermanfaat dan good luck..! :D


{ 43 komentar..ada pertanyaan? komentar disini! }

Trisna N mengatakan...

Wah,codenya banyak amat mas
tapi trik yang bermanfaat
thanks infonya :D

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Simple Semua mengatakan...

bikin berat atau kagak yaa?
dilihat2 banyak kodenya

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Fahmi Setiawan mengatakan...

codenya terlalu banyak?
Kira2 berat ga tuh?
mending code cssnya di buat hosting. hehee

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Naufal Syahrial Hidayat mengatakan...

ngga kok sob ngga terlalu memberatkan :)

roni mengatakan...

NICE POST GAN, MAJU TERUS

Terimakasih Untuk Komentar Sobat ... by AcerNoval
gemasyahdan mengatakan...

makasih tutornya sob,.

Terimakasih Untuk Komentar Sobat ... by AcerNoval
just copy and leave it !!! mengatakan...

apa bisa warnanya diubah jadi putih ??
bloog ane kan putih :)

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Muhammad Iqbal Alfarizy mengatakan...

Wah nice inpo sob :D makasih ya inponya :D keep post! :D

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Blog Present mengatakan...

kereeen

Terimakasih Untuk Komentar Sobat ... by AcerNoval
www.ceritadewasaseksi.com mengatakan...

Nice share

Terimakasih Untuk Komentar Sobat ... by AcerNoval
ivan lionel andreas mengatakan...

wah, keren kang...

kapan² sya coba ahh... :)

Terimakasih Untuk Komentar Sobat ... by AcerNoval
dp-media mengatakan...

Makasih sob infonya.....jika berkenan mari tukerann link.....(http://dp-media.blogspot.com)

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Mharjipes Dot Com mengatakan...

Weitzz keren Master..

nice..

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Obat Jerawat Herbal mengatakan...

ini yang saya cari dari dulu gan,,dari menu horizontal itu ada kan sub menunya??
jadi kita harus hapus dulu ya,,
thanks ya

Terimakasih Untuk Komentar Sobat ... by AcerNoval
ada blog mengatakan...

bagus gan akan saya coba deh

Terimakasih Untuk Komentar Sobat ... by AcerNoval
arul mengatakan...

Gagal maning gagal maning mas bro... ada kode yg kelewat kali ya...?

Terimakasih Untuk Komentar Sobat ... by AcerNoval
ciri-ciri kanker hati mengatakan...

Terima kasih untuk tipsnya, saya mau coba semoga juga.

Terimakasih Untuk Komentar Sobat ... by AcerNoval
typhonium mengatakan...

Saya cari dibeberapa website dan dapat tipsnya di website ini, terima kasih, mau dicoba oleh saya.

Terimakasih Untuk Komentar Sobat ... by AcerNoval
mengobati kanker hati mengatakan...

c

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Penyakit kanker mengatakan...

Terima kasih atas pencerahannya, tulisannya menarik juga. Saya akan coba

Terimakasih Untuk Komentar Sobat ... by AcerNoval
obat kanker darah mengatakan...

aku paling senang dengan semua pengetahuan ini, terima kasih sudah berbagi ilmu

Terimakasih Untuk Komentar Sobat ... by AcerNoval
obat leukemia mengatakan...

Setelah membaca Info dan Artikel, saya jadi ingin mencoba. Salam Sukses

Terimakasih Untuk Komentar Sobat ... by AcerNoval
kanker endometrium mengatakan...

Terima kasih atas Artikel dan Info yang selalu menambah wawasan.semoga sukses

Terimakasih Untuk Komentar Sobat ... by AcerNoval
gejala kanker endometrium mengatakan...

Menarik, sangat Menarik Artikel dan Tipsnya. boleh dicoba. salam sukses

Terimakasih Untuk Komentar Sobat ... by AcerNoval
penyakit kanker hati mengatakan...

Cemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. Terimaksih

Terimakasih Untuk Komentar Sobat ... by AcerNoval
gejala penyakit kanker otak mengatakan...

Artikel yang sangat Innovatif dan banyak Tipsnya. jadi ingin coba. semoga berhasil

Terimakasih Untuk Komentar Sobat ... by AcerNoval
kanker hati mengatakan...

Tulisan dan Tipsnya sangat bermanfaat dan Infomatif. wajib dicoba. sukses selalu.

Terimakasih Untuk Komentar Sobat ... by AcerNoval
kanker kandung kemih mengatakan...

Amazing artikel, Infonya bagus banyak mengandung Tips dan Pesan yang bermutu. salam sukses

Terimakasih Untuk Komentar Sobat ... by AcerNoval
limfoma mengatakan...

Terimakasih Tulisan dan Info yang bermanfaat. wajib dicoba. salam sukses selalu.

Terimakasih Untuk Komentar Sobat ... by AcerNoval
kanker kelenjar getah bening mengatakan...

Tips dan Info menarik, boleh dicoba, Semoga berhasil

Terimakasih Untuk Komentar Sobat ... by AcerNoval
obat alami kanker kelenjar getah bening mengatakan...

Setelah membuka Wibesite ini, saya menemukan Artikel yang Amazing dan infonya boleh dicoba. Sukses selalu

Terimakasih Untuk Komentar Sobat ... by AcerNoval
ciri ciri kanker kelenjar getah bening mengatakan...

Saya menemukan Artikel hebat di wibesite ini jadi ingin coba Tipsnya. Semoga berhasil

Terimakasih Untuk Komentar Sobat ... by AcerNoval
kanker lambung mengatakan...

Artikel Menarik terutama Infonya, boleh dicoba. Salam sukses

Terimakasih Untuk Komentar Sobat ... by AcerNoval
kanker nasofaring gejala mengatakan...

Saya senang setelah membaca Tips dan Artikelnya, harus dicoba.Semoga berhasil

Terimakasih Untuk Komentar Sobat ... by AcerNoval
obat kanker otak mengatakan...

Info dan Tulisannya Amazing, boeh dicoba. Sukses selalu

Terimakasih Untuk Komentar Sobat ... by AcerNoval
ciri-ciri penyakit kanker otak mengatakan...

Tipsnya sangat Infomatif, wajib dicoba salam sukses

Terimakasih Untuk Komentar Sobat ... by AcerNoval
ciri penyakit kanker otak mengatakan...

Informasinya keren sekali, sangat bermanfaat.sukses selalu

Terimakasih Untuk Komentar Sobat ... by AcerNoval
obat kanker pankreas mengatakan...

Terimakasih Banyak Tips dan Artikelnya, boleh dicoba. Salam sukses

Terimakasih Untuk Komentar Sobat ... by AcerNoval
obat kanker pankreas mengatakan...

Terimakasih Artikelnya bermanfaat dan Infonya menambah Ilmu pengetahuan. Harus dicoba. Semoga berhasil

Terimakasih Untuk Komentar Sobat ... by AcerNoval
kurniawan mengatakan...

Thanks bro ....

Terimakasih Untuk Komentar Sobat ... by AcerNoval
topSpot | Find your top spot here mengatakan...

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

Nice blog & Thanks :)

Terimakasih Untuk Komentar Sobat ... by AcerNoval
SANI SHOP mengatakan...

Gebear harga promo murah dan aman di sani-shop : Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Ada Garansi Resmi Distributor dan Garansi TAM 2 bebas resiko bebas penipuan.
Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
BERMINAT HUB-SMS: 0816-597476 ATAU KLIK WEBSET RESMI KAMI http://sani-shop.blogspot.com/.

Ready Stock!
Samsung Galaxy S4 Mini Rp.2,500.000
Ready Stock!
Apple iPhone 5 Rp.2,700.000
Ready Stock!
BlackBerry 9380 Orlando - Black.Rp.900.000,-
Ready Stock!
BlackBerry Curve 8520 Gemini.Rp.500.000,-
Ready Stock!
BlackBerry Bold 9780 Onyx 2.Rp.800.000,-
Ready Stock!
Blackberry Curve 9320.Rp.700.000,-
Ready Stock!
Samsung Galaxy Note 10.1.Rp.2,500.000.
Ready Stock!
Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
Ready Stock!
Samsung Galaxy S III Mini.Rp.1.800.000.
Ready Stock!
Samsung Galaxy Nexus I9250 - Titanium Si.Rp.1.500.000,-
Ready Stock!
Samsung Galaxy Note N7100.Rp.2.500.000.
Ready Stock!
Samsung Galaxy Note N7000 - Pink.Rp.1.700.000.
Ready Stock!
Samsung Galaxy Y S5360 GSM - Pure White.Rp.500.000,-
Ready Stock!
Nokia Lumia 800 - Matt Black.Rp.1.700.000,-
Ready Stock!
Nokia Lumia-710-whiteRp. 900.000,-
Ready Stock!
Nokia C2-06 Touch & Type -Dual GSM-Rp.450.000,-
Ready Stock!
Nokia Lumia 710 - Black.Rp. 900.000,-
Ready Stock!
Apple iPhone 4S 16GB (dari XL) - Black.Rp.1.200.000,-
Ready Stock!
Apple iPhone 4S 16GB (dari Telkomsel).Rp.1.200.000,-
Ready Stock!
Apple iPod Touch 4 Gen 8GB.Rp.700.000.
Ready Stock!
APPLE iPod Nano 8GB - Pink.Rp.500.000,-
Ready Stock!
Acer Aspire 4755G Core i5 2430 Linux Blue.Rp 1.700.000.
Ready Stock!
Acer Aspire One AOD270 10.1.-Rp. 1.000.000,-
Ready Stock!
Acer TravelMate TM8481-2462G32.Rp. 1.400.000
Ready Stock!
Acer ICONIA Tab W500 10.1" Tablets Notebook.Rp. 1.100.000,-
Ready Stock!
Nikon D7000 kit 18-105mm.Rp.1.700.000.
Ready Stock!
Nikon D90 Kit 18-105mm Vr.Rp 1.300.000.
Ready Stock!
Nikon Coolpix L 120 Red.Rp. 900.000
Ready Stock!
Nikon Coolpix P 500 Black.Rp 1.000.000

Terimakasih Untuk Komentar Sobat ... by AcerNoval
riswana suherman mengatakan...

obat tradisional kanker pankreas sya izin shre ya tpi tetang sya cantumin dari agannya mataaap lah

Terimakasih Untuk Komentar Sobat ... by AcerNoval

Be a Top Commentators!

Top Commentators

Postingan
Komentar


Widget by DAW-XP