Wednesday, July 4, 2012

Search Box Dengan Efek Focus Hijau


Kali ini saya akan post tentang Search Box, search box ini hampir sama persis dengan search box yang saya gunakan sekarang tepatnya di sebelah kanan atas blog ini. Namun pada dasarnya sama saja dengan search box lainnya, hanya saja saya beri sedikit sentuhan box shadow untuk memperindah tampilannya. Search Box ini sangat cocok digunakan pada blog yang berlatar belakang gelap karena terdapat efek box-shadow berwarna hijau namun jika digunakan pada background berwarna cerah pun tetap lumayan bagus. Namun jangan lupa untuk membackup template sebelum melakukannya.

Langsung saja di bawah ini cara memasang Search Box di blog :
Buka  Template sobat lanjutkan  Edit HTML, kemudian beri tanda check Expand Template Widget.  Lalu cari kode ]]></b:skin> dan salin kode CSS berikut di atas kode ]]></b:skin>

#searchbox{padding:0 auto;margin:3px;float:right;height:28px;text-align:center;background:url(http://putsavic.xtgem.com/Images/search%20Fixed.png) no-repeat 10px 9px #555;font-size:14px;color:#fff;width:166px;border:0;solid;#444;border-radius:2px;outline:none;
box-shadow:2px 2px 5px hsla(0,0%,100%,.5),-2px -2px 5px hsla(0,0%,0%,.5),inset 5px 5px 15px hsla(0,0%,0%,.5)
}

#searchbox:hover{background:url(http://putsavic.xtgem.com/Images/search%20Fixed.png) no-repeat 10px 9px #888;color:#000}

#searchbox:focus{background:url(http://putsavic.xtgem.com/Images/search%20Fixed.png) no-repeat 10px 9px #111;color:#000
-webkit-box-shadow: inset 0 0 20px green, 0 0 20px green;
-moz-box-shadow: inset 0 0 20px green, 0 0 20px green;
-ms-box-shadow: inset 0 0 20px green, 0 0 20px green;
-o-box-shadow: inset 0 0 20px green, 0 0 20px green;
-khtml-box-shadow: inset 0 0 20px green, 0 0 20px green;
box-shadow: inset 0 0 20px green, 0 0 20px green;
}
Setelah itu pada Bagian Elemen Laman klik tambah Gadget dan pilih HTML/javascript dan letakkan kode berikut di dalam formulirnya atau juga bisa meletakannya sesuai keinginan.

<form action='/search/' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='240' name='q' value="Telusuri..." onfocus="this.value='';" />
</form>

15 comments:

  1. cuman beckgraunnya aja yg berubahh warna jadi ijoo..
    memang begitu kah?

    ReplyDelete
    Replies
    1. bikan background tapi box-shadownya. sederhana banget sih abis bingung buat nambah2 post. :cendol:

      Delete
  2. wah, hampir sm kayak postingan terbaru sy hihi =D

    ReplyDelete
    Replies
    1. kebetulan saya lgi bingungn cari ide, ngikut mas Alam aja :p

      Delete
  3. Ntu taruh kodex dmana sob? ? :D

    ReplyDelete
    Replies
    1. kasih tau ngga yah :p haha
      itu kan ada caranya, kalo saya headernya terbagi dua jadi sebelah kanan header saya isi dengan search box :D

      Delete
  4. mantap keren kaya search yang di atas tuh, hahaaa...

    ini blog kok berat ya? haha

    ReplyDelete
    Replies
    1. mungkin bukanya pake mozzila emg berat, soalnya saya segala macemnya pake Chrome hehe.

      Delete
    2. Mantappp Chrome memang ringan :)

      Delete
    3. Hehehehehehe sip sip, emang pakek chrome itu super cepat? :D

      Delete
    4. @system of blog : iya bener bang :D
      @The 7Bloggers : belum nyampe ilmunya mas untuk menjadi seiorang blogazine :p

      Delete
  5. Terima kasih atas artikelnya.
    oh iya selama saya jelajah mencari ilmu dengan blogwalking, menurut saya anda memiliki kelebihan tersendiri dari situs-situs lain dan jujur potensi anda juga sangat bagus, banyak juga ilmu yang saya pelajari disini jika ada waktu saya akan berkunjung lagi.
    #Semoga sehat selalu :D

    ReplyDelete
    Replies
    1. wah panjang bener :p
      terima kasih sudah berkunjung, amin :)

      Delete