Home / Blog / Tips & Trik / Tutorial Membuat Menu Horizontal Dropdown + Search engine

Cara Download Tutorial Membuat Menu Horizontal Dropdown + Search engine Update Terbaru

Sedikit Info Seputar Tutorial Membuat Menu Horizontal Dropdown + Search engine Terbaru 2017 - Hay gaes kali ini team All About Android, kali ini akan membahas artikel dengan judul Tutorial Membuat Menu Horizontal Dropdown + Search engine, kami selaku Team All About Android telah mempersiapkan artikel ini untuk sobat sobat yang menyukai All About Android. semoga isi postingan tentang Artikel Blog, Artikel Tips & Trik, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Tutorial Membuat Menu Horizontal Dropdown + Search engine Terbaru
link: Tutorial Membuat Menu Horizontal Dropdown + Search engine

"jangan lupa baca juga artikel dari kami yang lain dibawah"

Berbagi Artikel Tentang Tutorial Membuat Menu Horizontal Dropdown + Search engine Terbaru dan Terlengkap 2017

Tutorial Membuat Menu Horizontal Dropdown + Search engine - Hallo para Sobat Blogger. Kali ini saya akan share tentang cara membuat Menu Horizontal Dropdown pada blog. dan kelebihan pada menu dropdown ini adalah terdapat search engine di samping menu yg memudah kan para pengunjung mencari informasi di blog anda

Contoh :


Berikut Tutorialnya :

1.) Seperti biasa, pertama-tama kita harus login ke account Blogger terlebih dahulu
2.) Masuk ke Dashboard, Template
3.) Pilih Edit HTML, lalu ceklis "Expand Template Widget"
4.) Cari kode ]]></b:skin> (tekan ctrl+f untuk mempermudah pencarian)
5.) bila sudah, letakkan kode dibawah ini tepat diatas kode ]]></b:skin>
/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxTHq0TZ6-uMV9_7LCuHebhGTDBySxZIFcTHhyphenhyphens82qqJ36Vds8lgOf59AaEIIbXTwapD41cnqlfdG3mR2gxXngb2u_hQKhLX0fVS95bOWDSpdNPGBfVhEKA1bQXk4lkzVhXR2PgAdskvo/s1600/nav.png) repeat-x;width:960px;margin:0 auto;padding:0 auto}
#menuwrapper{width:960px;height:30px;margin:0 auto}.menusearch{width:300px;float:right;margin:0 auto;padding:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:100%}
#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;text-shadow: 0px 1px 1px #000;color:#f2f1f1;border-right:1px solid #666;padding:9px 10px 8px}
#menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdzBtyGk7_p623VQBatp0wfj-VSXMrMaRmJTgaDkyuZcNLAQ3yre8T5wus4rTrYZnNSp-QbRNBNebamzUdeVsFJzk7p7tQTi91hzxLwChR3G7cPN8ycxLoaLAx-AFd8T4foMUuGzbf4As/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:9px 24px 8px 10px}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:170px}
#menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0}
#menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
6. Cari kode </head>, kode tersebut biasanya terdapat dua, kamu cari kode yang kedua
7. bila sudah ketemu, letakkan kode berikut tepat dibawah kode </head> 
 <div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About Us</a></li>
<li><a class='trigger' href='#'>Contact Us</a>
<ul>
<li><a href='#'>Goggle +</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Twitter</a></li>
</ul>
</li>
<li><a href='#'>Sport</a></li>
<li><a href='#'>Culture</a></li>
<li><a class='trigger' href='#'>Entertainment</a>
<ul>
<li><a href='#'>Music</a></li>
<li class='hr'/>
<li><a href='#'>Movie</a></li>
<li class='hr'/>
<li><a href='#'>Television</a></li>
</ul>
</li>
<li><a href='#'>Health</a></li>
<li><a class='trigger' href='#'>More</a>
<ul>
<li><a href='#'>Themes</a></li>
<li class='hr'/>
<li><a href='#'>Tutorial</a></li>
<li class='hr'/>
<li><a href='#'>Resource</a></li>
<li class='hr'/>
<li><a href='#'>Advertise</a></li>
<li class='hr'/>
<li><a href='#'>Javascript</a></li>
</ul>
</li>
</ul>
<div class='menusearch'>
<div style='float:right;padding:4px 8px 0 0;'>
<form action='http://www.google.com/search' method='get' target='_blank'>
<input name='sitesearch' style='display:none;' value='http://boma-internet.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:12px Arial;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkj_ns9Qfwa_GPIv8MPutg0KKOV3hQWfgiG_O2cD02LHWSEPHZSWHWbLWDykmkAZgdOsjqo_KDKY4cy7RaeEX8FfP5gdVitqSVfbEGJyznGJXzaMai500frw-DWmVpVhTznpLHTr-3E6U/s1600/field-bg.gif) no-repeat;' type='text' value='Search on this site...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-dtS6a29GQW-c7hCF36NrEyvAIWHcml9e_m0dKxPaCI_vBFnflZRntBd86jcz4-LaFfwwp5zMGn8kdElSloMsYyIfJ067IhruO4QDHDumA9TWw4UknA9m_9Q4JnZlcWohWokTi8X-gLA/s1600/bg_search.gif' type='image' value='Search'/>
</form>
</div>
</div>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div> 
Keterangan : Yang warna merah adalah link yang akan dituju
Yang warna biru adalah judul dari Menu dropdownnya
Yang warna ungu, ganti dengan url blog kamu

8.) Sebelum menyimpan template, sebaiknya klik pratinjau/preview terlebih dahulu, supaya bisa melihat apakah widgetnya sudah benar atau tidak
9.) bila sudah, klik Simpan template.
Makasih Kunjunganya yah sob semoga bisa membantu .

Itulah sedikit Artikel Tutorial Membuat Menu Horizontal Dropdown + Search engine terbaru dari kami

Semoga artikel Tutorial Membuat Menu Horizontal Dropdown + Search engine yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai All About Android. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Artikel Tentang Tutorial Membuat Menu Horizontal Dropdown + Search engine Terbaru

Share this