Blogger Widget Beautiful Search Box v1

Do you have a blog on blogger.com?

If yes, then you already know about the various widgets of it.

Here is a beautiful widget that will attract your visitors and help them to find their required contents on your blogger blog.

Yes, it is a SEARCH BOX widget.

Blogger Widget Beautiful Search Box Version 1

It looks like the above photo in this post.

HOW TO ADD THIS:

1. Go to Blogger dashboard>Layout>add a gadget>html/javascript

2. Copy the following code into the content box

3. Save the gadget.

WIDGET 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: #FF0000;
-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=’Type here & click SEARCH’ type=’text’/>
<button id=’search-button’ type=’submit’><span>SEARCH</span></button>
</form>
</div>

SO, ENJOY THE BEAUTIFUL BLOGGER WIDGET “SEARCH BOX V1”

The Author

Dr. Sujon Paul

Hello! I am Dr. Sujon Paul. I am professionally a doctor, but love to write blogs and update SUJONHERA.COM regularly with fresh contents. Thank you for visiting SUJONHERA.COM. Contact me on Facebook, Twitter & Google Plus. Don't forget to subscribe SUJONHERA.COM on Facebook, Twitter & Google Plus.

Leave a Reply

Type your comment, your name and email address in the below boxes. Then click on the Post Comment button. Your email address is required, but will not be published.

    SUJONHERA.COM © 2012-2016 | About | Contact | Sitemap | Disclaimer | Privacy Policy | Copyright Plocy | Terms and Conditions
    Shares