How To Make Stylish Pure CSS Search Box For Blogger

I recently shared a Stylish Read More Button for blogger but toady I’m here with stylish pure css search box for blogger you are know if you are blogging your blog is not complete without a search box,A search bar allow visitor to easily search content and product on your blog and it’s necessary for blogger so in this post i will show you how to make stylish pure css search box for blogger blog this css search box created with pure css no one images used in this css box

Live Demo

How To Add CSS Search box

To Add this stylish css search box in your blogger blog simply follow these steps

You can add this code in html section where you want to show search box and you can also add this code in widget to add this code in widget Log in your account >>Dashboard >>Layout >>Add Gadget >> Select html JavaScript and copy the below code and past it

<style>

#NF-search-btn {
background:#0099ff;
color:white;
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:0 none;
font-weight:bold;
} #nafisflahi-search-box {
background: #eee;
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-width:5px;
border-color:#0099ff;
width:170px; }

</style>

<form id=”searchthis” action=”/search”
style=”display: inline; margin-left: 40px;” method=”get”> <input
id=”NF-search-box” name=”q” size=”40″
placeholder=” Enter Your Keywords” type=”text”> <input
id=”NF-search-btn” value=”Search” type=”submit”></form>