How to Make Blogger Search Form

Nowadays, search engine can't be separated from internet world. With search engine, we can look for something that we want to know by typing its keyword. And know, I'll tell you how to add search form to your blog although there are many blogger templates had been already installed its search form, but by reading this tips you will know how to make and costumize it.

Steps to Make Blogger Search form

1. Login to your Blogger account

2. Go to Layout » Page Elements

3. Add Page Elements with HTML/Javascript, then paste the next code to content box:

<style>
#searchform {
overflow:hidden;
display:inline;
vertical-align:middle;
}
#searchbox {
background: #333; /*form background color*/
width: 200px; /*form width*/
color: #fff; /*form text color*/
font-size: 12px;
font-family: Georgia, Times New Roman, Trebuchet MS;
font-weight: normal;
margin:0 0 0 5px;
padding: 2px 0 3px 5px;
display: inline;
vertical-align:middle;
border:1px solid #333; /*form border*/
}
#searchbutton {
background: #333; /*button background color*/
color: #FFF; /*button text color*/
font-size: 11px;
font-family: Georgia, Times New Roman, Trebuchet MS;
margin:0 0 0 5px;
padding: 2px 2px 2px;
font-weight: bold;
border:1px solid #333; /*button border*/
}
</style>

<form action='/search' id='searchform' method='get'>
<input id='searchbox' name='q' onblur='if(this.value==&quot;&quot;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&quot;&quot;;' type='text' value='Search here...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>

4. Finally, click Save.

Good luck...

read more »

A Basic HTML Dropdown Menu

With Dropdown Menu, we can save space in our blog because of its small size could save the link and text a lot. Can be filled with the archive, blogroll, etc..

For the first time, I will explain you to make the basic dropdown menu. Here are the steps:

1. Login to your Blogger account.

2. Select Layout > Page Elements > Add Page Elements > HTML / JavaScript

3. Enter the following script into the content box:

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>

Red text is a link, replace it with your link.
Blue text is the text that is displayed. You must also change.

Example:

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="http://tips-blogger-zacky.blogspot.com/2009/11/tentang-blogger.html">Tentang Blogger</option>
<option value="http://tips-blogger-zacky.blogspot.com/2009/11/cara-memback-up-template-blogger.html">Cara Memback-up Template Blogger</option>
<option value="http://tips-blogger-zacky.blogspot.com/2009/11/cara-melindungi-blog-dari-penjiplakan.html">Cara Melindungi Blog Dari Penjiplakan</option>
</select>

Result:


Arsip Blog
Tentang Blogger
Cara Memback-up Template Blogger
Cara Melindungi Blog Dari Penjiplakan


To add more menus, add <option value="Links 2">Text 2</option> code before the </select> code.

The links in the dropdown menu above, if the click will open a link on the same page. This is suitable for Archives and links related to the blog.
There is one more type of link that if clicked it will open a new window without closing your blog. Which is suitable untu Friend Blogroll or links. There is code that must be replaced:

<select onChange="document.location.href=this.options[this.selectedIndex].value;">

with this one:

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">

How? Easy? Good luck ...

Don't forget to leave a comment ...

read more »