Powered by Blogger.

Tutorial Membuat Menu Horizontal Dropdown + Kotak Search Engine

01:10 |


Dengan adanya menu horizontal pada blog akan memudahkan pengunjung melihat dan menelusuri isi dari blog atau website kita dengan mudah serta menuntun pengunjung menuju halaman tertentu dengan cepat. Jika sobat blogger berminat menambahkan menu horizontal ini (bagi yang belum punya) bisa ikuti beberapa langkah berikut.

Cara menambahkannya :

1. Login ke account Blogger sobat >> Dashboard >> Template >> Edit HTML.

2. Letakkan kode berikut diatas kode ]]></b:skin> (gunakan bantuan Ctrl+F).

#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFamDZxVX23lCHLEBhymLaHw34JDSDevRF7DdJ4G9Xhw1CkWI_LkamAFPCJQWwkSt2yUSYerIMkkFv6q6yhqLaQA9eXVvHw3Jlax4oVjLlwwIA6aZ-qgfQ_5Eubp0vezzM_9FqjeBuPj8/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/AVvXsEifhgwI3vplWBh1onBYG4_vVA5Fz3-Cg1VyVuAUnawxf0H5ekVglKRzycWt3k9E9usrJBPVPnm9WPYHDrZX8obvVAae8bSWs_ghKDyXzNKFgtkVG9v0QcIC1cKMaWvfBGAf8x9dPsQIg68/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}
  • Kode berwarna biru dapat diganti sesuai keinginan sobat.
3. Setelah langkah nomor 2 selesai, letakkan kode berikut tepat dibawah kode </head> (cari menggunakan bantuan Ctrl+F).
Atau 
Sobat bisa meletakkan  kode ini pada menu tata letak >> tambah gadget >> HTML/JavaScript >> Save. Lalu letakkan di tempat yang sobat sukai.

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a class='trigger' href='#'>Menu 2</a>
<ul>
<li><a href='#'>Sub menu 2.1</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 2.2</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 2.3</a></li>
</ul>
</li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a class='trigger' href='#'>Menu 5</a>
<ul>
<li><a href='#'>Sub menu 5.1</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 5.2</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 5.3</a></li>
</ul>
</li>
<li><a href='#'>Menu 6</a></li>
<li><a class='trigger' href='#'>Menu 7</a>
<ul>
<li><a href='#'>Sub Menu 7.1</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 7.2</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 7.3</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 7.4</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 7.5</a></li>
</ul>
</li>
<li><a href='#'>Menu 8</a></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://fefidwip.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/AVvXsEjB6nWaYNxm3FQ7Wt5j-4EY3ZUoo1ipZEL7rLzRnUPmsnn0k3i8CNvaKSlMvPwJ2bRpN42Ey7gSC-drQoTPdV55EE1Q7v9gYaGL6Ywn7i8a55raRuwcMrBbH3dLMpg2xuUePY_EUpq22xs/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/AVvXsEiBvudkiuGJLfpxYMFTtoKsAEDauN8_R7BdQ-T6AG5HPFyUfqrpu8U7zu1UlWII5O3rU1X4r3ecDl5IG7zvcPdpTZSGWqpSNft0DL-Slw4Kkl7P3nBMrNBPuPu0Oc2u1GXbqOAms7hbEBI/s1600/bg_h.gif' type='image' value='Search'/>
</form>
</div>
</div>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div> 
  • Ganti kode berwarna biru dengan nama menu yang sobat inginkan.
  • Tanda # ganti dengan alamat url yang akan dituju.
  • Kode berwarna merah ganti dengan url blog sobat.
* Untuk menghilangkan kotak search, hapus kode yang di cetak tebal.
* Jika kolom "Search on this site" dengan tombol search tidak sejajar, ubah angka 4(hijau) menjadi 5 dan 4(kuning) menjadi 3, atau bisa sobat sesuaikan sendiri.
4. Pratinjau template terlebih dahulu, jika tidak ada kesalahan silahkan Save Template sobat.
Semoga Berhasil.

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS
Diposkan oleh fefidwip
Comments
0 Comments

0 komentar:

Post a Comment

Silahkan gunakan bahasa yang baik dan santun dalam berkomentar,

Terimakasih
<-ADMIN->

Subscribe to: Post Comments (Atom)