Embed Search Box In Blogger Header

Embed Search Box In Blogger Header that makes it look beautiful.You can also Embed Google Search Box In Blogger Header, to add to your earnings Or custom search engine to your blog. This is very important trick to increase your earnings of Adsense if you add google search as you will be got paid to get searched from your google search from your blog.


Now How to add this link unit to your Blogger Header?

1.Login to your blogger
2.Go to LAYOUT tab
3.Then EDIT HTML tab
4.Click On EXPAND WIDGETS to expand html
5. Search the below code in red

<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>

Now Add the seach code after these lines.

If you want to add your google search then add the google search code from adsense.

It will look like this:-

If you want search unit to be placed above the description and below title then place the search code above these red lines.

Many readers asked me for the codes of search box that can be placed in header. Visit my post for blog search box code here.

Note:-Make the adsense code eco-friendly by putting it here before adding.

---

Keywords: Adsense, Blogger Tutorial, Embed Search Box WIDGETS, Search Box Code For Blogger, Search Box Code For Website, Search Box For Blogger, Search Box For Website, Tutorials.

---

Read More

How Add Search Box Code To Blogger

How to add a search box to your blogger,as default template doesn't provide any search codes or search box in your template so as readers can search of in your blog or web from your blog.There are many methods of adding search box to your blog at different places you want and different types of codes for search which you want to be done in our blog.Now i will explain where to add these codes and what codes to add to make a seach box in your blog.

Lets first of all start with the search codes which you need to add in your blog. The codes are below:-

First

<form id="searchThis" action="/search" style="display:inline;" method="get"><input id="searchBox" name="q" type="text"/> <input id="searchButton" value="Go" type="submit"/></form>

Change the text in red to any text like search or hit you want to display in button to hit the search.

Your search box will appear like this below.

Second

If you want to add some styling like this new sample below:-

Use these codes

<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>

Edit the colors or styling in red in above codes to change the styling of search box to adjust in your template.

Third

Now if you want to add image in place of search button like below:-

Use these codes:-

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" value="Enter search terms"/><input id="search-btn" value="Search" type="image" src="http://dryicons.com/images/icon_sets/stickers_icon_set/png/16x16/search_magnifier.png" style="margin-left: 5px; margin: 3px 0 0 5px;"/></form>

Change the image url in red above with the url of the image you want to use.and hope you would have no problem in using any of the codes.

Now How To place search Box at different places in blogger blog:-

To Place it in sidebar:-

Under Template->Page Elements tab, click “Add a Page Element” at the place where you want your search box to appear.
Select HTML/JavaScript and add the above codes.

If you want to place search box in header read this tuorial Embed search Box In Blogger Header.

I hope you will love this tutorial.

---

Keywords: Blogger Tutorial, Embed Search Box WIDGETS, How To Place Search Box, Search, Tutorials.

---

Read More