How to Make Search Box With Tooltip In Blog - This time I want to share search box with tooltip, after combining the ordinary script search box and tooltip of dte.web.id. You do not have to worry about the side effects of this script. This script will not burden loading your blog, because I've compressed css script it. Ok immediately wrote to the tutorial ...
- Login to Blogger
- Then click Template >> Edit HTML
- Copy css code below and Paste on the code ]]></b:skin>
/* 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/AVvXsEhoy-2QR4XiZn2rSBGqBplxlQ41yN0IAAaEE3qUy5tYo-ViowpXfKm5MEUc1Xb2yYVDUB2qk7nYX4O7fXDxLzZyn8ZUO7T6Z_74I0kZ9N_nYWJ_HcbII1ivisqY3-eU5S6A_vn9kAEi7yE/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}
- Then, Copy html code below and place it wherever you want
<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>
- Finish step, Click Save and see the results
ConversionConversion EmoticonEmoticon