TIPS desain ini lanjutan tips sebelumnya tentang navigasi menu di atas header blog. Kali ini ada plusnya, yakni navbar menu plus kotak pencarian. Contohnya seperti topmenu di atas blog GBL ini.
1. Blogger Dashboard >> Template >> Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>
/* CSS FOR SEARCH BAR STARTS */
#search{width:330px; border:none;background:transparent;height:32px;padding:0;text-align:left;overflow:hidden;border-left:1px solid #BBB}
#search #s{width:70%; background:none;color:#3F3F3F;border:0;padding:4px;margin:3px 0 0 12px;float:left}
#search .search-image{border:0;vertical-align:top;float:right;margin:8px 4px 0 2px}
#search-wrap{padding:15px 0}
.topsearch #search{margin-top:0;margin-bottom:0}
/* CSS FOR MENU BAR STARTS */
.shadowblockmenu{
font-weight: bold;
font-size: 85%;
width: 980px;
background-color: #eeeded; -webkit-box-shadow: 0 10px 10px #666;
}
.shadowblockmenu ul{
border: 1px dotted #BBB;
border-width: 0px 0;
padding: 0;
margin: 0;
overflow: hidden;
}
.shadowblockmenu ul li{
display: inline;
margin:0;
padding:0;
}
.shadowblockmenu ul li a{
display:block;
float:left;
text-transform: none;
color: black;
padding: 8px 15px 8px 9px;
margin: 0;
text-decoration: none;
}
.shadowblockmenu li:nth-of-type(1) a{
padding-left:25px;
}
.shadowblockmenu li:nth-of-type(2) a{
padding-left:25px;
}
.shadowblockmenu li:nth-of-type(3) a{
padding-left:25px;
}
.shadowblockmenu li:nth-of-type(4) a{
padding-left:25px;
}
.shadowblockmenu li:nth-of-type(5) a{
padding-left:25px;
}
.shadowblockmenu ul li a:hover{
color: yellow;
}
Note: sesuaikan lebarnya dengan lebar header blog Anda (angka berwarna merah).
3. Copas kode berikut ini di atas kode <div id='header-wrapper'>
Catatan: jika tidak ada kode tersebut, cari kode <body>, <body .... > atau
<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/> dan Copas kode berikut ini di atas-nya.
<div class='shadowblockmenu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='#'>Sitemap</a></li>
<li><div class='topsearch' style='float: right'>
<div class='clerfix' id='search'>
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == "") {this.value = "Search here...";}' onfocus='if (this.value == "Search here...") {this.value = ""}' type='text' value='Search Here...'/>
<input class='buttonsubmit' name='submit' type='submit' value='Search'/>
</form>
</div>
</div>
<div style='clear:both;'/></li>
</ul>
</div>
NB:
- Kode header tiap template mungkin berbeda. Untuk pengguna New Johny Wuss, simpan kode tersebut di atas kode ini:
<div class='outerpic-wrapper'>
<div class='header-wrapper'>
- Ganti nama menu dan linknya dengan "kepunyaan" Anda.
4. Save Template!
Sudah.... beres.... segitu doang kok cara membuat top menu plus kotak pencarian di atas header.
Good luck and happy blogging!
Sumber
0 Comments