How To Find The Width Of The Header, Main Column And Sidebar Of The Blogger Templates

Sometimes, we need to know the width of the header, main column or sidebar of our blog.
For example, when we are selecting the format for the adsense code. Suppose I’d like to place Banner format (468 x 60) on top of the main column. That means the width of the main column must at least have 468px width.

Here is how you can find out the width of the header, main column or sidebar of your blog:

1) Find the following codes in the template editor:
(A faster way to do it is by using text search: Click Ctrl+F then type the keyword to be found: #header-wrapper, #main-wrapper, sidebar-wrapper).

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

#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

2) Based on the above, the width of the header, the main column, the sidebar are 660px, 410px, and 220px, respectively.

So, in this case, if you want to place an adsense in Banner format (468 x 60) on top of the main column, it’s not enough. You need to expand the width of the main column to (at least) 470px.
In the next post, I’ll show you how. Stay tuned! :)

NOTE:

Some Blogger templates may have different “names” for the sidebar. The above example is the codes from standard (2-column) Minima template. In this template, the sidebar is shown as: “#sidebar-wrapper”.

Other templates which have 3 columns (with 2 sidebars) may use other “names” such as:
a) “#right-sidebar-wrapper” and “#left-sidebar-wrapper”
b) “.sidebar-wrapper”
c) “#sidebar-wrapper” and “#new-sidebar-wrapper”

Therefore, for sidebar, when you’re searching the codes using Ctrl+F, just use “sidebar-wrapper” as the text to be found.

View the original article here

This post was made using the Auto Blogging Software from WebMagnates.org This line will not appear when posts are made after activating the software to full version.