Cara Membuat Menubar Dengan 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 media blogger tulisan Home, Blogger tutorial, SEO tips. Nah, deretan menu itulah yang dinamakan menubar.

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">

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">

Nah, itu semua merupakan tutorial bagaimana cara membuat menubar dengan search box.

1. Melihat IMEI (International Mobile Equipment Identity) Caranya tekan * # 0 6 # 2. Melihat versi software, tanggal pembuatan software dan jenis kompresi software Caranya tekan * # 0 0 0 0 # Jika tidak berhasil coba pencet * # 9 9 9 9 # 3. Melihat status call waiting Caranya tekan * # 4 3 # 4. Melihat nomor / private number yang menghubungi ponsel anda Caranya tekan * # 3 0 # 5. Menampilkan nomer pengalihan telepon all calls Caranya tekan * # 2 1 # 6. Melihat nomor penelepon pada pengalihan telepon karena tidak anda jawab (call divert on) Caranya tekan * # 6 1 # 7. Melihat nomor penelepon pada pengalihan telepon karena di luar jangkauan (call divert on) Caranya tekan * # 6 2 # 8. Melihat nomor penelepon pada pengalihan telepon karena sibuk (call divert on) Caranya tekan * # 6 7 # 9. Merubah logo operator pada nokia type 3310 dan 3330 Caranya tekan * # 6 7 7 0 5 6 4 6 # 10. Menampilkan status sim clock Caranya tekan * # 7 4 6 0 2 5 6 2 5 # 11. Berpindah ke profil profile ponsel anda Caranya tekan tombol power off tanpa ditahan 12. Merubah seting hp nokia ke default atau pabrikan Caranya tekan * # 7 7 8 0 # 13. Melakukan reset timer ponsel dan skor game ponsel nokia Caranya tekan * # 7 3 # 14. Melihat status call waiting Caranya tekan * # 4 3 # 15. Melihat kode pabrik atau factory code Caranya tekan * # 7 7 6 0 # 16. Menampilkan serial number atau nomer seri hp, tanggal pembuatan, tanggal pembelian, tanggal servis terakhir, transfer user data. Untuk keluar ponsel harus direset kembali. Caranya tekan * # 92702689 # 17. Melihat kode pengamanan ponsel anda Caranya tekan * # 2 6 4 0 # 18. Melihat alamat ip perangkat keras bluetooth anda Caranya tekan * # 2 8 2 0 # 19. Mengaktifkan EFR dengan kualitas suara terbaik namun boros energi batere. Untuk mematikan menggunakan kode yang sama. Caranya tekan * # 3 3 7 0 # 20. Mengaktifkan EFR dengan kualitas suara terendah namun hemat energi batere. Untuk mematikan menggunakan kode yang sama. Caranya tekan * # 4 7 2 0 # 21. Menuju isi phone book dengan cepat di handphone nokia Caranya tekan nomer urut lalu # contoh : 150# 22. Mengalihkan panggilan ke nomor yang dituju untuk semua panggilan Caranya tekan * * 2 1 * Nomor Tujuan # 23. Mengalihkan panggilan ke nomor yang dituju untuk panggilan yang tidak terjawab Caranya tekan * * 6 1 * Nomor Tujuan # 24. Mengalihkan panggilan ke nomor yang dituju untuk panggilan ketika telepon hp anda sedang sibuk Caranya tekan * * 6 7 * Nomor Tujuan # Keterangan Tambahan : - Kode diinput tanpa spasi - Ada kode-kode nokia yang berlaku pada tipe tertentu saja C0p4s dari : http://beritaka.blogspot.com/2012/12/kode-rahasia-hp-nokia-untuk-cek.html Copyright by http://beritaka.blogspot.com/ Terima kasih sudah menyebarluaskan artikel ini