View Basnet Blog In Any Colours
  • CREATE A FREE BLOG

    Creating a blog is very easy than you might be thinking. You don't have to be a computer or programming genius, clear instructions provided in this blog....

  • FREE MINIMA TEMPLATE

    Unlike previous two column Minima blogger template this new three column Minima blogger template has been edited for better results. New features for better seo has been....

  • COLOUR GENERATOR

    Generate matching color schemes to use it while editing your blog or a website. Like never before with this free colour code generator tool....

  • ADVERTISE HERE

    Now you can reach our highly involved audience and generate huge Traffic. Its simple Promote Your Business On Basnet Blog and see the difference.

  • MAKE MONEY

    Now you can reach our highly involved audience and generate huge Traffic. Its simple Promote Your Business On Basnet Blog and see the difference.

2 Apr 2012

2 ADD BLOG SEARCH BOX CODE TO BLOGGER TRICKS

Blogger Navigation bar or popularly called as Blogger Nav Bar comes with a default search box embedded at the top of your Blogger blogs. The nav bar leaves behind no options of customizing it or the search box except changing the colour of the bar. However, you may want to include similar custom searchbox in blogs sidebar or blogs header or blogs footer or at the main body of your blog. You might be thinking why my blog has no Navigation bar with search button embedded at the top though I have mentioned above in the post that default Blogger Navigation Bar comes with no options of customization. The tricks of blogger customization come here. The answer to this question is very simple I followed a trick to remove the navigation bar from my blog. See you cannot edit the code of the search but you can remove the whole code of the search box along with the blogger nav bar. You too can remove the blogger nav bar, read the post how to remove hide or disable blogger nav bar for giving your blog a professional look.
................................................................................................................
Stepwise Instructions To Ad The Code
................................................................................................................

Sign in to Blogger Dashboard select Design and Add Gadget
Select HTML/JavaScript and when the page opens add the codes.

Save and reload/refresh your blog. 

................................................................................................................
Search Box Code
................................................................................................................
<p align="left">
<form id="searchthis" action="http://basnetblog.blogspot.com/search" style="display:inline;" method="get">
<strong>BASNET BLOG<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>

................................................................................................................
Customize Simple Blogger Search Box
................................................................................................................
Don’t forget to change the portion in red http://basnetblog.blogspot.com to the URL or web address of your Blog and BASNET BLOG to your sites name. Apart from the sites url it is always not mandatory that you should give particular name of your blog to the blog internal search engine or the search box. Let me explain you, for instance, if you have a Blog Name/Blogs Title like “Blogger Blog Tutorials and Tricks” than in this case you may consider writing something like “BBTD”, “Search Here”, “Search This Site”, “Search The Blog”, “Blog Search”, “Blogger Search Box”, etc.

You can also change the width of the search box by replacing the digits 20 to whatever size you want.  Not only this you can easily tweak the value Search to Go, Hit, Visit, etc. After you are done with the code customizations save it and load the page that contains the search box code. By doing this you can verify the bugs in your code and its presentation, location, etc.Save the code and refresh your page. If you want a longer or shorter search box, you can play around with the size.
................................................................................................................
Demo Of Custom Search Box Code
...............................................................................................................
Below given demo has width size="20" and value="Search" will give you this result:-



BASNET BLOG

2 comments:

  1. I have read this post. Collection of post is a nice one ..that am doing Web Development India and ERP Software Solution That I will inform about your post to my friends and all the best for your future posts..

    ReplyDelete
  2. Thanks for sharing . It working perfectly.but I want to add it in navigation bar. Can u help me please

    ReplyDelete

This Is a DO FOLLOW BLOG. So Leave Your valuable Comments and get a Quality BacklinkS and of course high Google Page Rank.

CONDITIONS APPLY:

1. Comments made simply to get backlink profit WILL BE DELETED.

2. We don't accept Spam Comments.

3. We don't accept more than 1 link in comments post body.

4. Please refer to TERMS AND CONDITIONS for more information on posting comments.

 

BASNET BLOG | Copyright © 2011 | Powered by Blogger | Blog Designed By Yogen Basnet

Get Latest Updates: Subscribe Now | Like Us Facebook |