Customize Blogger Header to Enable Search Box, Ad Sense and Tabs - latest tech tips

Ad Spot

Place your Ads here!

Post Top Ad

Customize Blogger Header to Enable Search Box, Ad Sense and Tabs

Share This
I personally hate to change the blogger template code, its some thing I love to avoid. I found out a very simple way to make the header look very professional with least coding that too not in the blogger template.

Blogger Templates are not very flexible in customizing header Out Of The Box but with very little smart effort  you can get a very cool, effective and professional looking header. Before you proceed have a look at my blogs header you will get exactly the same effect.

This trick is so simple that you would think that why couldn't you think of doing it long time back. Okay now let me tell you how its done. Before you want to customize your header you basically need two images
  1. Image which you can use as a Banner (ideal size 500 X 100 pixel)
  2. Image would be a 1 x 1 pixel size (to hide the header).
You don't need to worry about the second image I will take care of that. In this tutorial I am going to tell how you can have a small banner and a search box in the header of your blogger blog and also tabs below the banner. Now here is what you need to do.

1. First lets hide the existing header
Just go to Design ⇒Edit Header ⇒Select Image ⇒From The Web and put below url. This would hide the existing header with a image which is very small giving impression that there exists no header. I bet no body else has tried such a trick.


http://3.bp.blogspot.com/_Ht1_rh8kGYQ/TQ2KkJX1DBI/AAAAAAAADV8/oW_TvxH1Kys/s1600/LatestTechTipsEmptyBanner.png



2. Now lets add your Header code for Banner, Search Box(Or AdSense) and Tabs.

Now again go back to Design ⇒Add HTML/Javascript and the add below code in the widget and place it just below your header section. Before you place this code in the widget make sure you do changes as per your Blog i.e add proper Banner image path, proper links for your tabs etc.

I have also added proper comments explaining each section of the code. But for further convenience the first part is a table which will have you Banner on left and Search box on right and later part contains code for Tabs listed below both.

In case you do not want to add the Tabs you can simply remove that part of the code and you should be all set.



<ul>
<table align="" width="" style="border-collapse: collapse; width: 100%;background:#35549E">
   <tbody>
     <tr>
 <td>
    <!-- Put your Banner image path in the src-->
    
    <img src="YourBannerImageURL" />
 </td>
 <td>
    <!-- Below is the search Box code no need to modify it-->
    <!-- Or you code simply remove the search code and place your ad sense code in here-->
    
    <form id="searchthis" action="/search" style="display:inline;" method="get">
  <input id="search-box" name="q" size="35" height="15" type="text" onfocus="this.value = '';" value="Search"/>
  <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>
 </td>
     </tr>
   </tbody>
</table>

<!-- Below is the code for adding tabs, href has the link, title has the tooltip and Value is the Tab Text the second line is a sample-->

<li><a href="Tab Link here" title="Tool Tip Text here">Title Here</a></li>
<li><a href="http://latest-tech-tips.blogspot.com/search/label/How%20to" title="How to Guides">How To</a></li>
</ul>



Once you are done just check the preview do necessary adjustments if required. But I don't think you will require anything. And your Blog is absolutely ready.




In case things don't look the way you intend don't worry. You can very easily revert back to what your blog looked like all you have to do is just remove the HTML/Javascript widget and put your Banner image back in Header and you are done.

If you need any help, you can simply mail me or just leave a comment I will make sure you get what you wanted. So enjoy your new professional looking blog without paying any web designer a single $.

2 comments:

  1. nice tutorial thanks...

    ReplyDelete
  2. Thanks Moh. It took me lot of effort to add this trick, I am very happy that you found it useful. Keep coming :)

    ReplyDelete

Spam comments will be deleted. Only comments which add value to the blog and its readers will be published.

Post Bottom Ad

Pages