Create A Custom Search Box For Blogger

Some blogger template doesn't provide search boxes or any search bar. If you're sacrificing search box because of a template like that then it's your time to create your own first custom search box with little help of this article.

In this article we i'll teach you creating custom search box and it's not that tough , just a little attention and it's done.

Style  1 :

It's to simple to create a search box like this below is the code :

<form id="search" action="/search" style="display:inline;" method="get">

<input id="searchBox" name="q" type="text"/>

<input id="submut" value="Search" type="submit"/>

</form>

There are two input field in above box one is a text and second is a submit button , that's all about above search bar...to easy?

Style 2 :

After adding a little CSS this search box will look like this :

<form id="searchthis" action="/search" style="display:inline;" method="get">

<input id="search-box" name="q" size="25" type="text" style="background: #ccccff; border: 2px solid #000066"/>

<input id="search-btn" value="Search" type="submit" style="background: #000066; border: 2px outset #ff0000; color: #ffffff; font-weight: bold;"/>

</form>

Just try to edit CSS and see what you can do.....

Style 3 :

This time we'll use CSS3 not so tricky just try to edit this one

<form id="searchform" action="/search" style="display:inline;" method="get">

<input id="searchbox" name="q" size="25" type="text" style=" border: 2px solid black;border-radius: 60px;outline: 0px;">

<input id="searchbtn" value="Search" type="submit" style="background: whitesmoke; border: 2px outset black; font-weight: bold;border-radius: 20px;position: relative;right: 30px;">

</form>

This one looks amazing without any doubt now let's move on to next level

Style 4 :

Now we'll take this to a new level with some more advance CSS3 but it's not that hard :

<form id="search" action="/search" style="display:inline;" method="get">

<input name="q" type="text" value="Search"/>

</form>

<style>

#search {

}

#search input[type="text"] {

background: #444;

border: 0 none;

font: bold 12px Arial,Helvetica,Sans-serif;

color: white;

outline:0px;

width: 150px;

padding: 6px 15px 6px 35px;

-webkit-border-radius: 20px;

-moz-border-radius: 20px;

border-radius: 20px;

text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);

-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;

-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;

box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;

-webkit-transition: all 0.7s ease 0s;

-moz-transition: all 0.7s ease 0s;

-o-transition: all 0.7s ease 0s;

transition: all 0.7s ease 0s;

}

#search input[type="text"]:focus {

width: 200px;

}

</style>

I hope this helped you.....got any question then leave a comment.

Read More

Greetings Genesis Blogger Template

Greetings Genesis Blogger Template is a Best Template For Blogger.Greetings Template which help you to rank higher in search engine results and elegant design of this theme will attract your visitors.

• ScreenShot

DEMO  DOWNLOAD

Greetings theme is designed by Genesis, Awesome, and eWizi converted this WordPress theme to Blogger template.Genesis is an awesome project by young blogger Harish Dasari. This Blog is providing free design for genesis theme all you need is to purchase child theme from studiopress.

• Greetings Genesis Template Features

• Fully SEO Optimized theme
• Related post widget
• Social Media Sharing Button Below Every Blog Post
• Beautiful Email Subscription Box
• Run Easily On All Major Browser
• WordPress Like A Comments Thread
• Attractive Design
• Numbered Page Navigation Menu
• Social Media Integrated
• Auto Read More

• Customizing The Email Subscription Box

• Customize this form, follow the below steps

1. Go To Edit HTML
2. Tick Expand Widget Template
3. Find Below The Text There

YOUR-FEED-BURNER-URENAME-HERE

Replace it with your feedburner username.

• Customize Navigation Menu

• Customize this form, follow the below steps

Now Find The Below Code


< li class = ' active ' >< a href = '/</a></li> ' > Home
<li> < a href = ' # ' > Products </a></li>
<li> < a href = ' # </a></li> ' > Services
<li> < a href = ' # ' > About </a></li>
<li> < a href = ' # </a></li> ' > Contact

Now Replace # with your links

From the Editor's Desk

Greetings Genesis Blogger Template is a Best Template For Your Blog Now Apply this Template."I am in favor of this premium blogger template in free so I respect my work and please don't remove the credit links from the footer of this theme :)

Read More