If you are blogging, your blog is not complete without a search box. A search bar allows visitors to easily search content on your blog, and is certainly necessary. In this tutorial,I will teach you how to make a custom search bar for your site with pure CSS.
Copy The Below Code & Paste it in Javascript/Html Gadget in Your Blog
<style>
#namanyay-search-btn {
background:#000099;
color:red;
font: 'trebuchet ms', trebuchet;
padding:10px 20px;
border-radius:0 10px 10px 0;
-moz-border-radius:0 10px 10px 0;
-webkit-border-radius:0 10px 10px 0;
-o-border-radius:0 10px 10px 0;
border:3 px none;
bordercolor:red;
font-weight:bold;
}
#namanyay-search-box {
background: skyblue;
padding:10px;
border-radius:10px 0 0 10px;
-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
-o-border-radius:10px 0 0 10px;
border:3 px none;
width:600px;
}
</style>
<form id="searchthis" action="/search" style="display:inline;" method="get">
<!-- Search box for blogger by Namanyay Goel //-->
<input id="namanyay-search-box" name="q" size="40" type="text" placeholder=" Denzer Neriator "/>
<input id="namanyay-search-btn" value="Search" type="submit"/>
</form>It is quite easy to customize the code. I will be listing different ways you can, and how to.
Customize colors
To change the colors of the search button, press Ctrl+f and type “background:#0099ff;” and replace the hex code (#0099ff) with a color of your choice.
To change the colors of the search box, press Ctrl+f to search, and type “background: #eee;” and replace the hex code (#eee) with a color of your choice.
Change font
To change the button font, press ctrl+f to search, and type “font” and then replace the fonts after it (trebuchet ms, trebuchet). If you replace with a font like times new roman, remember to enclose times new roman in single quotes (‘).
Change search box default text
To change the default text, search for “placeholder=” Denzer Neriator ”/>” and replace the text after placeholder= with your choice. It is recommended that you leave some spaces before the word, like I have done.
Change search box width
Just search for “width:550px;” and edit the number after width: , with the width of your choice. Remember, it is in pixels