Advertise

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.

22 komentar:

  1. kok di demo ga miring-miring juga gambarnya? apa browser saya yang salah ya...

    BalasHapus
  2. Wah makasih gan infonya,,,
    perlu dicoba nich,,,

    BalasHapus
  3. Lama ndak ke sini ya Kang hhh yang penting sama-sama sehat

    setelah lihat demo hasilnya memang makyus dan mantab

    BalasHapus
  4. Wow keren sekali search boxnya, kalau saya pakai yang simple aja hehe ..

    BalasHapus
  5. 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

    BalasHapus
  6. waduh, kodenya ruwet amat sih sob...
    aku lg pusing karna koneksi yg lambat nih, jd kpn2 aja deh aku coba

    BalasHapus
  7. 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

    BalasHapus
  8. saya lebih suka pakai widget google search di blogspot

    BalasHapus
  9. Nah.... Ini dia yang saya Cari2... Akhirnya ketemu juga tutorialnya

    BalasHapus
  10. salam persahabatan
    mantap kawan tutornya

    BalasHapus
  11. ini dia yg sy cari2, ternyata begini toh caranya.
    gampang uy..!!

    Makasih bwt chugygogog atas tipsnya. TERUS BERKARYAA....!!!

    BalasHapus
  12. Siip T.O.P. B.G.T
    sukses selalu

    BalasHapus
  13. sorry sob..waktu itu emang lagi ada perbaikan jg comentnya gak muncul...dicoba lagi aja...!!!

    BalasHapus
  14. wahh kerennn ^^
    ntar chika coba ahhh

    BalasHapus
  15. Waduh terima kasih bos tutorialnya, enak gak usah ribet2 nyari skin...

    BalasHapus
  16. siip deh sob..sukses buat triknya, makasih ya

    BalasHapus
  17. patut dicoba nih..keren dah :D
    main2 juga gan ke blog ane http://be-bisnis-lah.blogspot.com/

    BalasHapus
  18. terima kasih..bgus banget dan berguna bagi saya...

    BalasHapus