Cara Menciptakan Sajian Dropdown Di Blog Dengan Gampang Terbaru

Menu Dropdown adlah sebuah sajian kafe navigasi pada blog, wordpress maupun WEBsite yang mempunyai sub sub sajian menurun kebawah kalau mousse / pointer di arahkan. Sebelumnya aku ada share tips menciptakan sajian kafe di blog tanpa edit html / css / php dengan tampilan standar. Sedangkan sajian tab yang satu ini berbeda dengan yang sebelumnya alasannya ialah sanggup memuat bbrapa sub sajian jadi sanggup menciptakan sajian lebih banyak sehingga pengunjung sanggup menelusuri semua isi konten blog setips gampang dan cepat. Selain itu, dengan menciptakan / menambah / memasang sajian dropdown ini pada blog maka tampilan blog akan menjadi lebih professional dan menarik. Untuk tips pasang nya pun tidak ribet bagi pemula hnya dengan menambahkan bbrapa script arahan html dan css pada template blog maka sajian dropdown yang keren ini akan muncul di tampilan blog kita serta untk penempatan widget sajian dropdown ini teman juga sanggup mengatur nya baik dibawah maupun diatas header blog setips horizontal sesuai dengan keinginan.

Kali ini aku akan share gimana Trik 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.

Trik Membuat Menu Dropdown Dengan CSS :

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

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

 3. Lalu masukkan arahan dibawah ini sempurna diatas arahan ]]></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:upperchargere;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 untk mengatur ukuran lebar sajian dropdown, sesuaikan dengan template sobat

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

5. Lalu copy arahan 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'>Perangkat Lunak</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://tipszain.blogspot.co.id/search' method='get' target=''>
<input name='siujiearch' style='display:none;' value='http://tipszain.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 arahan warna biru dengan nama sajian dan sub menu
#Ganti arahan warna merah dengan url tujuan sajian tersebut
#Ganti arahan warna hijau dengan alamat blog sobat

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

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

Nah itulah gimana tips menciptakan sajian dropdown di blog dengan gampang dan cepat.

Silahkan dicoba