• Translate

1/22/2016

How to Make a Search Box Widget

Tutorial Blogspot |

Advertisement

How to Make the Search Box Widget in Blog | almost one week I did not update the tutorial on my blog, because the number of pending work to be done as soon as possible. well, today I will only give you a tutorial how to make search box widget in blog. Search Box is a tool used to facilitate visitors in finding the desired tutorial on a blog / website according to the keywords entered. Widget search box that I created can be said to be very responsive to all of the device, please follow the steps below :
How to Make a Search Box Widget
  • Login to Blogger
  • Login Dashboard → Layout
  • Click "Add Gadget"
  • Click the "HTML / JavaScript"
Enter the following script into the "HTML / JavaScript" :
 <style>
#search-box {
position: relative;
width: 100%;
margin: 20px 0px 15px 0;
}

#search-form
{
width: 84.5%;
height: 35px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #f9f9f9;
overflow: hidden;
}
#search-text
{
font-size: 13px;
color: #ddd;
border-width: 0;
background: transparent;
}

#search-box input[type=&quot;text&quot;]
{
width: 90%;
padding: 10px 0 10px 1em;
color: #333;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 49px;
width: 90px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #363b40;
-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 Tutorials Here...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>
To see how it looks how to please look at the site at the bottom of the menu, to make the search box located below the menu as above, please put the above code below <div id = 'outer-wrapper'>  in edit template blog.

I hope this helps

Disqus
Blogger
Comment
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box

No comments Add Comment

Comments not appropriate topic will sign SPAM.