Merry Christmas!

Wishing all Blogger Buster readers a very Merry Christmas!

Blogger's new Geotagging feature (and how to use it!)

The Blogger team have added a new "Geotagging" feature to Blogger in Draft which enables you to add a location to each of your blog posts. This will then display in your post-footer section (near your post labels, timestamp, etc), and will act as a link to a page on Google Maps where readers can learn more about the location.





Here's an example of how this would appear, as taken in screenshots from the explanatory post on the Blogger in Draft blog:

When you click on the linked location, this will open a new page from Google Maps which shows you the exact location which the author has attributed to the post, like this:

RSS support for Geotags

Your post locations will be included in your blog's RSS and Atom (XML) feeds using GeoRSS which is a web standard for Geotagging. This is important as it allows feed readers, map readers and search engines to associate your posts with particular locations. For example, if you tag your blog posts "New York", these posts can be found more easily by those searching for content based on the New York area.

How to tag your posts with a location

In order to Geotag your posts (add a location) you must create or edit your post through Blogger in Draft. This is because this feature is still experimental, and has not yet been rolled in to the main post editor.



When you create (or edit) a post through Blogger in Draft, look to the left of the Labels area to see the "Add location" link:

This will bring up a pop-up box which appears like this:

Type the location you would like to add in the search box near the top of this pop-up box, and press "Search". You may need to refine your search by adding more details (eg: country, city name, street address) in order to find the location you require.



Once you have found the correct location, you can zoom in (for more accuracy) if you prefer, and finally save your location.



Important: once you have geotagged a post, you cannot remove this tag!



If you do need to remove your geotag for some reason, Blogger recommends that you copy the content of your post and create a new one, then delete the old geotagged post. At present, this is the only way to "remove" a geotag, though it is more of a workaround than a proper solution ;) I suspect the Blogger team will enable us to properly delete or edit a post's geotag before this feature is rolled out for the main post editor.

How to make your Geotags appear beneath your posts

The first step to making Geotag links appear beneath your posts is to enable this setting in the Blog Posts widget.



To do this, go to Layout>Page Elements while logged into Blogger in Draft, and click the "Edit" link for the Blog Posts widget. On this pop-up page, you will notice a new checkbox for "Location". Ensure you have ticked this checkbox, and save your changes.



If you have recently changed your template to a default Blogger theme (or have recently started a new blog), this simple change of setting will enable you to see Geotag locations beneath your posts straight away. If you are unable to see your Geotags after this change of setting, you need to follow one of the instructions below instead.



Since this is a new Blogger feature, your existing template may not currently include the code required to make geotags appear for each of your tagged posts.



If you use a default Blogger template, the simplest way to enable the Geotags for your posts is to pick a new template. Simply go to Layout>Pick new template in your Blogger dashboard and choose the template you would like to work with. This can be the same template you are currently using.



This method refresheds the template code and adds the section required to make the Geotags appear in the post footer section. Alternatively, you could "Revert the widget templates to default" on the Layout>Edit HTML page of your blog. This has the same effect as choosing a new default template.



If you use a customized or third party template, you will need to add the code required for the Geotags to display manually by editing your template code.



To do this, go to Layout>Edit HTML in your Blogger dashboard and ensure you have checked the "Expand widget templates" box.



We need to add the required code to the "post-footer" section of the main blog posts widget. The easiest way to locate this section is to use your browser's search function to find the following line of code:

    <div class='post-footer'>

or

    <div class='post-footer-line post-footer-line-1'>

 If you cannot find either of these lines in your template code, search for "post-labels", "post-icons" or "timestamp" to locate the appropriate section of your template instead.



Once you have located this section of your template, you need to add the following section of code:

<span class='post-location'>

<b:if cond='data:top.showLocation'>

<b:if cond='data:post.location'>

<data:postLocationLabel/>

<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>

</b:if>

</b:if>

</span>

Be sure to add this outside any other tags! If you did find the <div class='post-footer'> tag (or similar) in your template, the safest place is to add the code immediately after this line.



Then preview your template. If all is well, you should now see Geotag links appear beneath any posts you have Geotagged with a location (though none will appear on posts which have not been tagged).If you have made any errors when adding the code above, you'll receive a message that your template cannot be parsed. In this case, simply "Clear edits" and attempt to paste the code again.

Is Geotagging a useful feature for Blogger?

I personally feel that Blogger's integration of this new feature will prove very useful for a large proportion of the Blogger community. So far the comments I have read on the introductory post for this new feature have been very positive, and it seems many creative coders have already expanded their ideas for how Geotagging can be intrgrated for widgets and other useful features.



However, this may not be a feature which is beneficial for us all. Here on Blogger Buster, for example, the location where these posts are typed does not complement the content and has no added benefit for readers (I like to think the content posted here has international appeal!).



What are your opinions of Blogger's new Geotagging feature? Will you be using this feature to complement your own blog posts?



Please feel free to let us know your own opinions and comments by leaving your message below.

ThemeForest's $25,000 Giveaway - Your chance to get a premium Blogger theme for FREE!

As many of you will be aware, I also design premium Blogger templates which are sold through ThemeForest.net: a relatively new site which offers premium quality site and CMS templates. To help promote and raise awareness for the site, Envato are offering a $10 credit to the first 2500 commenters - a total of $25,000!



This $10 credit could buy you one of the premium Blogger themes available on the site, or any other of the quality site templates, Photoshop source files or CMS templates available.



To qualify for your free $10 credit, simply visit this post over at PSDTuts (also part of the Envato network) and follow the steps. You will need to be a registered member of ThemeForest to qualify for your credit, though it costs nothing to join (ie: you don't need to credit your account in order to become a member).



If you've been considering trying out a Premium Blogger theme or are just interested in what ThemeForest have to offer, why not spend a few moments to comment and qualify for this great offer? Be quick though: only the first 2500 commenters will receive their credit :)

A Simple Snow Effect Widget for Blogger Blogs!

Here is a simple snow effect widget which you can add to your Blogger powered blog in just one click! This widget does not use images to generate the snow effect: instead it uses plain white text (full stops and apostrophes) to act as snowflakes which trickle down the page. You can see this widget in effect here on Blogger Buster over the holiday period.



Click the button below to add this widget to your Blogger powered blog:

This widget was created using the Snow Effect Without Images script by Kurt Grigg which is distributed by Dynamic Drive.



This widget has been tested in both IE and Firefox and also in complex Blogger templates which use many other JavaScripts. Unlike other snow effect scripts, this simple non-image based widget works just fine!



I hope you enjoy using this festive decorative widget in your Blogger blogs! Please let me know your opinions or if you experience any trouble installing this widget by leaving your comments below.

Christmas is coming...

... So over the next few weeks I'll be posting some festive Blogger tutorials (and possibly a festive themed template or two!).



In the meantime, why not check out my latest post over at Blogging Tips: The Festive Toolbox, which offers a great range of resources to help you decorate your blog for the holiday season?



If there are any particular festive customizations you would like to learn about, please let me know by leaving your comments below.

Free Blogger Template: Halo 01 (Minimalist, grid based design)

Here is another free Blogger template for you to download: Halo 01.



This template uses a minimalist, grid-based layout and a unique presentation of post meta-data (labels, posting date, etc) which appear in a column to the left of each post. You can preview a larger version of this template by clicking on the image or viewing the demonstration blog.



More features of this template include:

• Navigation links beneath the header


• Icon to the right of the header (which can be replaced with your own photo or avatar if preferred)


• Fully widgetized sidebar


• Three column footer section


• Styling (and code) to display your own Flickr photostream


• Fonts and colors can be customized through your Blogger dashboard

View Demo | Download Full Template (Zip file)

How to upload the Halo 01 Template to your blog

Download the Halo 01 template and save this to a location on your computer. This template is contained in a Zip folder which you will need to extract using Winzip or your favorite extraction program (if you use WIndows XP, you should be able to decompress the file automatically).



Ensure you have saved the Halo_01.xml file to a location on your computer which you can remember easily. Then log into your Blogger dashboard and go to Layout>Edit HTML.



Near the top of the screen, you will see the "Backup and restore" section where you can upload a new template to your blog:

Click on the "Browse" button to locate the Halo_01.xml file on your computer, then press "Upload" to replace your old template with this new template.



If you have many widgets in your existing layout, you may be prompted to delete these before the changes can be saved. Be sure to make a back-up of any important widgets before saving these changes! Alternatively, take a look at my tutorial for how to retain widgets when changing Blogger templates.



Once you have uploaded your new template (and confirmed deletion of widgets if necessary), your new template is ready to be configured.

How to change the navigation links

The navigation links beneath the header section have been coded into the template. To edit or add your own links, you will need to edit this section of the template code:

<div class='nav'>

    <ul class='nav fix'>



        <li><a expr:href='data:blog.homepageUrl' title='Return to the the frontpage'>Home</a></li>

        <li><a href='#' title='Read about this blog'>About</a></li>

        <li><a href='#' title='Link title'>Link</a></li>

        <li><a href='#' title='Link title'>Link</a></li>

        <li><a href='#' title='Link title'>Link</a></li>



        <li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Subscribe to the main feed via RSS'>RSS</a></li>

        <li class='skip'><a href='#main' title='Skip to content'>Main</a></li>

    </ul>

</div>

The code highlighted in red demonstrates the actual links you should change: replace these with the URL which you want the navigation buttons to point to.



The code in blue is the link text. You should replace these snippets with the text you would like to be displayed on the navigation buttons.

How to configure your Flickr Photostream

The CSS code required to style the Flickr Photostream is already present in the Halo 01 Blogger template. To add the code required to display a Flickr Photostream, go to Layout>Page Elements in your Blogger dashboard and click the "Edit" link for the Flickr Photostream widget.



Then copy and paste the following code into the content section for this widget:

<script src='http://www.flickr.com/badge_code_v2.gne?count=9&display=random&size=s&layout=x&source=user&user=8131003%40N03' type='text/javascript'/>

Replace the user ID number (highlighted in bold red) with your own unique Flickr ID. If you do not know what your Flickr ID is, you can find this easily using idGettr; simply enter your Flickr username and this simple utility will find your Flickr ID for you!



Finally, save your changes to this widget. Now when you view your blog in your browser, your own Flickr images will appear as thumbnails in this widget.

How to change the icon in the header

The generic icon in the top right of the header section can be replaced with your own avatar if you prefer.



Firstly, design your avatar and ensure this is 60px wide and 50px tall. Upload this new avatar to your favorite image host (I prefer Picasa Web Albums, though you could use Photobucket or any hosting service you prefer). Be sure to copy the URL of your avatar to your clipboard.



Next go to Layout>Edit HTML in your Blogger dashboard, and check the "Expand widget templates" box. Then search for the following line of code:

<p id='authorIntro'><img alt='Icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNpWuVVFjbrGkL8f7gqOIL66NV067u-zCrUT4ChtquaT1uxQOfYUQEZy_rFh3__L_5mxUANA2rjp3sQVXkJV9_1uahheqLQrsQnJjNAcbNF9IV4npG325zzjE5DRdgwe1pJExDFqGE4hZB/s144/avatar.gif'/><span><data:description/></span></p>

Replace the code highlighted in red with the URL of your new avatar, being sure not to disturb the surrounding single quotes ('). Preview your template to ensure no mistakes have been made when pasting your URL, and if all is well, proceed to save your template.

Licensing and copyright information

All images and content used in this template were created by myself, including the mini-icons used for the post meta-data.



This template is distributed under the Creative Commons Non-Commercial Attribution 3.0 license. This means you can use the template in any of your projects and make any modifications you choose, so long as you do not sell this template and provide attribution to the original author in some way.

Your thoughts?

I hope you enjoy using the Halo 01 template for your blogging projects! Please feel free to offer your comments and opinions using the form below.

How to make columns of equal height in Blogger

An issue of blog design is that CSS based layouts cannot produce columns of equal heights. For example, when designing a two or three column template, it is almost impossible to make the sidebar(s) stretch to the length of the main posts column. This is particularly noticeable when a background color (or image) is used for the sidebar which does not stretch to the length of the page.

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!):

&lt;!-- Equal Columns JavaScript Start --&gt;





&lt;script type='text/javascript'&gt;

/*

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 &#39;column&#39; to your pages&#39; main columns.

*/

function matchColumns(classname){





     var divs,contDivs,maxHeight,divHeight,d;

   

     // get all &lt;div&gt; elements in the document





     divs=document.getElementsByTagName(&#39;div&#39;);





     contDivs=[];





     // initialize maximum height value





     maxHeight=0;





     // iterate over all &lt;div&gt; elements in the document





     for(var i=0;i&lt;divs.length;i++){





          // make collection with &lt;div&gt; elements with class attribute &#39;container&#39;





          if(new RegExp(&quot;\\b&quot; + classname + &quot;\\b&quot;).test(divs[i].className)){





                d=divs[i];





                contDivs[contDivs.length]=d;





                // determine height for &lt;div&gt; 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 &lt;div&gt; elements





     for(var i=0;i&lt;contDivs.length;i++){





          contDivs[i].style.height=maxHeight + &quot;px&quot;;





     }





}





// Runs the script when page loads





window.onload=function(){





     if(document.getElementsByTagName){





          matchColumns(&#39;crosscol&#39;); // class=column       

          matchColumns(&#39;column&#39;); // class=maincolumn   





     }





}

&lt;/script&gt;





&lt;!-- Equal Columns JavaScript End --&gt;

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.