Skip to main content

How to add Google Search Tab to your HTML website

hi, how are you today


So in last post we covered "how to add FAVICON to html website" and today I am going to share one more interesting topic which covers how to add google search tab to your html website. Yes, I am talking about adding the same search tab that your eyes always capture on most of the websites to search.
There are many types of search tab that differentiate the search option, like anyone wants to search on google or on the same website. Today we are going to cover about embedding a simple google search tab on any html website.

As we all are well aware of GOOGLE, a worldwide search engine that always be our first choice while surfing to search. If we have any doubt regarding anything in our mind, google is our only hope.


So adding google search tab to your html website is damm easy that requires a simple copy paste step. Yes you have to simple copy paste a two line code to the place where you want to embed the search tab for your viewers.



Code 1 :- Without search button

<form method="get" action="http://www.google.com/search">
<div>
<input type="text"   name="q" size="25" style="color:#808080;"   (edit width size of search box)
maxlength="255" value="Google search box"                ( edit text inside box you want to display)
onfocus="if(this.value==this.defaultValue)this.value=''; this.style.color='black';" onblur="if(this.value=='')this.value=this.defaultValue; "/>
</div>
</form>


Code 2 :- With search button
<form method="get" action="http://www.google.com/search">
<div>
<input type="text"   name="q" size="25" style="color:#808080;"
maxlength="255" value="Google site search"
onfocus="if(this.value==this.defaultValue)this.value=''; this.style.color='black';" onblur="if(this.value=='')this.value=this.defaultValue; "/>
<input type="submit" value="Go!" />                             ( edit what you want to name the button)
</div>
</form>





So, both the codes mentioned above are for google search only. Simply copy and paste the code to the area where you want to display this search bar on your website. Here you can edit the size of the search where you usually type your query, can set the message that you want to display inside the search box. You have one more option to edit whether you want to display submit button or not.

So now add this Google search tab to your website and give your viewers a easy way to search anything from your website only. I will be back soon with a new post where you can give your viewers an option whether anyone wants to search things on google or on your own site.


Hope you all like this post and I wish this proves useful to you.
Keep sharing & give your views about post mentioned below the post.
Comments are always welcomed for better improvement.

Thanks :)

Comments

Translate to your language

Popular posts from this blog

Different Stages of I2C communication

Different Stages Of I2C

How to import Pygame in pycharm

hi, how are you today

Working demonstration of UART communication using 2 8051 uController on Proteus with Embedded C code.

Here we are going to use 2 at89c51 uControllers just to understand UART communication in 8051.