Cara Membuat Top Menu Plus Kotak Pencarian di Atas Header
June 9, 2014
Cara Membuat Navigasi Menu Plus Kotak Pencarian (Search Box) di Atas Header Blog.
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 CB ini.
1. Blogger Dashboard >> Template >> Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>
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.
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
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 CB 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
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
CB Blogger
mau tanya mas,
ReplyDeletesaya pengguna johny wuss original. top menu/navigasi di johny original kan fix width itu (satu layar penuh). kalau lebarnya mau dijadikan sama dengan contoh diatas gimana? saya coba diatas jadinya malah float left dan tidak ikut responsif.
apa .page-menu dihapus saja dan ganti dengan contoh diatas?
johny wuss ori memang tidak responsif. Iya, ganti saja dengan contoh di atas....
DeleteSalam,,
ReplyDeleteSaya mau tanyak Mas,,
Saya penggunan New Johny Wuss, saya udah pasang top menu ini, tapi antara header sama top menunya ada jarak, nah untuk menyatukannya biar gak ada lagi jaraknya gmn mas?
Terimakasih.
sory baru jawab.... :) Sudah teratasi ya, syukurlah..... Good Luck...!!!
Deletemaaf mas numpang nanya...
ReplyDeletesaya dah coba cari kode div id='header-wrapper dan 2 kode lainya tapi ga ketemu juga di template saya...
saya pakek template bawaan blogger dar PT Keren Sekali...
ada saran untuk pkek kode apa ya ?
dah coba utak - atik malah crash mulu...
makasih sebelumnya
simpan kode kedua di bawah kode < body > atau < body bla bla ...>
Deleteatau di atas kode
Delete< div class='fauxborder-left header-fauxborder-left' >
< div class='fauxborder-right header-fauxborder-right' / >
posiskan diatas ..
Deletepertanyaan saya sama kyk mas broto
ReplyDeletemau tanya mas,
saya pengguna johny wuss original. top menu/navigasi di johny original kan fix width itu (satu layar penuh). kalau lebarnya mau dijadikan sama dengan contoh diatas gimana? saya coba diatas jadinya malah float left dan tidak ikut responsif.
apa .page-menu dihapus saja dan ganti dengan contoh diatas?
sudah dijawab di atas ya, jawabannya sama :)
Deletegan saya pake yg jonny wuss 3.. itu cara nambah kotak pencarian biar letaknya diatas biar ikut dimenu statis gimana caranya?
ReplyDeleteini gan blog saya http://lagu-baliku.blogspot.com/ agar klo di scroll ikut juga tulisan beranda diatas.. moga ngerti mksud sy
cari di blog ini: menu statis atau menu melayang
DeleteGan, ane mau tanya soal TOMBOL GO di Kotak Pencarian kok ngk sejajar ya ? tombol Go-nya ada di bawah kotak pencarian, ane pengen Tombol Go bisa sejajar dengan kotak Pencarian supaya rapi (sperti blognya agan ini) gimana caranya gan ? mohon bls, Terima Kasih.
ReplyDeleteSamakan kodenya dengan ini:
Delete.menusearch {
width: 305px;
float: right;
}
Ubah 300 jadi 305
Thanks Gan akhirnya bisa sejajar tombol Go-nya.
DeleteMas Bro, saya sudah coba. tapi dibagian search here nya kok ga bisa diketik kata-kata yah? tq
ReplyDeleteternyata gak cuma dibagian search aja. dibagian subcribe email juga jadi gak bisa diinput. itu kenapa yah? apakah ada bagian dari template yang terhapus? mohon pencerahannya. tq CB
ReplyDelete