Cara membuat Menubar Blogspot dengan Kotak Search Box

Cara membuat Menubar dengan search box - Siang sobat reggy, kali ini reggy akan menjawab pertanyaan dari para sobat. Yaitu membuat menubar di blog dengan search box. Seperti apa yang reggy jelaskan pada postingan sebelumnya, menubar atau bisa juga di sebut navigasi menu berfungsi sebagai tempat link agar pengunjung blog kalian mudah mengunjungi halaman penting blog kalian. Untuk sobat yang belum tau seperti apa menubar, liat pada bagian atas blognya reggy tulisan Home, Blogger tutorial, SEO tips. Nah, deretan menu itulah yang dinamakan menubar
cara membuat menubad dengan search box
Pada postingan kali ini, cara membuat menubar di blog nya beda dengan menubar sebelumnya. Bedanya yaitu menubar kali ini dilengkapi dengan search box di kanannya. Untuk demo bisa sobat lihat di gambar atas. Nah, search box jika di artikan ke dalam bahasa Indonesia yaitu kotak pencarian. Jadi, jika pengunjung sobat ingin mencari sesuatu di blog sobat, jadi tinggal mengetik di kotak pencarian tersebut. Untuk mengetahui bagaimana cara membuat menubar dengan search box bisa sobat langsung lihat di bawah ini

1. Seperti biasa, masuk ke blogger.com lalu login menggunakan akun google sobat
2. Masuk pada halaman Template
3. Klik Edit HTML kemudian Lanjutkan
4. Pertama - tama, cari kode ]]></b:skin> (gunakan ctrl+f untuk memudahkan pencarian)
5. Jika sudah ketemu, pasang kode di bawah ini di atas kode ]]></b:skin>
#menubar{
width:920px;
height:38px;
background:#de360f;
border-radius:2px;
float:center;
margin:0px auto;
}
#menubar-left{
float:left;
width:720px;
padding:0 0 2px 2px;
}
#menubar-right{
float:right;
width:170px;
padding-top:8px;
padding-right:18px
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
float:left;
padding:12px 10px;
color:#fff;
position:relative;
font-weight:bold !important;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
text-decoration:none;
background:#F0512D;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #de360f;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:35px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #F0512D;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:37px;
border:1px solid #de360f;
border-radius:0px 0px 8px 8px;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}
#search{
border:1px solid #F0512D;
height:20px;
width:180px;
background:#f6f4f4;
}
#search input{
color:#777;
border:none;
}
#s-m{
font-size:11px;
width:180px;
padding-left:4px;
padding-top:5px;
margin:0;
}
#search-t #search{
background-color:#FFFFFF;
border:1px solid #F0512D;
border-radius:4px 4px 4px 4px;
-moz-border-radius:4px 4px 4px 4px;
-khtml-border-radius:4px 4px 4px 4px;
-webkit-border-radius:4px 4px 4px 4px;
}
#search-t #s-m{
width:155px;
padding-top:3px;
}
6. Selanjutnya, cari kode <div id="content-wrapper">
7. Lalu pasang kode di bawah ini, di atas kode <div id="content-wrapper">
<div id='menubar'>
<div id='menubar-left'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me 1</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me 2</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me 3</a>
<ul>
<li><a href='http://blognya-reggy.blogspot.com/'>Sub menu 1</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Sub menu 2</a></li>
</ul>
</li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me 4</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me 5</a></li>
</ul>
</div>
<div id='menubar-right'>
<div id='search-t'>
<div id='search'>
<form action='/search' method='search' target='_blank'>
<input class='keyword' id='s-m' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Cari artikel disini..&quot;;}' onfocus='if (this.value == &quot;Cari artikel disini..&quot;) {this.value = &quot;&quot;}' type='text' value='Cari artikel disini..'/>
<input src='http://1.bp.blogspot.com/_C6KkooKXCEw/TIBqtV6pdmI/AAAAAAAAGyM/QUBsym_R9V0/s200/search-c.png' style='border: 0pt none ;vertical-align: top; padding-top:4px; padding-right:3px;' type='image'/>
</form>
</div>
</div>
</div>
</div>
8. Simpan Template dan lihat hasilnya

Keterangan:
  • Ganti tulisan yang berwarna Merah dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya
  • Ganti tulisan berwarna Biru (Edit me / Submenu) dengan tulisan judul menubar tersebut, seperti: About, Contact, Guest book atau lainnya
  • Untuk mengubah panjang menubar bisa sobat ganti tulisan 920px menjadi sesuai dengan keinginan sobat
  • Untuk mengganti warna menubar, coba cari kode background:#de360f; . Ganti kode yang berwarna orange dengan kode warna yang diinginkan. Cek Disini
  • Nah, jika sobat ingin menambah item menubar (list), sobat hanya tinggal Copy kode yang bergaris bawah, dan Paste di bawah kode yang bergaris bawah tersebut.
  • Bila kode <div id="content-wrapper"> tidak ada, coba ganti dengan <div id="header-wrapper"> atau <div id="outer-wrapper">

Sumber: http://blognya-reggy.blogspot.com/2012/08/cara-membuat-menubar-dengan-search-box.html
Cara membuat Menubar Blogspot dengan Kotak Search Box Rating: 4.5 Diposkan Oleh: Seribu Arsp

6 komentar:

Candra Adi mengatakan...

Sangat bermanfaat gan, di tunggu kunbal sama follbecknya !!
http://candraadi99.blogspot.com/

always on :)

mahfud ti-c mengatakan...

ketika ukuran panjangnya diperpendek kog search boxnya pindah ke bawah bank,,,,,?
mohon pencerahannya...

pasutri pria perkasa mengatakan...


PEMBESAR PENIS
obat pembesar penis permanen
obat pembesar alat vital
pro extender alat pembesar penis
obat besar panjangkan penis
oil lintah super obat pembesar penis
celana vakoou alat pembesar penis
semenax obat penyubur sperma
vimax oil oil pembesar penis
vigrx plus obat pembesar penis
vakum pembesar pembesar penis alat pembesar penis
vimax asli canada obat pembesar penis paling ampuh
pembesar penis lintah oil papua

OBAT PERANGSANG SEX
blue wizard obat perangsang
obat perangsang sex
obat perangsang wanita potenzol germany
sex drop perangsang wanita cair
obat perangsang viagra cair
obat perangsang serbuk
jelly perangsang wanita

pasutri pria perkasa mengatakan...


PEMBESAR PAYUDARA
vakum pembesar payudara
pil pembesar payudara
cream payudara wanita
obat pemontok payudara
cream pembesar payudara wanita

PELANGSING BADAN
obat pelangsing herbal
obat pelangsing badan fatloss herbal
cream pelangsing badan
pelangsing herbal alami
obat pelangsing oles

Download Film Bioskop Indonesia Terbaru Cerita Cinta 2014 mengatakan...

mantap tak coba dulu gan

Andi Permana mengatakan...

makasih infonya
terima pemesanan gelang karet untuk komunitas, perusahaan , sekolah, promosi dan lain lain

Posting Komentar