11 Aralık 2012 Salı

twenty eleven styler search box

Hello dear bloggers! today i'm gonna share with you a search box that works perfectly on blogger and very identical to wordpress twenty eleven search box. I think you know what is a search box. Search boxes are small but very effective tools to find a topic in a website or in a blog. It's essential, it is a must. It helps a visitor smoothly surfing from a page to another page.
See DEMO (live) here »
Step-1:
Add this code right after(under) <head> tag
Not: if this script already exists do not add it again!
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
Step-2:
Then add this CSS code before(above) ]]></b:skin>

.search-widget{font-size:10px;line-height:16px}
.search-widget{margin-bottom:0 !important}
#search-block input[type=text]{margin:0}
#search-block{display:inline-block;float:right}
#search-block input[type=text]{height:38px;webkit-box-shadow:none;color:#A8A8A8;-moz-box-shadow:none;box-shadow:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border:none;border-left:1px solid #E3E4E4;padding:0 0 0 35px;background:transparent url(
https://lh5.googleusercontent.com/-UWDto9FJ6fE/UGmkOImzDBI/AAAAAAAAD-w/A4MnOaXweu0/s100/glyphicons-ct.png) 10px -14px no-repeat}
#search-block #searchform{text-align:right}
#search-block #searchform div{margin:0}
#search-block #s{float:right;-webkit-transition-duration:400ms;-webkit-transition-property:width,background;-webkit-transition-timing-function:ease;-moz-transition-duration:400ms;-moz-transition-property:width,background;-moz-transition-timing-function:ease;-o-transition-duration:400ms;-o-transition-property:width,background;-o-transition-timing-function:ease;width:62px;padding-right:15px}
#search-block #s:focus{background-color:#F7F8F9;width:160px}
#search-block #searchsubmit,#search-block label{display:none}
Step-3: add this form code in sidebar.you can do this by following layout >> Add a Gadget >> HTML/Javascript
<div id='search-block'>
 <form action='/search' id='searchform' method='get'>
 <label class='assistive-text' for='s'>Search</label>
 <input class='field' id='s' name='q' placeholder='Search' type='text'/>
 <input class='submit' id='searchsubmit' name='submit' type='submit' value='Search'/>
 </form>
</div>
Screenshot: (fake preview)

0 yorum:

Yorum Gönder