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 alasannya 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 aba-aba 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 aba-aba ]]></b:skin>, gunakan Ctrl+F untuk memudahkan pencarian

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

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(http://2.bp.blogspot.com/-eVufkC686Cw/TwGo8YAlWwI/AAAAAAAAAYM/tWP7l3ENpjY/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(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/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 aba-aba </header>, gunakan Ctrl+F untuk mempermudah

5. Lalu copy aba-aba berikut :

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='http://1.bp.blogspot.com/-Yx-NuFKviSQ/TwETaPMdmfI/AAAAAAAAATs/fLZvwofZ8N0/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='http://carazain.blogspot.co.id/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://carazain.blogspot.co.id'/>
<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(http://1.bp.blogspot.com/-kmhya2YU7jE/Tv9JVye66xI/AAAAAAAAAP8/S0ZeuQ910Ow/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini sob......'/><input align='top' id='search-btn' src='http://4.bp.blogspot.com/-b9FTjjXAbp4/TwEo-YIwe-I/AAAAAAAAAU4/Du-VmpE9hPE/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

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

Jika sudah, masukkan semua aba-aba tersebut sempurna dibawah aba-aba </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 aba-aba <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 aba-aba yang ada tutorial no5 tersebut kemudian simpan.

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

Silahkan dicoba

Berbagi :