Three Column Minima (Layout Version)

I started this blog because, like everyone who gets into blogging, I wanted to add a third column to my Minima template. Sadly, I also knew absolutely nothing about HTML, and nowhere could I find instructions that were all in one place and easy to understand. Three Column Blogger was then born.Update 1/2/10: Thank you all so much for your great comments, encouragement and suggestions. There are now over 300 comments, and Blogger has appended them - you'll need to click on the "more comments" link at the bottom of the page to post a comment or read new replies. I still read all of the comments, and I try to incorporate your suggestions into the main post. This has become a better resource for all as a result. As always, links are appreciated. Cheers!

These instructions are simple and easy, and you can do it if you don't know the first thing about HTML (which is perfect, because I don't). Minima is one of the simplest templates to modify, and it's also easy on the eyes, so both readers and bloggers like it.

This post is for adding a third column to Minima in "Layout Version". To check which version you're using, go into your dashboard and look just to the left of the "View Blog" link on the top left of the page. If the tab there says "Layout", you are using the Layout version of Minima and this post is for you. If it says "Template" there instead, then you are using the "Classic" Template version of Minima and those instructions are a bit different. But don't worry, I've posted instructions for three column Minima in Classic Template version here.

So let's get started! First, open up Blogger and go into your Dashboard, then click on the "Layout" tab. Then go into the "Edit HTML" tab. You will see a bunch of gobbledygook and gobbledygook it shall remain - you don't need to know anything about it. Just scroll down through the code until you see :

/* Header
-----------------------------------------------
(Note: you can also use your browser's control F (CTRL+F) command to search for this section. Just type in /* Header and then click the "next" button)

Now, change the width of the "header-wrapper" from 660 to 940;

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

That piece of code should now look EXACTLY like this:

#header-wrapper {
width:940px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Also, at the bottom of the same Header section, change the max-width from 660 to 940:

#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:660px;<-------change to 940
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

That piece of code should now look like this:

#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:940px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}


So far so good. Next, scroll down (or use CTRL+F) to where it says:

/* Outer-Wrapper
----------------------------------------------- */

Now, just like you did in the Header above, change the "outer-wrapper" width from 660 to 940, and (2) change the "main-wrapper" width from 410 to 500

#outer-wrapper {
width: 660px; <-------change to 940
margin:0 auto; padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px; <-------change to 500
float: $startSide;
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 */
}

Next, take this new block of code (in red) and paste it in exactly as it appears directly in between the "outer-wrapper" code and "main-wrapper" code. It's helpful to use "CTRL C" to copy, and then "CTRL V" to paste, if you didn't already know that trick. Regardless of how you do it, you must paste it in between these two code blocks, nowhere else. Update: the Google Gremlins may let some of you get away with using "left" instead of "$startSide" and "right" instead of "$endSide".

#left-sidebar-wrapper {
width: 220px;
float: $startSide;
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 new code block should look exactly like this:

#outer-wrapper {
width: 940px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#left-sidebar-wrapper {
width: 220px;
float: $startSide;
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 */
}
#main-wrapper {
width: 500px;
float: $startSide;
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: $endSide;
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 */
}

Then scroll way down the page to the footer section (or use CTRL F), it looks like this:

/* Footer
----------------------------------------------- */

Change the width of the "footer" from 660 to 940.

#footer {
width:660px; <-------change to 940
clear:both;
margin:0 auto; 10px
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

At this point, believe it or not, there are only two more steps. This particular step is hard only because you need to make sure you paste the additional code in the right spot, and this next spot can be a hard place to identify (CTRL+F helps here a lot).

Anyway, in the same footer section that you're now in, scroll down until you see:

<div id='content-wrapper'>

Then, locate the the "main wrapper" id a few lines below it. It looks like this:

<div id='main-wrapper'>

Now, just above the "main wrapper" id, paste in the following code EXACTLY as it appears below:

<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
</b:section>
</div>

Note: this will also temporarily insert the Blogger logo button into your new sidebar, but you can delete that and add the widget of your own choice after you finish adding the column. Update: If you get an error message that says the widget ID should be unique, you have an existing blogger button already loaded in your original sidebar and you'll have to delete that one temporarily. But don't worry, you can customize all of your sidebars when you get them all set up. If not, there's no need to worry about it - the button is just a placeholder and you can replace and rearrange all of your widgets when you finish.

So, after you do that, the newly modified section should now look like this:

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'>
<b:widget id='Gadget1' locked='false' title='Geo IP Tool' type='Gadget'/>
</b:section>
</div>

<div id='main-wrapper'>

And you are a now master Minima coder, because you're done! Hit preview to see your new three column Minima layout, and then save the template. Now you can go into the "Layouts" and add a new google gadget of your choice. You can also read this article for instructions on how to adjust your marginsto make more space in between your columns.

If you have any trouble with your "nav bar" or would simply like to turn it off, insert the following code (in red) exactly where I have placed it:

Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------
#navbar-iframe {
display: none !important;
}

Best of luck with your blogging. If this post was helpful, I would really appreciate a link. If you would like to create a link in one of your posts or on your blogroll but are unsure how to do it, just insert this html string in your post text:

</a href="http://www.threecolumnblogger.com/">Three Column Blogger</a> 

It will appear in your post text/blogroll as Three Column Blogger

Thanks!!

Labels: 3 Column Blogs, Three Column Minima

read more

Adjusting Three Column Margins in Layout

In the earlier related post, your faithful servant showed you how to turn your free two column Minima Blogger template into a three column Minima template. After you get your three columns all set up, you'll probably want to adjust your margins. Your blog will be fine without this step, but you'll probably notice that your columns appear "squished" in together. Have no fear, it's easy to fix, and once you learn how you can customize your blog's look to almost any desire.

This post is for adjusting margins in "Layout Version". If you forgot which version you're using, just go into your dashboard and look to the left of the "View Blog" link. If the tab there says "Layout", you are using the Layout version of Minima and this post is for you. If it says "Template" there instead, then you are using the "Classic" Template version of Minima and those instructions are here.

Like the instructions for adding columns, these instructions are also simple and easy, and you can do it if you don't know the first thing about HTML.

In the Three Column Blogs tutorial on adding a column to Minima in Layout, you made room for the new column by increasing the width of the page to 940 pixels.

Consequently, when you adjust your margins, the width of the sidebars, the main post column and all the margins must collectively add up to 940. If they exceed 940, one of your columns will drop to the bottom of the page. If they are less than 940, you will still see all three columns but the layout will be asymmetrical. So get out your calculator and let's begin!

First, open up Blogger and go into your Dashboard, then click on the "Layout" tab. Then go into the "Edit HTML" tab. Next, scroll down (or use CTRL+F) to where it says:

/* Outer-Wrapper
----------------------------------------------- */

Now, you are going to paste some code in to add margins to your new columns. It's helpful here to remember the "ctrl c" trick to copy and "ctrl v" to paste - it's much faster and easier. The code you are going to paste in will be the exact same every time. It is:

margin right:
margin left:

First, we will add margins to the "left-sidebar-wrapper". To do that, paste the following code in between the sidebar's "width" and "float" designations:

margin-right: 10px;
margin-left: 5px;

Next, we will move to the "main-wrapper". Paste the following code in between the main-content's "width" and "float" designations:

margin-right: 15px;
margin-left: 15px;

Then, we'll do the same thing for the right sidebar wrapper, which is identified in the code as the "sidebar-wrapper". Paste the following code in between the right sidebar's "width" and "float" designations:

margin-right: 5px;
margin-left: 10px;

Now for the math. These margins added 70 pixels to the main page, so we'll need to reduce the width of the columns by a collective 70 pixels. In this example, I have chosen to reduce the width of the two sidebars, but you can also reduce the main post width alone, or all columns together. This is what you need to do in order to reduce the sidebar widths:

#left-sidebar-wrapper {
width: 220px;<-------change to 185
margin-right: 10px;
margin-left: 5px;
float: $startSide;
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;<-------change to 185
margin-right: 5px;
margin-left: 10px;
float: $endSide;
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 */
}

Your finished block of code with the new margins should now look like this:

#left-sidebar-wrapper {
width: 185px;
margin-right: 10px;
margin-left: 5px;
float: $startSide;
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 */
}

#main-wrapper {
width: 500px;margin-right: 15px;
margin-left: 15px;
float: $startSide;
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: 185px;
margin-right: 5px;
margin-left: 10px;
float: $endSide;
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 */
}

Hit "preview" to see your new three column blogger layout with margins, and then save the template if everything is ok. And now you really are a now master minima coder! Not only are you completely done, but you are also armed with enough knowledge to increase the width of your columns and main page in order to fit custom widgets and other "non-google" add-ins.

Update: There are a lot of comments below about not enough space between columns, too much space, etc. These are personal preferences and they can easily be met - the great thing about the Blogger templates is that you can customize them to your heart's desire. Experiment! Just fiddle with the margin settings until your blog looks the way you want - it's easy. More pixels in your margins=more space between columns, less pixels in your margins=less space. Be careful not to add too much though, or your right column will drop to the bottom of the page.

Also, several people made comments about images/widgets/photos getting cut off in their sidebars - again, you need to either reduce the size of the image/widget/photo to fit in your sidebar, or increase the width of the sidebar to accommodate the size of the widget. But be careful: if you make it too wide,your right column will drop to the bottom of the page.
Best of luck with your blogging. I hope this article on adding margins to your three column template did great things for your blog! If this post was helpful, please link to it! Cheers.

read more

Smooth Multi Level Drop-Down Menu Using jQuery

The smooth multi level drop-down menu, called WH works on all browsers and uses jQuery.

Features:

1. Browser support: FF1+ IE6+ Opera8+
2. Smooth Navigation using jQuery
3. Slide plus fade in effect for sub menus
4. Shadow effect

1. The CSS part (for blogs hosted on Blogger, you need to copy the code below, above the </b:skin> tag (Layout > Edit HTML)):

/*Some IE fixes*/
.ddsmoothmenu ul li {zoom:1;}
.ddsmoothmenu ul li {display:inline;}

.ddsmoothmenu{
font: 12px Verdana;
background : #ffffff none repeat scroll 0% 50%;
border : 1px solid #ececec;
margin : 5px 3px 5px 3px;
padding : 0;
width : 973px;
height: 30px;
}

.ddsmoothmenu ul{z-index:100; margin: 0; padding: 0; list-style-type: none;}

/*Top level list items*/
.ddsmoothmenu ul li{position: relative; display: inline; float: left; }

/*Top level menu link items style*/
.ddsmoothmenu ul li a{display: block; color: white; padding: 4px 10px; border: 0px solid #778; color: #2d2b2b; text-decoration: none; font: 14px Verdana; }

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{color: black;}

.ddsmoothmenu ul li a:hover{background: #dee5e5; /*background of menu items during onmouseover (hover state)*/
color: #BF0000;}

/*1st sub level menu*/
.ddsmoothmenu ul li ul{position: absolute;left: 0; background: white;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{ display: list-item; float: none;}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{ top: 0; }

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{ font: normal 13px Verdana; width: 160px; /*width of sub menus*/
padding: 5px; margin: 0; border-top-width: 0; border-bottom: 1px solid gray; border-left: 1px solid gray; border-right: 1px solid gray;}

/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{ position: absolute; top: 7px; right: 4px;}

.rightarrowclass{position: absolute; top: 6px; right: 5px;}

/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{position: absolute; left: 0; top: 0; width: 0px; height: 0px; background: white; display:none; visibility: hidden;} 

If you want shadows for the sub menus (but from my tests - it's not working if there are some flash or javascript elements under it), change the last line in the code above with this line:

.ddshadow{position: absolute; left: 0; top: 0; width: 0; height: 0; background: silver;} 

You may of course alter the above code so it will fully integrate with your website (change the colors, etc).

2. One more IE hack and the JavaScript. Enter the following code above the </head> tag:

<!--[if lte IE 7]>
<style type="text/css">
html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script src='https://dl.dropbox.com/u/2886083/w8/googlepages/whddmenu.txt' type='text/javascript'/>

Please download and then re-upload whddmenu.js to some other server as my server will not work for long. There are also two settings which you can alter in whddmenu.js:

transition: {overtime:300, outtime:300}, 

which is the smooth slide in effect. Change the values to your likings. And also:

shadow: {enabled:false, offsetx:5, offsety:5}, 

I disabled the shadow, but you can enable it by altering the above code in whddmenu.js (from false to true) and you can also change the x and y offset.
You can also download my arrows if you want (and make them whichever color you'd like):
Down arrow
Right arrow

3. And now, the html code that creates the menu. Add the following code to where you want the menu to show up (it's just an example, modify it to fit your needs):

<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://webupd8.blogspot.com">Home</a></li>
<li><a href="#">page 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://blogwidgetbox.blogspot.com/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

read more