Cara Membuat Kotak Search Dengan Tooltip Di Blog

Oleh Unknown

Friday 9 August 2013

Bagikan :

Tweet

Cara Membuat Kotak Search Dengan Tooltip Di Blog - Wah udah lama nih gx share tutorial blog, itu dikarenakan saya bingung mau share apa. Tapi kali ini saya mau share kotak search dengan tooltip, setelah menggabungkan script kotak search biasa dan tooltip dari dte.web.id. Sobat tidak perlu khawatir tentang efek samping dari script ini. Script ini tidak akan memberatkan loading blog sobat, karena saya sudah compress script css nya. Ok langsung aja ke tutorialnya...

Kode CSS:

/* Search Form With Tooltip */
#search{ position:relative; float:right; width:255px; margin:3px 0 0; padding:5px 0 2px 10px}
#searchform{ background:transparent}
#searchtext{ float:left; width:215px; padding:5px 4px 3px 6px; border:none; background:#fff; color:#777; font-size:11px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px}
#searchbutton{ float:right; width:28px; height:28px; margin:-20px 0 0 18px; border:none; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Ihr-3nluDFSREvZzsXH1GaIdO01N2M_QWa1sfEg_bFsBGhWd5wfTBexHQ9kn9KqRV4CjBZ_Z_Nn8Yx1f6oZt2nl3f47oPTiSvgTivCxF396DAWchCfdM5GrjsrYKskc3Y1OYF7qNhLc/s0/search-icon.png) no-repeat}
#search label{ display:block; position:absolute; top:100%; left:120px; margin-top:2em; font-size:11px;  font-weight:bold; color:white; white-space:nowrap; line-height:normal; padding:.6em 1em;  background-color:rgb(39, 71, 140); -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;  visibility:hidden; opacity:0; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out;  -ms-transition:all .2s ease-out; -o-transition:all .2s ease-out; transition:all .2s ease-out}
#search label:after{ content:""; display:block; width:0; height:0; border:5px solid transparent;  position:absolute; bottom:100%; left:2em; border-bottom-color:rgb(39, 71, 140)}
#search input:focus+label,
#search textarea:focus+label{ visibility:visible; opacity:1; margin-top:-.5em}

Kode HTML:

<div id='search'>
<form action='/search' id='searchform' method='get'>
<input id='searchtext' name='q' placeholder='Search...' type='text'/>
<label>You can find here</label>
<input id='searchbutton' size='10' type='submit' value=''/>
</form>
</div>

Cara Penggunaan:

• Login Ke Blogger
• Klik Template >> Edit HTML
• Masukkan Kode CSS di atas kode berikut

]]></b:skin>

• Untuk menampilkannya, masukkan Kode HTML di tempat yang diinginkan

NOTICE:
Jika sebelumnya sobat sudah memasang CSS Search Form, sobat bisa menggantinya dengan kode css yang diatas.

Tag : Tutorial Blog