Cara Menciptakan Sajian Navigasi Dan Tombol Search Diatas Header Blog

Cara Memasang Menu Navigasi dan Tombol Search di Atas Header - Menu navigasi sanggup dibentuk double untuk blog yang memiliki sajian atau kategori yang banyak. Biasanya sajian navigasi terletak dibawah header dan untuk menambah menu navigasi + search diatas header blog caranya sangat mudah. Menu navigasi diatas header blog nantinya sanggup anda isi dengan sajian menyerupai contact, sitemap, atau disclamer atau apa saja berdasarkan selera dan kebutuhan anda.

Cara Membuat Menu Navigasi dan Tombol Search Diatas Header
1. Login ke blogger
2. Pilih Template => Edit HTML
3. Tekan Ctrl+F, cari arahan ]]></b:skin> kemudian letakkan arahan berikut diatasnya

/* Top Menu */
.menuatas{font:13px Arial, verdana, Sans-Serif;color:#ccc;min-height:32px;background:#333;}.menuatas ul{margin:0;padding:0;}.menuatas li{list-style:none;float:left;display:inline;position:relative;margin:0;padding:0;}.menuatas li a{display:block;text-decoration:none;color:#ccc;line-height:32px;font-size:100%;padding:0 15px;}.menuatas li:hover &gt; a{background:#000;color:#fff;}
#menu-right{float:right;display:inline;width:260px;padding-top:5px;margin-right:10px}
#topsearch1 #feed-1{margin-top:0;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#333}
#topsearch1 #feed-s{width:226px}
#search{height:18px;width:150px;background:#aeaeae;padding:0}
#search input{border:0;background:none;color:#575757}
#s{font-size:12px;width:120px;padding-left:4px;background:none;margin:0}
#topsearch #search{margin-top:0;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#fff;border:1px solid #999}
#topsearch #s{width:125px}

4. Lalu cari arahan <div id='outer-wrapper'> dan letakkan arahan berikut dibawahnya

Penerapannya menyerupai dibawah ini

<div id='outer-wrapper'>

<div class='menuatas'>

<ul>

<li><a href='/' title='Kembali ke Beranda'>Beranda</a></li>

<li><a href='/' title='Tentang'>Tentang</a></li>

<li><a href='/' title='Hubungi'>Kontak</a></li>

<li><a href='/' title='Pasang Iklan'>Pasang Iklan</a></li>

<li><a href='/' title='follow'>follow</a></li>

</ul>

<div id='menu-right'>

<div style='float:right'>

<div id='topsearch'>

<div id='search'>

<form action='/search' id='searchform' method='get' name='searchform'>

<input class='keyword' id='s' name='q' onblur='if (this.value == "") {this.value = "Search..";}' onfocus='if (this.value == "Search..") {this.value = ""}' type='text' value='Search..'/>

<input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJZIkt8i0jvRW8ccWhyl1I4dBnrULD57QA3LRrJoYk9jisW96GIpH1K40KWJonhoWqZQr9JR5lPDPSWEJ8pwWJLXyWxmBYLCj6Bmv9ZZjBJ1aQL2HUmHIhKWi37dRorMLIWZV4kOuLKmw/s200/search-c.png' style='border: 0pt none ; vertical-align: top; padding-top:3px' type='image'/>

</form>

</div></div></div></div>
</div>

<div style='clear: both;'/>

Atau anda sanggup meletakkan arahan tersebut diatas/setelah kode <div id='header-wrapper'>

5. Simpan

Demikianlah tutorial blog yang singkat biar bermanfaat.

Share this post