Stylish CSS3 Search Box for Blogger Blog/Website


Best Commentator: Apple iPhone 7 Plus (256 GB) WINNER: Michalina Logan
To claim your prize, please send us an email.


CSS3 Search Box for Blogger Blog
Adding search box to your blogger blog/website will be a great help for your readers to search for anything in your blog in seconds. Today in this post I would like to help you to add fully customized CSS3 search box to your blog/website. If you wanna rid of the default blogger search box, you have-to add this stylish CSS3 search box. Lets see how to add it in to your blog/website.

Before we adding this CSS3 search box, please take look at the demo CSS3 search box provided below and  get an idea of what we are going to make here (ie,Your search box seems as below widget).





question mark icon png How to add this CSS3 search box to your blog/website
Here I wanna give you two methods of adding this search box to your blog/website. the first method is One Click Installer. What you have to do is just click on the below ▼ image and it will automatically add to your blog.




The second method is adding this search box to your blog/website manually. Let me tell you how to do do this. So please follow below steps carefully.

  • Go to Blogger Dashboard > Template
  • Backup your Template before making any changes to your blog
  • Click on Edit HTML
  • Tick Expand Widget Templates
  • Press Ctrl + F and search the code shown below ▼

]]></b:skin>

Now add the below code just Above/Before ]]></b:skin> (use Ctrl+F to find the code)

#s {
    margin: 0 auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 12px 48px 12px 12px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
width: 300px;
    height: 16px;
    color: #3a4449;
    border: none;
    outline: none;
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
position: relative;
    z-index: 2;
    background: #fff url(http://2.bp.blogspot.com/-vbfky013Hxg/UDglAPjBMkI/AAAAAAAABcE/7OCKd2VaaQ0/s1600/labstrike-search-icon.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}

customization icon png Make following customizations
Before you saving your Template do this changes in above ▲ highlighted lines. The changes are following. So read it carefully.

  • Line no 9 & 10: Adjust the dimensions of the search box as you want.
  • Line no 19: You can change the search icon with your own image by changing the image link URL.

Save your Template and we have successfully added the skin of search box. Now we wanna add the html section. so follow below steps.

  • Go to Blogger Dashboard >Layout
  • Click on Add a Gadget
  • Copy and paste the below code in it (leave title column blank)

<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Search in LABSTRIKE">
</form>
<style>

NB: You can replace Search in LABSTRIKE with your own words.

You may also like -



Save your Gadget and you're done! Finally drag your search box widget to the top of your sidebar. Because it looks something professional. Also we hope your valuable comments and sharing. Happy blogging:)