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
- Masuk ke akun blogger anda
- Pilih dan klik Template >> Edit Html >> Lanjutkan >> centang Expand Template Widget >> tekan Ctrl + F di keyboard
- Cari kode ]]></b:skin>
- 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} - 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/AVvXsEg6302Q7RUQMHEyQunp4hPuhKelzRbq5KAc0W_C-y2VT4b8oKr6D70zniuWYwbLxmvXf6R7UVLrNXZ4vNtTcxdoXQz6_xJQGpCf7RONnwG9FKIaX8cssaJLiEcLol3Rmh3NMoiJ9IjChrE/s200/search-c.png' style='border: 0pt none ; vertical-align: top; padding-top:3px' type='image'/>
</form>
</div>
</div>
</div>
</div>
</div>
</div> - Selesai. Silahkan pratinjau perubahan blog anda, jika tidak ada error maka pada tampilan Preview, anda akan melihat tampilan menu horizontal blog search engine.
- Simpan Template
