This issue is also relevant for those who display their blog posts side-by-side on the home page. Posts which are of equal height would appear in a harmonious grid-like format which is more pleasant to the eyes, whereas posts of unequal length disrupt the grid-like pattern and can often cause disarray in the layout.
In this tutorial, I'll explain how to use JavaScript to ensure columns of your choosing (whether the sidebars and main column, or individual posts) appear at equal heights to ensure a pleasant and harmonious layout for your blog design.
The "Matching Columns Script" and how it works
In this tutorial, we will be using an adaptation of the "Matching Columns" JavaScript by Alejandro Gervasio. which was modified to work in FireFox by Stefan Mischook for Killersites.com. You can read the original article and even view a video explaining how this script works over at the Killersites blog.
This JavaScript matches the height of all columns which use a specific CSS "class". It finds the length of the longest columns which uses this class name, then creates extra CSS declarations to ensure all other columns using this class are lengthened to the same height.
For example, if we use the class of "column" for both the main posts section and sidebars in our blog template, the script will ensure that the main column and both sidebars appear of equal length when viewed in a web browser.
The original Matching Columns JavaScripts use external files which are linked to in the head section of the web-page. However, I have adapted this method for use in Blogger templates so we can use "inline" JavaScript, meaning we do not need to host a JavaScript file on an external host.
How to add the Matching Columns function to your Blogger layout
The first step to creating columns of matching height in your Blogger layout is to add the required JavaScript code to the head section of your template.
This is very simple! All you need to do is copy the following section of code and paste this just before the closing <head> tag in your Blogger template (it is quite long so be sure to copy the entire section of code to your clipboard!):
<!-- Equal Columns JavaScript Start -->
<script type='text/javascript'>
/*
Enables columns to be of the same height for better blog designs.
Derived from a script by Alejandro Gervasio.
Modified to work in FireFox by Stefan Mischook for Killersites.com
Adapted for inline use with Blogger blogs by Amanda Fazani of BloggerBuster.com
How it works: just apply the CSS class of 'column' to your pages' main columns.
*/
function matchColumns(classname){
var divs,contDivs,maxHeight,divHeight,d;
// get all <div> elements in the document
divs=document.getElementsByTagName('div');
contDivs=[];
// initialize maximum height value
maxHeight=0;
// iterate over all <div> elements in the document
for(var i=0;i<divs.length;i++){
// make collection with <div> elements with class attribute 'container'
if(new RegExp("\\b" + classname + "\\b").test(divs[i].className)){
d=divs[i];
contDivs[contDivs.length]=d;
// determine height for <div> element
if(d.offsetHeight){
divHeight=d.offsetHeight;
}
else if(d.style.pixelHeight){
divHeight=d.style.pixelHeight;
}
// calculate maximum height
maxHeight=Math.max(maxHeight,divHeight);
}
}
// assign maximum height value to all of container <div> elements
for(var i=0;i<contDivs.length;i++){
contDivs[i].style.height=maxHeight + "px";
}
}
// Runs the script when page loads
window.onload=function(){
if(document.getElementsByTagName){
matchColumns('crosscol'); // class=column
matchColumns('column'); // class=maincolumn
}
}
</script>
<!-- Equal Columns JavaScript End -->
Once you have pasted this section of code in your template, proceed to save it. If for some reason you have made any errors when pasting the code, you will receive an error message and be unable to save.
Now to make sections of your Blogger layout have equal heights, we need to apply the class of "column" to those sections in the actual template code. I will offer two variations of how this can be achieved in this tutorial: making the sidebar and main-wrapper equal height, and making all posts equal height (for use when making posts appear side-by-side).
Make the sidebar(s) and main posts column of equal length
This method works best for layouts including at least one colored sidebar (whether this feature a background color or background images for effect). There are many different non-standard templates using this style of layout, so it's likely that the identifiers of the divisions referenced here could be different in your own template.
To make the sidebar(s) and main column of equal length, you will need to add the class of "column" to these divisions in the template.
For the main-wrapper (the section which holds your blog posts) you should look for a line like this in your template:
<div id='main-wrapper'>
Add the code highlighted in red to this line:
<div id='main-wrapper' class='column'>
If you cannot find <div id='main-wrapper'> in your template, this may be called 'main-wrap' or 'main-section' instead. Use your discretion to find the appropriate code tag; you can always change things later!
Next, you need to add the class of column to your sidebar or sidebars. If your template features more than one sidebar, this could become a little complicated though I will do my best to explain!
Most Blogger templates identify the sidebar-wrapper like this:
<div id='sidebar-wrapper'>
If you find this in your template code, simply add the section in red:
<div id='sidebar-wrapper' class='column'>
The main sidebar could also be called 'sidebar-wrap', 'left-sidebar' or even 'left-bar' depending on the template you are working with. Again, use your discretion and add class='column' in the place you think most appropriate for your template.
This also applies in templates where you have a second sidebar. It may be named <div id='sidebar-right'> ; 'right-sidebar-wrapper', 'new-sidebar-wrapper' or something entirely different. Simply add class='column' inside the division tag which you think references the correct section in your template.
Now to check if your modifications have been successful, attempt to preview your template. Since the JavaScript we are using is contained within the template (not referenced from an external host) you should be able to see the difference straight away. This means that your blog sidebar should appear as long as your main posts column.
If all looks well, you can proceed to save your template and enjoy your new matching columns. If your sidebar and main column do not appear at equal heights, clear your edits and begin again being sure to check the placement of the class='column' sections you have added.
To make posts of equal height
This method is particularly useful when using my recently posted customization to display posts side-by-side on non-item pages. Using this method ensures your posts appear in a grid-like fashion with spaces beneath shorter posts so all headings are correctly aligned.
For this example, you will need to ensure you have checked the "Expand widget templates" box on the Edit HTML page, as we will be adding the class of "column" inside the main posts widget.
Firstly, ensure you have added the JavaScript before the closing </head> tag in your Blogger template.
Next, search for the following line of code (or similar):
<div class='post'>
If you cannot find this line, search for the following instead:
<div class='post hentry'>
Or any other division tag which begins with <div class='post
You do not need to add the entire class='column' phrase here as this div already has class attributes. Instead, we simply need to add the class identifier, like this:
<div class='post column'>
or alternatively,
<div class='post hentry column'>
This is because divisions can have more than one "class" (though they can only have one "id"!).
Once you have added this extra class to the posts section, preview your template to see that your blog posts are now all of equal height.
Important information when making posts of equal height
If you choose to make your posts of equal height, you must consider that all of your posts will appear as long as your longest post. So if you have one particularly long post on your home-page when all others are relatively short, there will be long gaps beneath all of your shortened posts!Other uses for the matching columns script
You can also adapt this script and methods to add columns of equal height to your blog footer (in conjunction with my three column footer hack, perhaps!), or to any other areas of your blog template which you would like to be of matching heights.
Simply apply the class of "column" to all divisions which you would like to appear at the same height, and ensure you have pasted the JavaScript before the closing </head> tag in your Blogger template!
Your thoughts?
I hope you have found this tutorial to be a useful addition to the arsenal of Blogger customizations and tutorials posted here on Blogger Buster! Please feel free to leave your comments or let us know how you have used the matching columns script in your own designs by typing your message below.
No comments:
Post a Comment