Cara Menciptakan Sajian Dropdown Di Blog Dengan Gampang Terbaru

Menu Dropdown yakni sebuah sajian kafetaria navigasi pada blog, wordpress maupun website yang mempunyai sub sub sajian menurun kebawah kalau mouse / pointer di arahkan. Sebelumnya aku ada share cara menciptakan sajian kafetaria di blog tanpa edit html / css / php dengan tampilan standar. Sedangkan sajian tab yang satu ini berbeda dengan yang sebelumnya lantaran sanggup memuat beberapa sub sajian jadi sanggup menciptakan sajian lebih banyak sehingga pengunjung sanggup menelusuri semua isi konten blog secara gampang dan cepat. Selain itu, dengan menciptakan / menambah / memasang sajian dropdown ini pada blog maka tampilan blog akan menjadi lebih professional dan menarik. Untuk cara pasang nya pun tidak ribet bagi pemula hanya dengan menambahkan beberapa script isyarat html dan css pada template blog maka sajian dropdown yang keren ini akan muncul di tampilan blog kita serta untuk penempatan widget sajian dropdown ini teman juga sanggup mengatur nya baik dibawah maupun diatas header blog secara horizontal sesuai dengan keinginan.

Kali ini aku akan share gimana Cara Membuat Menu Dropdown Di Blog Dengan Praktis Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat teman yang ingin menambahkan sajian dropdown pada blog yang bagus, unik dan keren.

Cara Membuat Menu Dropdown Dengan CSS :

1. Bikin sajian dropdown menyerupai diatas yaitu dengan cara masuk ke sajian Template dan klik Edit HTML

2. Kemudian cari isyarat ]]></b:skin>, gunakan Ctrl+F untuk memudahkan pencarian

 3. Lalu masukkan isyarat dibawah ini sempurna diatas isyarat ]]></b:skin>

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCOgI1LYxzfkmWNwSjf7psOaLuHiykwauhxBYMj0YZz25g9L5QLB9ZWdTSvIkz5MOeuNiTzcl3RE5KBqI4Ohi5O0fvH72ZEWldtwsk3mJ3Tg36QUYsfeSJrDYlX0Rcdks88NshS0KxJSs/s1600/menubar.png) repeat-x;width:940px;margin:0 auto;padding:0 auto} #menuwrapper{width:940px;height:35px;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;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieFQdFZcavQbiEMWjwB0oerI3xSS-wXAeMz-d0zshyxxdlkceiU3K9sZY6GwtPa3CXBy4TRmUvO5VOHgqrW-5oQK5TspTzz54mn7QlL5elw23F5fLmGpE7ZKXOcip2gDEA3IsaVaIkKeI/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 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}

#Kode warna biru untuk mengatur ukuran lebar sajian dropdown, sesuaikan dengan template sobat

4. Setelah itu cari lagi isyarat </header>, gunakan Ctrl+F untuk mempermudah

5. Lalu copy isyarat berikut :

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn-RnLle8n_irm2aJp6LVWFtFthHpLrkrzS87WXORRXgAWG9OgDH3-0V8M53iXW14c_LJXmA5DT8I6zlHZaqo_Y8CpQ52tyPGKU8gr2u54oej7tXVwkn4483TcXK5dL2_Y4Vc7zJZN2Sg/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='#'>Tentang Admin</a></li>
<li><a class='#'>Contact Us</a>
<ul>
<li><a href='#'>Goggle +</a></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Facebook</a></li>
</ul>
</li>
<li><a href='#'>Tutorial</a></li>
<li><a class='#'>Tips dan Trik</a>
<ul>
<li><a href='#'>Komputer</a></li>
<li class='hr'/>
<li><a href='#'>Blogspot</a></li>
<li class='hr'/>
<li><a href='#'>Internet</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Software</a>
<ul>
<li><a href='#'>Application</a></li>
<li class='hr'/>
<li><a href='#'>Games</a></li>
<li class='hr'/>
<li><a href='#'>Anti Virus</a></li>
<li class='hr'/>
<li><a href='#'>OS Windows</a></li>
<li class='hr'/>
<li><a href='#'>Driver</a></li>
<li class='hr'/>
<li><a href='#'>Cracking</a></li>
<li class='hr'/>
<li><a href='#'>Hacking</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='gresekilmu.xyz/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='gresekilmu.xyz'/>
<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:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdBDCWEWMAu92sO3R4IuOLHbIH6_Sry15uRhY4q_nXMFvvNHoVy2sZp8W7CtLECYHtrN5EJKjnKaLpaniF7m3ra9bdk-fQsKXcKvkOQuX0tbbYL5T_liSQQPO73JnTZYFw-pLdC8F61M/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini sob......'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHccHCAQ6BxJyedZSqHOBX7hiNVE2YdqKVcc2AGx2HWpjyHNbroziwCTublctpPF-qKajHUrzUhB8Fbjq2LLVBNlEETUGc9oTO31X8Sa9r_h9E14jbQZFpufOdFhS_P451LqdRWZ_kH7c/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

#Ganti isyarat warna biru dengan nama sajian dan sub menu
#Ganti isyarat warna merah dengan url tujuan sajian tersebut
#Ganti isyarat warna hijau dengan alamat blog sobat

Jika sudah, masukkan semua isyarat tersebut sempurna dibawah isyarat </header> dan klik Simpan template.. Selesai dan lihat hasilnya

Selain memasang sajian dropdown dibawah header menyerupai cara diatas, teman juga sanggup memasangnya diatas header blog dengan cara pada tutorial no5 masukkan kodenya sempurna diatas isyarat <header> bukan </header>. Atau teman juga sanggup memasangnya pada sajian tata letak yang gampang dengan cara tambahkan gadget pada bawah header, sidebar atau footer blog dan masukkan isyarat yang ada tutorial no5 tersebut kemudian simpan.

Nah itulah bagaimana cara menciptakan sajian dropdown di blog dengan gampang dan cepat.

Silahkan dicoba

Tweet

Subscribe to receive free email updates: