How to Add a Simple Search to Your Blogger Blog

You can see default a simple search bar gadget in Blogger.But it's a little bored.And it's kinda ugly because it's not responsive.So we've brought you a simple search box.This will make it easier for your site visitors.It is also best to put this on the top section of your site.

How to Add a Simple Search to your Blog
You can see default a simple search bar gadget in Blogger.But it's a little bored.And it's kinda ugly because it's not responsive.So we've brought you a simple search box.This will make it easier for your site visitors.It is also best to put this on the top section of your site.But you can leave this in a place you prefer.


How to Add a Simple Search to Your Blogger Blog.


1. First go to your blogger dashboard.

2. Now go Layout tab and click Add a gadget.

3. Then select HTML / Javascript and paste below code in content section.

4 Finally save your gadget.

Code

[<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}
#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color:#0000ff;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>
<div id='search-box'>
<form action='/search' id='search-form'
method='get' target='_top'>
<input id='search-text' name='q'
placeholder='Search' type='text'/>
<button id='search-button'
type='submit'>               
<span>Search</span>
</button>
</form>
</div>]

Also read: How to Disable Copying Text on Blogger Blogs

So you know about How to Add a Simple Search to Your Blogger Blog, Hope you like the post, don’t forget to share it with your friends and leave a comment below if you are facing any problem at any step in the method discussed above.Thank you

COMMENTS

Name

Apple,4,Apps,8,Blogger,48,Emoney,8,Facebook,10,Graphics,20,Health,3,News,8,Product,2,Science,4,SEO,36,Software,6,Sponsored,4,Technology,114,
ltr
item
SBmade | New Data Of Technology: How to Add a Simple Search to Your Blogger Blog
How to Add a Simple Search to Your Blogger Blog
You can see default a simple search bar gadget in Blogger.But it's a little bored.And it's kinda ugly because it's not responsive.So we've brought you a simple search box.This will make it easier for your site visitors.It is also best to put this on the top section of your site.
https://3.bp.blogspot.com/-lIRiU3Gq6IQ/WieOhDR3XDI/AAAAAAAACxQ/CnL6mAnj8MwtBA7jPvOntd-3-cQVP8CyQCLcBGAs/s640/How-to-Add-a-Simple-Search-to-your-Blog.jpg
https://3.bp.blogspot.com/-lIRiU3Gq6IQ/WieOhDR3XDI/AAAAAAAACxQ/CnL6mAnj8MwtBA7jPvOntd-3-cQVP8CyQCLcBGAs/s72-c/How-to-Add-a-Simple-Search-to-your-Blog.jpg
SBmade | New Data Of Technology
https://www.sbmade.com/2017/08/How-to-Add-a-Simple-Search-to-your-Blog.html
https://www.sbmade.com/
https://www.sbmade.com/
https://www.sbmade.com/2017/08/How-to-Add-a-Simple-Search-to-your-Blog.html
true
5296011179804877962
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy