How To Make Stylish Pure CSS Search Box For Blogger

CSS Search Box

 

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

 

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>

Finally save the gadget
If you need more help don’t hesitated to drop a comment i will surely help you

2 thoughts on “How To Make Stylish Pure CSS Search Box For Blogger

Leave a Reply

Your email address will not be published. Required fields are marked *