Cara menciptakan Menu Navigasi Horisontal dan Kotak Pencarian di Blog. Menu Navigasi merupakan elemen yang harus diperhatikan di dalam Blog yang mmentingkan penampilan dan style . Ada bberapa jenis sajian Navigasi untk Blog, diantaranya Nanigasi Horizontal, Navigasi Vertikal, dlln.
Untuk menciptakan sebuah Menu Navigasi Horizontal sangatlah mudah, dan aku akan memakai sajian Horizontal yang sederhana (tanpa cabang). Contoh tampilan menunya dapat Anda lihat dibawah.
Cara Membuat Menu Navigasi Horisontal dan Kotak Pencarian di Blog
1. Login Ke Blog Masing-Masing
2. Klik Edit> HTML
3. Letakan aba-aba dibawah ini Diatas ]]></b:skin>
/*-- (Nav & Search Box) --*/
#nav{
background: #1c426d; /* Warna backgroud Kotak Navigasi */
height:31px; /* Tinggi Kotak Navigasi */
padding:0px;
margin-bottom:5px
}
#nav-left{
float:left;
display:inline;
width:580px
Untuk menciptakan sebuah Menu Navigasi Horizontal sangatlah mudah, dan aku akan memakai sajian Horizontal yang sederhana (tanpa cabang). Contoh tampilan menunya dapat Anda lihat dibawah.
Cara Membuat Menu Navigasi Horisontal dan Kotak Pencarian di Blog
1. Login Ke Blog Masing-Masing
2. Klik Edit> HTML
3. Letakan aba-aba dibawah ini Diatas ]]></b:skin>
/*-- (Nav & Search Box) --*/
#nav{
background: #1c426d; /* Warna backgroud Kotak Navigasi */
height:31px; /* Tinggi Kotak Navigasi */
padding:0px;
margin-bottom:5px
}
#nav-left{
float:left;
display:inline;
width:580px
Keterangan Ganti Tulisan warna merah diatas , sesuai dengan dengan temmplate Anda. Jika ingin mengganti bacround sajian navigasi dengan sebuah gambar, maka tambahkan aba-aba url( alamat Gambar) di belakang aba-aba "warna bacround kotak navigasi tersebut" Contohnya:
background: #1c4456d url(http://url-gambar);
4. Cari Kode
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Creating Website (Header)' type='Header'/>
</b:section>
<div style='clear: both'/>
</div>
5. Kalau sudah ketemu Copy kemudian letakan aba-aba ini dibawahnya.
<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
6. Sehingga Urutannya menyerupai dibawah ini.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Creating Website (Header)' type='Header'/>
</b:section>
<div style='clear: both'/>
</div>
<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML30' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == "") {this.value = "cari artikel disini...";}' onfocus='if (this.value == "cari artikel disini...") {this.value = ""}' type='text' value='cari artikel disini...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
7. Save Template.
Sekarang Anda lihat hasilnya, Jika anda tidak mau memakai aba-aba pencaharian maka hapus saja aba-aba yang dicetak tebal beres kan, Wasalam (http://contohblogspotnih.blogspot.co.id)
Sumber http://contohblogspotnih.blogspot.com/
background: #1c4456d url(http://url-gambar);
4. Cari Kode
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Creating Website (Header)' type='Header'/>
</b:section>
<div style='clear: both'/>
</div>
5. Kalau sudah ketemu Copy kemudian letakan aba-aba ini dibawahnya.
<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
6. Sehingga Urutannya menyerupai dibawah ini.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Creating Website (Header)' type='Header'/>
</b:section>
<div style='clear: both'/>
</div>
<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML30' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == "") {this.value = "cari artikel disini...";}' onfocus='if (this.value == "cari artikel disini...") {this.value = ""}' type='text' value='cari artikel disini...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
7. Save Template.
Sekarang Anda lihat hasilnya, Jika anda tidak mau memakai aba-aba pencaharian maka hapus saja aba-aba yang dicetak tebal beres kan, Wasalam (http://contohblogspotnih.blogspot.co.id)
Sumber http://contohblogspotnih.blogspot.com/
</div>
</b:includable>
</b:widget>
<b:widget id='HTML30' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == "") {this.value = "cari artikel disini...";}' onfocus='if (this.value == "cari artikel disini...") {this.value = ""}' type='text' value='cari artikel disini...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
7. Save Template.
Sekarang Anda lihat hasilnya, Jika anda tidak mau memakai aba-aba pencaharian maka hapus saja aba-aba yang dicetak tebal beres kan, Wasalam (http://contohblogspotnih.blogspot.co.id)
Sumber http://contohblogspotnih.blogspot.com/
</b:includable>
</b:widget>
<b:widget id='HTML30' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == "") {this.value = "cari artikel disini...";}' onfocus='if (this.value == "cari artikel disini...") {this.value = ""}' type='text' value='cari artikel disini...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
7. Save Template.
Sekarang Anda lihat hasilnya, Jika anda tidak mau memakai aba-aba pencaharian maka hapus saja aba-aba yang dicetak tebal beres kan, Wasalam (http://contohblogspotnih.blogspot.co.id)
Sumber http://contohblogspotnih.blogspot.com/
Related Posts
- Cara Menciptakan Goresan Pena Arab Bismilah Dan Alhamdulilah Di BlogCara menambahkan basmalah (tulisan arab) dan alhamdulilah diawal dan diakhir artikel blog. Kita sebagai umat islam niscaya sudah mengenal ba ...
- Cara Menambahkan/Embeda Comment Box Dibawah Posts Blogger Cara Menambahkan/Embeda Comment Box Dibawah Posts Blogger Membuat kotak komentar dibawah posting blogger yakni trik yang sangat cantik kenapa ? seb ...
- Cara Menciptakan Tabbed Widget Sidebar Dengan Jquery Cara menciptakan Tabbed Widget Sidebar dengan jQuery. Apakah Ada pernah atau sering melihat blog yang mempunyai tab area widget di sidebar terdiri ...
- Membuat Ikon Media Umum Sederhana Di BlogspotSetiap link Daftar Widget dengan $ type=social_icons dan dalam judul akan menjadi daftar ikon sosial kalau template Anda terintegrasi Blogger sosial ...
- Cara Menghapus Atau Menghilangkan Judul & Gambar Thumbnail Di Halaman StatisCara menghapus atau menghilangkan, menyembunyikan Judul pages dan gambar feature Image Thumbnail di halaman statis. Biasanya muncul judul halaman la ...
- Menampilkan Rating Bintang Dipencarian GoogleAnda pernah melihat Rating Bintang warna ke kuning-kuningan yang muncul ketika kita memasukan kata kunci di google? Hasil Googling dengan kita mencip ...
