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 »
Add this code right after(under) <head> tag
Not: if this script already exists do not add it again!

<script src=’’ type=’text/javascript’/>

Then add this CSS code before(above) ]]></b:skin>

.search-widget{margin-bottom:0 !important}
#search-block input[type=text]{margin:0}
#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( 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 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’/>

Screenshot:(fake preview)

Categorised in: Blogger, Blogspot

This post was written by Editorial Staff

Kafasına takılan her şeyi soran meraklı biri.


how much is my website worth?


Güzel Türkçe’miz tepki ne demek