Simple Search Box, Menyembunyikan Search Box Dalam Icon

Simple Search Box, Menyembunyikan Search Box Dalam Icon

Bola Hero Gawai

Simple Search Box, Menyembunyikan Search Box Dalam Icon

Simple Search Box
Simple Search Box, Menyembunyikan Search Box Dalam Icon mungkin akan berguna dalam menghemat ruang dalam blog, sehingga tampilan blog akan lebih simple.

Berawal dari coba-coba memodifikasi search box menjadi simple yang berada di balik ikon search dan akan muncul dan melebar ketika disorot mouse ini, saya rasa lumayan juga untuk diterapkan di blog hehehehe...barangkali ada yang mau coba hehehehe.... Cara membuatnya cukup mudah, bagi yang ingin mencobanya ikuti langkah-langkahnya di bawah ini.

1. Silahkan copy kode CSS-nya di bawah ini dan simpan di atas kode ]]></b:skin>

#search input[type="text"]:hover, #search input[type="text"]:focus {
width:300px;
border: 1px solid #333;
border-radius:50px;
padding-left:35px;
}
#search input[type="text"] {
background: #fff url("http://1.bp.blogspot.com/-N_4TWVUmXv4/UDdKJf5NwCI/AAAAAAAAIgY/AGrKXgwkrTo/s1600/tombolcari.gif")no-repeat center left 6px;
width:0px;
font-size: 13px;
color: #222;
padding: 10px 10px 10px 25px;
transition: all 0.5s ease-in-out;
margin:5px 0;
z-index: 9;
position: absolute;
border: 1px solid #333;
border-radius:50px;
right:5px;
}

Perhatikan kode yang berwarna merah di atas, itu untuk lebar box ketika disorot mouse. Silahkan sesuaikan dengan lebar tempat penyimpanan search boxnya.

2. Dan untuk pemanggilnya silahkan copy kode HTML di bawah ini dan simpan di tempat di mana Anda ingin menampilkan search boxnya.

<form action='/search' id='search' method='get'>
<input id='q' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Type and enter here ....'/>
</form>

Nah mudah kan? Untuk demonya silahkan ikuti link demo di bawah ini, silahkan sorotkan mouse ke ikon search di pojok kanan atas.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

22 Comments Add Comment

wah mantaf mas kayanya perlu di coba neh,,,,
oya mas saya punya problem dengan menu search.
menu search saya tidak valid html5,ini satu satunya problem eror pada blog saya.mohon bantuanya mas ni screenshoot kode CSS nya https://lh3.googleusercontent.com/W7blL7g4QfzGaFeXQP4PIddYXlmDQS8wfevzxPvNpt8=w725-h207-p-no dan ini alamat blog saya http://penghunidumay.blogspot.com/
terimakasih sebelumya mas,,mf ngerepotin.

Balas

Pindahkan kode </ul> ke atas kode <div class='menusearch'>

Balas

Keren kang, oh iya sempatkan berkunjung ke blog saya ya kang, saya baru modifikasi template dari maskolis, minta tolong diberikan kritiknya :) = http://www.tuliskan.com/2013/05/farhan-side-template-blogger-yang-stylish-minimalis.html

Balas

Mas Kompi, blog saya menu searchnya kok eror di cek di w3c, banyak yang eror... :'(,, padahal kemaren dah bagus, sekarang malah banyak yang eror kenapa yah???

Maaf ganggu...
Terimkasih

Balas

saya coba pake om... biar sedikit enak gitu..wakakaka tarik manggg

Balas

Wah baru beberapa hari di tinggal Rekreasi Ke RS dah banyak perubahan disini...bukan Mas Andy namanya kalau gak bisa nyulap template dalam 30 mnt he he he

Balas

Blog modifnya keren mas Farhan...lanjutkan...

Balas

hehehe silahkan mas Panjz... :D

Balas

Wiihh yang baru pulang rekreasi nih...hhehehe...seger :D

Balas

Untuk duplikat ID viewers:
Coba ganti kode css #viewers dengan .viewers
Dan kemudian ganti
<div id='viewers'>
dengan
<div class='viewers'>

Balas

ya mas baru kemaren pulang dari RS (Rumah Sakit)

Balas

Oo RS tuh rumah sakit heheehe kirain beneran RS tuh tempat rekreasi... :D Semoga lekas sembuh aja mas...

Balas

Malam gan, ngikut copast, dan mohon ijin untuk Re-Share Post.
Kenalkan Saya Marlon Alamo, Blog Hotline Terkini.Thanks for Banner Maker EBM 5.10 nya.

Gan, minta pencerahan neh. Widget-widget saya (widgets yg tidak mau saya tampilkan Lay-out nya, seperti Fanspage, Burung-Twitter,dll), judul-widgetnya sudah saya hapus. Tapi masih nampak tempat widgetnya?. Gimana ngilanginya gan?.
terimakasih sebelumnya.

Balas

Coba bikin tempat sidebar baru khusus untuk widget-widget tersebut misalnya .sidebar2-wrapper tapi jangan diberi background (background:none), border (border:none), dan bayangan untuk boxnya, sehingga tidak menyisakan kotak kosong seperti itu.

Balas

hehe.. ok mas udah beres :D

Nambah
Kalau bikin buat order sama harga kayak di template JHONY JOSS itu gimana yah buat di pasang di blog saya,, udah di utak-atik gak bisa2,, yang ada kepala jadi ngebul..

terimakasih mas...

Balas

mas kalau punya saya sekarang di beri efek seperti ini (pda saat cursor di dekatkan langsung memanjang) bagaimana ya mas...


www.center60.com

Balas

Coba ganti kode ini #navigation #search input[type="text"]:focus

Dengan ini #navigation #search input[type="text"]:hover, #navigation #search input[type="text"]:focus

Balas

Oh ya mas saya mau tanya lagi..

Bagaimana cara pada saat kita mengepost artikel di blog dan otomatis tershare di facebook saya lihat di sini ada artikel nya mas tapi lupa namanya... tolong berikan url nya mas...

Balas

Mungkin yang mas Febri ini ya http://kompiside.blogspot.com/2013/02/membuat-deskripsi-postingan-agar-bisa-share-di-google-dan-facebook.html

Balas

Oh ya di Kompiside.. :D

Balas

Kang Adhy Suryadi, bagaimana caranya buat search yang sudah ada bisa bergerak seperti ini? Saya baca widget ini gak valid html. Bagaimana buat validnya?
Mohon bimbingannya.

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×