Modify Template

Modifikasi Teplate Blogger

From what I can tell, 75% of the effort in making any template is in the setting up the widths of the containers. Remember the container layouts.

A 2 column template has 2 columns, floating opposite each other.

• Main, floating left.
• Sidebar, floating right.

All that you have to do is split the Main column.

• Main1, floating left.
  • Sidebar2, floating left.
  • Main2, floating right.
• Sidebar1, floating right.

That part is relatively easy. The challenge comes in keeping the columns from cramming themselves right next to each other. With a standard template, and each container having a fixed width, this is a real struggle. You have to calculate the width of each column, in pixels. Then, you have to add paddings, and margins, and carefully calculate the result. With a 3 column template, this is a bit more complicated, as the Main container is split into Main2 and Sidebar2, each container needing its own paddings (and the paddings of one set of containers becoming the margins of the parent container - or is it vice versa), which means that Main1 (pka Main) must be resized accordingly.

With a stretch template, the width of each container is allocated in % of parent container width. Containers Main1 and Sidebar1 float left and right, respectively. Sidebar2 and Main2 (within Main1) float similarly. The width of each container is in %. All that you have to do is establish "Main1 + Sidebar1" <>my 3 column Minima template.

For a challenge, I started with a standard (newly setup) Sand Dollar template. Sand Dollar is similar to Minima, in that the Main (posts / sidebar) area of the template contains very few decorations, making all screen width usable for content. The big difference between Minima and Sand Dollar is that Minima comes in two versions - fixed width and stretch, while Sand Dollar comes in just 1 version - stretch.

I examined the layout of a standard Sand Dollar template.

• Main, floating left, width 66%.
• Sidebar, floating right, width 31%.
• Leaving a 3% margin between the two containers.

I split the Main container (now named Main1).

• Main1, floating left, width 77%.
  • Sidebar2, floating left, width 25%.
  • Main2, floating right, width 72%.
  • Leaving a 3% margin between the two containers.
• Sidebar1, floating right, width 20%.
• Leaving a 3% margin between the two containers.

You can change any of these, as you like. You can make the main column narrower or wider, or make either sidebar narrower or wider, within limits. Just remember, if you go over 100%, you may end up with a dropped main or sidebar. And note that, if you're willing to have both sidebar columns on the same side and next to each other, this process becomes a bit simpler.



Enough design, let's look at the actual coding.

First, backup the template that you have right now.

Next, go to the Edit Template wizard. Find two snippets of code.

The first, in the Header, at the top ...

@media all  {

div#main {

float:right;

width:66%;

padding:30px 0 10px 1em;

border-left:dotted 1px $bordercolor;

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

}

div#sidebar {

margin:20px 0px 0px 0;

padding:0px;

text-align:left;

float: left;

width: 31%;

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

}

}

And a second, in the Body, nearer to the bottom ...

And replace those two snippets of code with two slightly larger snippets. When you do this, carefully examine your current template, and what widgets you have in the Main (posts column) and Sidebar containers. Here, we have only BlogArchive1 and Profile1. If you've added any custom widgets to your main or sidebar columns (and almost everybody does, after any amount of time), be sure to copy the widget code from your current template to your new template!

The first ...

@media all  {

#main1-wrapper {

width: 77%;

float: left;

padding:20px 0 10px 1em;

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

}



#sidebar2-wrapper {

width: 25%;

float: left;

padding:0px;

border-left:dotted 1px $bordercolor;

text-align: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 */

}



#main2-wrapper {

width: 72%;

float: right;

text-align: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 */

}



#sidebar1-wrapper {

width: 20%;

float: right;

margin:20px 1em 10px 0;

padding:0px;

border-right:dotted 1px $bordercolor;

text-align: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 */

}

}

And the second (which now becomes the same code as for my 3 column fixed width template)...


MEMBUAT 3 COLUMB TEPLATE

Since New Blogger, and the Pick New Template wizard, was launched, many bloggers have been wishing for a 3 column template. So far, Blogger hasn't provided us with one. There are several web sites that offer templates, and some 3 column templates, but using a third party template isn't always a great solution.

Fortunately, making a 3 column template from a 2 column template isn't all that hard to do, assuming that your blog doesn't use fixed width components as Rounders, Scribe, Son Of Moto, Thisaway, and TicTac templates do. You can still make 3 column displays with those templates, but they won't look as good.

If you're willing to compromise, and put the 2 sidebar columns on the same side and next to each other, this exercise becomes a bit easier.

A 2 column template has 2 columns, floating opposite each other.

• Main, floating left.
• Sidebar, floating right.

All that you have to do is split the Main column.

• Main1, floating left.
  • Sidebar2, floating left.
  • Main2, floating right.
• Sidebar1, floating right.

A 2 column lefty template is just a mirror.

• Sidebar, floating left.
• Main, floating right.

Again, split Main.

• Sidebar1, floating left.
• Main1, floating right.
  • Main2, floating left.
  • Sidebar2, floating right.

That's the concept. The execution is a bit tedious, but doable. But it really does work.

This is probably as easy as importing a pre coded template. Note that this example uses a Minima template, in mint condition. Most standard Blogger templates, in mint condition, should be pretty similar, though templates that stretch will need a different (and actually simpler) technique. If you've tweaked the Header code, or added main or sidebar objects, you'll deal with some variances. But you'll go through the same challenges if you import a pre designed template, and more.

First, backup the template that you have right now.

Next, go to the Edit Template wizard. Find two snippets of code.

The first, in the Header, at the top ...

/* Outer-Wrapper

----------------------------------------------- */

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:left;

font: $bodyfont;

}



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

}

And a second, in the Body, almost at the very bottom ...

And replace those two snippets of code with two slightly larger snippets. When you do this, carefully examine your current template, and what widgets you have in the Main (posts column) and Sidebar containers. Here, we have only BlogArchive1 and Profile1. If you've added any custom widgets to your main or sidebar columns (and almost everybody does, after any amount of time), be sure to copy the widget code from your current template to your new template!

The first ...

/* Outer-Wrapper

----------------------------------------------- */

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:left;

font: $bodyfont;

}



#main1-wrapper {

width: 480px;

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

}



#sidebar2-wrapper {

width: 160px;

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

}



#main2-wrapper {

width: 300px;

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

}



#sidebar1-wrapper {

width: 160px;

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

}

And the second ...

Save your changes.

Test.

And finally, backup the template, again!

Yes, it's that easy!

Now in this exercise, you took a standard 2 column template, and simply split the main column. What you have right now is probably a little crammed together. When you see that the 3 column layout works, you can try and widen the columns just a bit.

Save your changes.

Test.

And finally, backup the template, again!

And please feel free to examine the test result



MORE TRY


This tutorial will guide you through the steps necessary to convert the two column Blogger template Stretch Denim into a three column layout. At the end of the tutorial the complete source will be provided. The steps are few, but the tutorial is verbose in an effort to help newcomers to CSS and blogger code understand the steps and be able to apply them in their own template conversions.

Before we start, lets examine how our screen real estate is currently used by examining our template's CSS. If we look at #header and #content-wrapper, we find that our "outside border" (light blue areas surrounding header and light gray areas surrounding the content area) is created with 2% margins; if you want to increase the size of the outside border, just increase these margins:

#header {

margin: 0 2%;

[...]

}



#content-wrapper {

margin: 0 2%;

[...]

}

We also find that our posting area, #main-wrapper, uses 64% of the #content-wrapper with a left side margin of 1% for a total of 65%. The sidebar uses 29% with a right side margin of 1% for a total of 30%. With our border margins included, this leaves 5% (undeclared) as padding between the posting area and the sidebar:

#main-wrapper {

margin-$startSide: 1%;

width: 64%;

[...]

}



#sidebar-wrapper {

margin-$endSide: 1%;

width: 29%;

[...]

}

Now that we have an idea of how space is currently used, lets plan out how we will make use of it for our three column design. Because adding another sidebar equal in size to the existing sidebar would push our screen real estate usage over 100%, we will have to adjust the widths of all the divs. That means, mathematically our usage needs to be less than or equal to 100%. For stretch templates, I find that 20% is usually enough space for most side bar widgets. With two sidebars, that is 40% used up right away and with their 1% margins (left for the left sidebar and right for the right) we have used up a total 42% with the sidebars. That leaves 58% for the posting area. Divided up with margins for "padding", our #main-wrapper will have a width of 56% with a left margin defined at 1% and an undeclared right margin of 1%.

In code our changes will look like this (modifications are in blold):

#main-wrapper {

margin-$startSide: 1%;

width: 56%;

float: $startSide;

background-color: $mainBgColor;

display: inline;       /* fix for doubling margin in IE */

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 {

margin-$endSide: 1%;

width: 20%;

float: $endSide;

background-color: $mainBgColor;

display: inline;       /* fix for doubling margin in IE */

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

}

#sidebarLeft-wrapper {

margin-$startSide: 1%;

width: 20%;

float: $startSide;

background-color: $mainBgColor;

display: inline;       /* fix for doubling margin in IE */

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

}

Finally, we simply need to add our new #sidebarLeft-wrapper div (by copy and pasting of the sidebar-wrapper section) to the HTML to activate it:

Left-wrapper'>

Left' preferred='yes'>

You can view a demo of this template at http://sd3c.compender.com. Download the source.