Postim më i vjetër
Postim më i ri

Blogger beta hack :Creating A Three Column Template

I'm one of hunter about the "Three Column Template" and "Blogger Hack" in many blog forum. From much experts (problogger) answers/guide, this following post is a synthesize incredible-trick how to "Creating A Three Column Template" (thank's to sencerely)

As usual, these instructions apply to the existing "Minima Templates in Blogger" Beta yet the same principles apply to all templates.

The first thing you want to do is enter the ’Edit HTML’ section for your blog through the Blogger admin area.

Next, find this portion of the HTML (a simple, ‘find text’ search will suffice):

#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 */

}

This bit of code defines the format of the sidebar for your blog which in the Minima Template is on the right. What we want to do is make a new sidebar with a new name (eg ’new-sidebar’) and put it on the left hand side of the blog. Copy the code below and place it directly below the above code in your blog:

#newsidebar-wrapper {

width: 220px;

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 */

}

The next part is a bit tricky. We’ve added a new column, but we haven’t changed the width of your blog. Look just above the code we just inserted in your blog to the #outer-wrapper section. Notice that the width is 660px. Yet what we have at this point is (left sidebar + main + right sidebar). Or (220px +410px +220px = 850px). Therefore, we need to change the width of the outer-wrapper so that it can fit our blog. You can vary the widths depending on the design of your blog, but in this example we’ll change the width to 850px so that the outer-wrapper section looks like this:

#outer-wrapper {

width: 850px;

margin:0 auto;

padding:10px;

text-align:left;

font: $bodyfont;

}

Now we’ve defined the columns in our blog but we still need to put them into the blog. Next, we want to find the div id=’sidebar-wrapper’ portion of the text. Once again, a simple ’find text’ will suffice. It should look like this:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>


This section adds the existing sidebar to the blog. We want to change it a little so that we are adding the newsidebar on the left. Also, Blogger won’t let us have the same two elements in both sidebars, so we want to remove the ’BlogArchive1’ and ’Profile1’ part of the code. Add the following newsidebar code directly above the div id=’main-wrapper’ part of the HTML:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='Text1' locked='false' title='' type='Text'/>
</b:section>
</div>


Save it and that’s it!! Go to the ’Page Elements’ tab and you should see three columns in your blog ready to be edited!

3 people have left comments

Gravatar

Unknown said:

Ok. That is one of the best described examples of something that I *think* works that I've ever seen. Thanks. I'm going to explore some more and see if I can find what I'm really looking for.

Posted on:6/20/2007 Delete This Comment
Gravatar

Unknown said:

Ok. That is one of the best described examples of something that I *think* works that I've ever seen. Thanks. I'm going to explore some more and see if I can find what I'm really looking for.

Posted on:6/20/2007 Delete This Comment
Gravatar

Mizake said:

Komenti u hoq nga autori.

Posted on:6/23/2007 Delete This Comment