Cara Membuat Menu Horizontal Blog Search Engine

Cara Membuat Menu Horizontal Blog Search Engine - Setelah mengetahui beberapa contoh menu horizontal dan cara membuat menu horizontal sederhana, kini kita akan melengkapi menu horizontal yang telah kita buat dengan adanya search engine pada menu horizontal tersebut. Untuk blog saya ini, memang tidak saya terapkan menu horizontal search engine karena search engine sendiri sudah ada di halam utama blog ini. Untuk contohnya seperti tampilan gambar berikut ini

Berikut Cara Membuat Menu Horizontal Blog Search Engine

1. Masuk ke akun blogger sobat
2. Pilih dan klik Template >> Edit Html >> Lanjutkan >> centang Expand Template Widget >> tekan Ctrl + F di keyboard
3. Cari kode ]]></b:skin>
4. Masukkan kode CSS berikut tepat diatas ]]></b:skin>
   navse-element{width:900px; margin-top:15px; padding:0; float:center;}
   #navse{ background:#FFFFFF url() no-repeat center top;height:32px; padding:10px 0 0; margin-bottom:0px; clear:both; margin:0 auto;}
   #navse-left{float:left; display:inline; width:680px; padding-left:10px; padding-top:1px}
   #navse-right{float:right; display:inline; width:170px; padding-top:3px; padding-right:23px}
   #navse ul{position:relative; overflow:hidden; padding:0; margin:0; font-weight:bold; font-size:12px}
   #navse li{cursor:pointer; float:left; margin:0 padding:0; height:30px; display:inline}
   #navse ul li{float:left; list-style:none}
   #navse ul li a, #navse ul li a:visited{background:#FFFFFF url() no-repeat right;border:0px solid #fff; margin:0 1px 0 0; float:left; padding:4px 12px; text-transform:normal; color:#000000; font-weight:bold; font-size:12px; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; border-radius:3px}
   #navse ul li a:hover{color:#000000;border:0px solid #FFFFFF;background:none;}
   #navse ul li a.current, #navse ul li a.current:visited, #navse ul li a.current:hover{background:none; color:#000000; border:0px solid #FFFFFF }
   src-m{border:1px solid #999; height:18px; width:180px; padding-top:0px; background:#f6f4f4; }
   #src-m input{border:0; background:none; color:#777}
   #s-m{font-size:12px; width:180px; padding-left:4px; margin:0; background:none}
   #tsrc-m #src-m{margin-top:0px;background-color:#FFFFFF;border:1px solid #dedede; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px}
   #tsrc-m #s-m{width:155px}
5. Cari kode dengan struktur seperti berikut ini
   <div id='header-outer'>
   <div id='header-inter'>
   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title=' (Header)' type='Header'>
   <b:includable id='title'>
   ----------------------
   ----------------------
   ----------------------
   </b:includable>
   </b:widget>
   </b:section>
   </div>
   </div>
   </div>
   
   Letakkan kode berikut tepat dibawah kode </b:section> diatas
   
   <div id='navse-element'>
   <div class='widget-content'>
   <div id='navse'>
   <div id='navse-left'>
   <ul>
   <li><a class='current' href='/' title='home'>Home</a></li>
   <li><a href='link'>Menu 1</a></li>
   <li><a href='link'>Menu 2</a></li>
   <li><a href='link'>Menu 3</a></li>
   <li><a href='link'>Menu 4</a></li>
   <li><a href='link'>Menu 5</a></li>
   </ul>
   <script language='javascript'>setPage()</script>
   </div>
   <div id='navse-right'>
   <div id='tsrc-m'>
   <div id='src-m'>
   <form action='/search' id='searchform' method='get' name='searchform'>
   <input class='keyword' id='s-m' name='q' onblur='if (this.value == "") {this.value = "Cari artikel..";}' onfocus='if (this.value == "Cari artikel..") {this.value = ""}' type='text' value='Cari artikel..'/>
   <input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH304PH85zvfKmUCgJRb8qGrjy5J4e5UOvN-Y_CbE2KI1ETbBmVU3SBq23ChRuesHqLU6QhhvkSvvlqXJ_62Rbntco5wN97aDi-2J4rQCHrjWnTf22BL5AyYCp33HaAEmPjHqY1yd9bMI/s200/search-c.png' style='border: 0pt none ; vertical-align: top; padding-top:3px' type='image'/>
   </form>
   </div>
   </div>
   </div>
   </div>
   </div>
   </div>
6. Selesai. Silahkan pratinjau perubahan blog sobat, jika tidak ada error maka pada tampilan Preview, sobat akan melihat tampilan menu horizontal blog search engine.
7. Simpan Template

Semoga bermanfaat dan bisa diterapkan dalam blog sobat setelah membaca artikel ini, Cara Membuat Menu Horizontal Blog Search Engine