Cara Membuat Menu Navigasi Horisontal plus Kotak Search di Blog

Postingan kali ini membahas tentang cara membuat menu navigasi horisontal plus kotak search. Fungsi memasang menu navigasi dan kotak pencarian ini agar mempermudah pembaca untuk melihat atau melakukan pencarian suatu label / judul yang ada di blog yang dikunjunginya. Untuk mempersingkat pembahasan, silahkan simak cara membuat menu navigasi horizontal bertingkat dengan kotak pencarian (search) dibawah ini.

Cara Membuat Menu Navigasi Horisontal plus Kotak Search di Blogspot
1. Login ke blogger
2. Pilih Template => Edit HTML
3. Tekan Ctrl+F, cari kode ]]></b:skin> lalu letakkan kode berikut diatasnya

#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgUFe0KlLxOaxaP7m1nipDHP2fZ5GaRf8H7vVtog0GTVq8zbgJmIP291pyIjmf_XZIw_fzgvtEnkYrMFOJDfodsEGzcKuEnD63cdeL6RDwEo67fczrQy8Y330m7dr1n7gcxWMSr8JI82fs/s1600/videobar.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/AVvXsEiCMQwksL3sbZILfnN0yc_CzLKQuiWSnaUMwUoqOJEBtXD1_efABeAXiSX1vdjAVRISleJGtHFvtr8yhfTs471_X9KhhMsA1LC0VM8Fz1VYEDVPLMsGyBg7dTIdKBOmUWSxg1YxDJJmYA4/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}

4. Cari kode yang mirip dengan dibawah ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Terlintas (Header)' type='Header'/>
</b:section>
<div style='clear: both'/>
</div>

5. Lalu letakkan kode berikut dibawahnya

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibXMD8JfrJcrDE3G53T7q8A-l48dI1bpfEjMQUkM6PaBIReB8y73UXqV1Mo6P_JZfWfi8fWM0z7N9kLLUg5uBdZCuLXUVnruRKql4YtgBN7FjxNUIBDYmatoWJC_NlvoYwz5oo_3msSnQ/s1600/home_white.png' style='padding:0px;'/></a></li>
<li><a href='#'>About Me</a></li>
<li><a class='trigger' href='#'>Blogging</a>
<ul>
<li><a href='#'>Tutorial Blog</a></li>
<li class='hr'/>
<li><a href='#'>Seo</a></li>
<li class='hr'/>
<li><a href='#'>Efek-efek blog</a></li>
</ul></li>
<li><a class='trigger' href='#'>Model</a>
<ul>
<li><a href='#'>Model Rambut Pria</a></li>
<li class='hr'/>
<li><a href='#'>Model Rambut Wanita</a></li>
<li class='hr'/>
<li><a href='#'>Model Model Baju</a></li>
</ul></li>
<li><a class='trigger' href='#'>Hot News</a>
<ul>
<li><a href='#'>Gosip Artis</a></li>
<li class='hr'/>
<li><a href='#'>Lifestyle</a></li>
<li class='hr'/>
<li><a href='#'>Bola</a></li>
<li class='hr'/>
<li><a href='#'>Motor GP</a></li>
<li class='hr'/>
<li><a href='#'>Unik Menarik</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://lintas-tutor.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' style='width:170px;border:none;padding:4px 10px; font:12px Arial;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBg20Cy5SKDw0YGZyUldsv6JXxF4vETyxF1CFp1mx9rc-JUJlVi3kAMQFP4JHCtvHcPKA5X8QdRgJ3v51DSYqgmlzEUjw4qyvZAoXSBA0rDy1loP8SLu5RE3y6KmvaVIc8JaJ95w__G4s/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-6ae1rDTdEacktx2gOHPermpSgZ2iV85OMRfeaMiwWcRXozbQS0qmZ04rzPtk6FW6M1212hV1CWEe_t0LaTBh-NFqrnT6DntAnSVnkmLSOUTXjCANgkK9uuCzu4GNBnXxivWxRtEbN7o/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

Keterangan :
- Tanda pagar ( # ) ubah dengan link label atau link posting
- width:960px; sesuaikan dengan lebar blog anda
- Ubah http://lintas-tutor.blogspot.com dengan url blog anda

6. Simpan template

Demikianlah ulasan mengenai cara membuat menu navigasi horisontal plus kotak pencarian, semoga bermanfaat.

tutorial blog

Terlintas

Cara Membuat Menu Navigasi Horisontal plus Kotak Search di Blog

Related Posts

Entri Populer