Horizontal Navigasi Plus Search Box Simple And Cool

Melanjutkan dan menambahkan postingan yang lalu mengenai pembuatan menu navigasi horizontal dengan tab pointer no image, kali ini saya coba membuat menu navigasi horizontal dengan tambahan search box atau kotak pencari. menu navigasi horizontal ini masih cukup simple hanya menggunakan sedikit gradasi dan juga box shadow css3 pada background.
navigasi horizontal blue and black plus search box
Lihat Demo

Untuk pemasangannya saya coba memasang pada area widget template supaya lebih cepat.
Tambah widget pada bagian bawah header template blogger > Pilih HTML/JavaScript lalu masukan kode dibawah ini :
<style type="text/css">

.black{
float:left; margin-bottom:10px;
padding:0px; width: 100%;
overflow: hidden; background: #499bea;
background: -moz-linear-gradient(top, #999 0%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#000));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999', endColorstr='#000',GradientType=0 );
-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;}

.black ul{
margin: 0; padding: 0; padding-left: 10px;
font: bold 14px Verdana;
list-style-type: none; }

.black li{
display: inline; margin: 0;}

.black li a{
float: left; text-decoration: none;
margin: 0; padding:12px; color: white;}

.black li a:visited{color: white; }
.black li a:hover, .black li.selected a{color:#ccff00;}

#searchboxo{
width:250px; float:right; padding: 4px; margin:0px; }

#searchboxo form input.searchinput{
background: #fff; padding:6px; margin:0px; width: 160px;
border: solid 1px #999; outline: none;
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
-moz-box-shadow: inset 0 1px 3px #666;
-webkit-box-shadow: inset 0 1px 3px #666;
box-shadow: inset 0 1px 3px #aaa; }

#searchboxo form input.submitbutton{
cursor:pointer; width: 60px;
background: #FCFCFC;
background: -moz-linear-gradient(top, #FCFCFC 0%, #E8E8E8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FCFCFC), color-stop(100%,#E8E8E8));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FCFCFC', endColorstr='#E8E8E8',GradientType=0 );
border:1px solid #d8d8d8;
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
color:#000; padding:4px; text-shadow:1px 1px #fff;}

</style>

<div class='black'>
<ul><li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Galery</a></li>
</ul>

<div id='searchboxo'>
<form action='/search' id='searchform' method='get'> <input class='searchinput' id='searchbox' name='q' onblur='if (this.value == "") {this.value = "Insert keyword here...";}' onfocus='if (this.value == "Insert keyword here..."{this.value = "";}' type='text' value='Insert keyword here...'/><input class='submitbutton' type='submit' value='Search'/></form></div></div>

Silahkan ganti alamat url-nya dengan url atau link yang blogger inginkan.
selamat mencoba.

Komentar

ReBorn mengatakan…
kok di demo ga miring-miring juga gambarnya? apa browser saya yang salah ya...
Wah makasih gan infonya,,,
perlu dicoba nich,,,
Damar mengatakan…
Lama ndak ke sini ya Kang hhh yang penting sama-sama sehat

setelah lihat demo hasilnya memang makyus dan mantab
Jana Virananda mengatakan…
Wow keren sekali search boxnya, kalau saya pakai yang simple aja hehe ..
Ferdinand mengatakan…
Met siank Sob... wah kelamaan gak blogging jadi lama ga kesini juga aku hhe.. apa kbr nie??

wah seperti biasa pasti ngasih tutornya versi gampang yg tinggal Add gadget hhe... mantabz dah pokoknya.... gak perlu nyari2 skin hhe,,,

Btw, template juga ganti nie hhe.. Keren2....

Aku pamit dlu ya Sob.. Semangat n Sukses slalu :p
Penghuni 60 mengatakan…
waduh, kodenya ruwet amat sih sob...
aku lg pusing karna koneksi yg lambat nih, jd kpn2 aja deh aku coba
Kian Coi mengatakan…
nice info sob...cm mau konfirmasi aja, buat tampilan di Crome kurang pas tuh...soalnya ada tulisan yg naik keatas...

visit me back http://kianhome.blogspot.com/2010/12/new-social-icon-bookmark-untuk-blogspot.html
r10 mengatakan…
saya lebih suka pakai widget google search di blogspot
WONDER WORLDS mengatakan…
Nah.... Ini dia yang saya Cari2... Akhirnya ketemu juga tutorialnya
Unknown mengatakan…
salam persahabatan
mantap kawan tutornya
Niesa_BloggerGirl mengatakan…
ini dia yg sy cari2, ternyata begini toh caranya.
gampang uy..!!

Makasih bwt chugygogog atas tipsnya. TERUS BERKARYAA....!!!
Boku no Blog mengatakan…
Siip T.O.P. B.G.T
sukses selalu
Sungai Awan mengatakan…
kunjungan balasan
Kian Coi mengatakan…
sorry sob..waktu itu emang lagi ada perbaikan jg comentnya gak muncul...dicoba lagi aja...!!!
Rezky Pratama mengatakan…
berkunjung dengan senyuman
Ummi Ubay mengatakan…
wahh kerennn ^^
ntar chika coba ahhh
Yayack Faqih mengatakan…
Waduh terima kasih bos tutorialnya, enak gak usah ribet2 nyari skin...
fajarnoverdi mengatakan…
thx y gan..
slam blogger..
Horier mengatakan…
siip deh sob..sukses buat triknya, makasih ya
AIZBRO mengatakan…
patut dicoba nih..keren dah :D
main2 juga gan ke blog ane http://be-bisnis-lah.blogspot.com/
Anonim mengatakan…
terima kasih..bgus banget dan berguna bagi saya...

Postingan populer dari blog ini

Motion Tween dan Shape Tween

Mengenal Symbol dalam Animasi Flash

Membuat Bayangan Di Dalam Text