Customising Your Blogspot Blog Header

Adding AdSense Ad Units, Link units or Searchbar To The Blog Header

The first thing to do for this is to generate the script for your Ad unit, link unit or else the searchbar in your AdSense Account. Next to this, sign in to the Dashboard of Blogger. There select the blog on which you have to make such changes and click on the LAYOUT of that blog.

After clicking the LAYOUT there will arise a pop-up window. Select HTML/Javascript from that pop-up and paste your script there.

After doing this just click “Add to blog.” Drag and drop the page element to the desired place.

For another page element to contain such as the link unit, just repeat the process.

One more thing, you can in fact incorporate the two scripts into the same HTML/Javasscript Page Element if you want. It is possible.

Hide Navbar for New Blogger

We all are well aware of the blue colored navbar of blogspot. It is at the very top of a blog. Sometimes it seems to be odd and more to this, it takes away valuable space.

We can remove it. Here is the tip. Before that let me also inform you all that the Blogger Terms of Service do not specify that one must have it for the blog.

navbat blogspot

There may be various ways to hide it. This is one of the effective ways.

First go to the LAYOUT and then to the EDIT HTML. Now open the template editor. Search for in it and just after that paste the below given:

/* By Aditya
———————————————– */
div.navbar {

How To Find The Width Of Your Blog Header, Sidebar and Main Column

This is very simple and it is important too in resizing the width of the header, sidebar or the main column.
Login to the Blogger. Of the relevant blog, click LAYOUT and then EDIT TEMPLATE. The editor window of the template will get open. Find the following:

#header-wrapper {
margin:0 auto 10px;
border:1px solid $bordercolor;

#main-wrapper {
width: 400px;
margin-left: 20px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

#sidebar-wrapper {
width: 150px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

The first one shows the width of the Header i.e. 750 pixels. The second shows the main column width i.e. 400 pixels. The last is of sidebar having a width of 150 pixels. The pixel can be changed as desired.

1 Comment

Leave a Reply

Your email address will not be published.