Introducing "We Love Blogger"!

As today is my birthday, it seems the most appropriate time to introduce you all to my latest blogging venture.

We Love Blogger is a gallery and news portal for Blogger fanatics! Here you will find great Blogger designs to inspire you; links to the latest Blogger news and useful tutorials to help you build a better blog.

The home page should provide easy access to the areas of most interest, with the gallery on the left, news/tips in the center, and a regular sidebar on the right.

In the header, you will find links to submit a new design or news article for later submission to the site.

We Love Blogger is an idea I have had for some time. As you may have read in my previous showcase articles, I love to be inspired by great designs (especially those which prove the potential of Blogger as a blogging platform).

Learning from the experience of other bloggers is important and highly useful when discovering new and interesting functions for this platform. On Blogger Buster, I think tutorials and lengthy articles have become an expectation. Rather than add many short posts and links on this site, I feel it's more useful for readers (and better coverage for Blogger authors) to feature their articles on a dedicated site.

At present, the design (and some functions) of We Love Blogger is not quite complete. Once I am home from vacation, I'll be sure to enhance the overall look and some usability issues for the site to make it a better place to visit and find articles of interest.

In the meantime, please visit We Love Blogger, let me know what you think and also any suggestions for how the site can be improved. I hope you enjoy We Love Blogger and will find this a useful addition to the Blogger Buster family of sites.

Off for a week!

For the next week, I'll be basking in the sun with my family as we're going on a long overdue holiday. This means I'll be unavailable to answer any emails or comments until Monday 6th October, though I have scheduled some posts to be published in my absence ;)

In particular, watch out for an announcement on Tuesday (which incidentally is also my birthday).

See you soon everyone!

How To Filter Posts by Label on the Home Page (Create a Side-Blog)

Some of my favorite (non-Blogger) blogs display a "sideblog" in their layout in which to display news snippets and links to interesting sites. These sideblog entries (often called "asides" or "link blogs") are much shorter than a regular blog post, and do not appear in the regular posts section.

While it would be simple to create a sideblog using a links list widget, Twitter, or by adding a Del.icio.us RSS feed to the sidebar, such methods would not allow readers to leave comments on our blogs about these entries. To allow commentary for sideblog entries, they need to be regular blog posts in a category whose posts are filtered from the front page.

In this post, I'll explain how you can filter posts of a particular label from being displayed on your blog's homepage then use this label's feed to display your sideblog.

Step 1: Back-up your template!

Before making any changes to your Blogger template, it is always good practice to make a back-up of your existing template. It is especially important for this Blogger hack: we will be filtering which posts display on the homepage, and any errors could result in no posts being displayed at all!

To back up your Blogger template, go to Layout>Edit HTML in your Blogger dashboard, and click the "Download full template" link near the top of the page.

You will then be prompted to save your template as a file to your computer hard drive which you could use to restore your template (if you make a mistake) or revert back if you change your mind about using this hack.

Step 2: Editing the posts loop

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

The code which we need to edit is located within the "Blog Posts" widget.

Finding the correct section of your template to edit can be a little tricky, as there are several elements which at first glance appear to utilize similar code. Here is the section which we need to edit:

  <!-- posts -->
  <div class='blog-posts hfeed'>

    <b:include data='top' name='status-message'/>

    <data:adStart/>
    <b:loop values='data:posts' var='post'>

      <b:if cond='data:post.dateHeader'>
        <h4 class='date-header'><data:post.dateHeader/></h4>
      </b:if>
      <b:include data='post' name='post'/>
      <b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
<b:include data='post' name='comment-form'/>
 <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + "_backlinks-container"'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>

In your own template, this code may not contain the <data:adStart/> and <data:adEnd/> tags, though this should not affect the overall functionality of this customization.

If you struggle to locate this section of code, use your browser's search function to locate the following phrase: hfeed which should be present no matter which template you are using.

When you have located this section of code (or similar), replace it with the following instead:

  <!-- posts -->
  <div class='blog-posts hfeed'>

    <b:include data='top' name='status-message'/>

    <data:adStart/>
  <b:loop values='data:posts' var='post'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
    <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
      <b:if cond='data:label.isLast == "true"'>
        <b:if cond='data:label.name != "Sideblog"'>
      <b:include data='post' name='post'/>
      <b:if cond='data:blog.pageType == "item"'>
        <b:include data='post' name='comments'/>
      </b:if>
      <b:if cond='data:post.includeAd'>
        <data:adEnd/>
        <data:adCode/>
        <data:adStart/>
      </b:if>
      </b:if>
      </b:if>
      </b:loop>
    </b:if>
</b:if>
  </b:loop>
    <data:adEnd/>
  </div>


Be sure to highlight all of the code and replace with the section above in its' entirety! Otherwise, when you attempt to preview or save this code, you will receive errors saying that tags are not closed properly.

In the code above, you will notice I have highlighted "Sideblog" in bold red. This is the name of the label which we will be filtering from the display of posts on the home page. You can change this to any label name you prefer. This is case sensitive, so be sure to use the same case in the code as the label you will use to tag your posts (ie: "Sideblog" is not the same as "sideblog").

Once you have edited this section of code, attempt to preview your template. If any of your recent posts have already been tagged with the "Sideblog" label, you will now notice they are missing from the output of posts.

Provided there are no errors visible when you preview your template, you can now save your edited template.

Step 3: Adding a feed widget to display your sideblog

Now we have filtered "Sideblog" posts from the list of recent posts on the home page, we need to add a widget to display sideblog posts in the sidebar.

To achieve this, we will use the sideblog label feed.

All Blogger blogs which use labels produce a feed of posts from each label. The URL for label feeds appears like this:

http://yourblog.blogspot.com/feeds/posts/default/-/LabelName

Where "LabelName" is the name of the particular label you wish to use.

This URL structure also works for custom domains. Simply replace "yourblog.blogspot.com" with the main URL for your blog.

In this example, we will use "Sideblog" for the name of the label in the feed, which would look like this:

http://yourblog.blogspot.com/feeds/posts/default/-/Sideblog

Using Feedburner to display sideblog posts

The simplest way to display your sideblog is to burn your label feed through Feedburner, and use the BuzzBoost widget code within an HTML/JavaScript widget.

To do this, go to Feedburner.com and add the URL of your label feed. Then go to Publicize>BuzzBoost in the dashboard for this new feed.

The code required to display your sideblog posts as HTML will be generated for you automatically which you can paste in an HTML/JavaScript widget in the Page Elements section of your blog. Alternatively, you could add this as a widget automatically using the widget installer option.

Using a regular Feed widget to display your sideblog

If you prefer not to use Feedburner, it is possible to display your sideblog using a regular feed widget. However, this will require more editing of your blog's HTML code (as Feed widgets will only display the post titles by default).

Here is how to use a Feed widget to display post summaries for a sideblog in Blogger:

1. Go to Layout>edit HTML in your blog dashboard. Do not check the "Expand widget templates" box.
2. Find the following line of code (or similar) in your template:
   
   

   <b:section class='sidebar' id='sidebar'>

   Depending on your template, the code may not appear using the exact same phrases. If you are at all confused, search for a familiar widget title instead. 
   
   
3. Immediately after this line of code, paste the following in it's entirety:
   
   

   <b:widget id='Feed99' locked='false' title='Blogger Buster' type='Feed'>
   <b:includable id='main'>
   <h2><data:title/></h2>
   <div class='widget-content'>
   <b:loop values='data:feedData.items' var='i'>
   <h3><span class='item-title'>
   <a expr:href='data:i.alternate.href'>
   <data:i.title/>
   </a>
   </span></h3>
   <div><data:i.summary/></div>
   <b:if cond='data:showItemDate'>
   <b:if cond='data:i.str_published != &quot;&quot;'>
   <span class='item-date'>
   <p><data:i.str_published/></p>
   </span>
   </b:if>
   </b:if>
   <b:if cond='data:showItemAuthor'>
   <b:if cond='data:i.author != &quot;&quot;'>
   <span class='item-author'>
   <p><data:i.author/></p>
   </span>
   </b:if>
   </b:if>
   </b:loop>
   <b:include name='quickedit'/>
   </div>
   </b:includable>
   </b:widget>

4. Now preview your template. If you have followed the steps correctly, you will receive no errors when you preview your template and should proceed to save. If you do receive errors, click the "Clear edits" button and begin again, being careful to paste the code after the <b:section> line.
5. Once you have saved, go to Layout>Page Elements in your Blogger dashboard. Click on the edit link for the new feed widget you have added.
6. In the "Feed URL" section, add the URL for your "Sideblog" label feed (see instructions above to locate this URL). In the preview, you will see each item title appear in a bulleted list. This is fine and perfectly normal. Save the feed widget here.
7. Now when you take a look at your blog, you will see your "Sideblog" feed displays post titles and a short summary of each sideblog entry in the sidebar.

Once you have added your widget and configured the feed URL, you should be able to move the location of your sideblog through the "Page Elements" section of your dashboard.

Here is an example of how your new sideblog could appear:

Using your new sideblog

In order to use your newly added sideblog effectively, there are a couple of things which you ought to be aware of. I'll explain all of these "caveats" to ensure you can make use your sideblog to the full potential.

Sideblog entries should only be labeled with the "Sideblog" label!

When writing a sideblog post, be sure you only add the "Sideblog" label (or the name you chose when adding this function to your template). This label will be case sensitive, so "sideblog" and "Sideblog" will appear as two different labels.

If you do add more than one label to your sideblog posts, these posts will also appear in the main posts column, alongside your regular blog posts.

Sideblog images should be sized to fit their container

This one may be a little more tricky.

You can use images in your sideblog posts. However, you should ensure they are no wider than your sidebar (or the widget area they are contained in).

For example, if your image is 400px wide, being displayed in a sideblog whose width is only 200px, you will notice one of two things:

• The right-hand edge will be truncated (in Firefox and other browsers)
  
• The sidebar is pushed beneath the posts column (in IE)

Wherever possible, ensure you use the "small" size option for your image when uploading. Try also to ensure your image is centered above the text, as left or right aligned images may cause layout problems, especially when displayed in the sidebar/other narrow widget area.

Images detract from the length of the summary

When you display an image in your sideblog posts, the HTML code for the image is counted towards the text count of the summary, thus shortening the amount of text which will be displayed. If you prefer to display more text, be sure to place images at the bottom of your posts so these will only be displayed on item pages (not in your sidebar).

Using this filtering function for other template features

In this tutorial, I have explained one possible use for the filtering of posts by label: how to create a sideblog.

Those of you who actively design or develop Blogger templates may already see the possibilities of using this function for possibilities like:

• A "Featured posts" section
• A magazine style layout, where recent posts are organized by category on the home page
• Only one category of post to be displayed on the home page (the rest organized by label and accessible through sidebar links).

From my own experiences, I assure you that all of these uses are possible in Blogger templates (though their respective tutorials would each be as long as this one!). So if you are confident in customizing your Blogger template code, I urge you to experiment with this tutorial to create a layout style appropriate for your needs :)

I hope you have enjoyed reading about filtering posts by label in this tutorial, and now have the knowledge required to add asides in your own Blogger template. Please let me know your thoughts and opinions by leaving a comment below.

Premium Blogger Themes by Amanda

In addition to the free Blogger templates offered here, I also design premium Blogger themes which are distributed through ThemeForest.net.

My premium Blogger themes are high quality, original templates with exclusive designs and increased functionality. They are also very reasonably priced: each theme or theme package costs only $10!

Here are screenshots of my latest premium Blogger themes with links to their download pages on ThemeForest:

Planet Play

This is a playful, colorful theme with a space-cartoon theme.Features of this theme include:

• Image-heavy, highly stylized graphics throughout
• PSD for header background and logo included
• Memorable “Subscribe” area in the sidebar, with integrated email subscription box which requires minimal configuration
• Icons for list items in the sidebar and footer, which are configured to match the widget type (ie: folder for Archives, page for Recent Posts, etc)
• Integrated recent posts widget (to display 10 latest items) and recent comments (which includes details of post author)
• Post information appears below each title, supplemented by appropriate icons
• Very easy to set up and begin using right away!

Read more and Download from Theme Forest 

Elegumus Business Theme Package (Two for one!)

This theme package includes two distinguished and professional themes in one download: the neutral version (pictured right) and a dark version too.

Features of this theme include:

• Integrated menu bar, easily customizable through the Blogger dashboard
• Built in search form 
• Custom header style (with PSD source files) 
• “Featured” section on the home page, ideal for products/featured links/other important content (Includes “equal columns” script to ensure these widgets always display at the same height) 
• Tabbed sidebar navigation, easily configured through the Blogger dashboard (based on Yahoo! TabView) 
• Page numbered navigation on main pages 
• Author comment highlighting, to distinguish between author and reader comments 
• Fully widget ready 
• Easily customized through the Blogger dashboard

Read full details and download from ThemeForest

Underland

Underland is a striking three column template for Blogger, which is highly configurable with many dynamic elements.

Features include:

• Page numbered navigation 
• Integrated related posts function 
• Facilities for Twitter updates, Flickr Photostream, and recent comments 
• Stylized sidebars with hover functions 
• Integrated subscription links in header 
• ... and much more!

If you are looking for a beautifully designed, professional template for your Blogger powered blog, this is certainly a template worth looking at.

Read more and download from ThemeForest

Lotus

This is a unique three column template for Blogger based on a grid style layout.

The main features include:

• Navigation bar above the header 
• Numbered page navigation 
• Sidebars to the left and right of main posts column 
• Post meta data styling 
• Three column footer, with code for integrated Flickr Photostream 
• ...and much more!

Lotus is not a standard Blogger template. It is an original design (not a Wordpress conversion!) with many useful features not available by default in Blogger templates.

Included is a full “Readme” file with instructions, widget codes, images and the template XML file for easy upload to Blogger.

Learn more and download from ThemeForest

More from Theme Forest

ThemeForest is a relatively new site where you can find premium, high quality web templates and themes for most CMS platforms (including Wordpress, Joomla, Expression Engine and, of course, Blogger!), all at affordable prices.

In addition to my own premium themes, you can find quality Blogger templates by other authors too!

There is a thriving community at Theme Forest which enables you to post comments or ask questions on a theme download page before purchase, or participate in the forums. So if you have time to browse through some high quality themes, please visit Theme Forest to take a look at what's on offer - you may even be tempted to become an author yourself!

How to create an "Admin Control Panel" in your layout

For those of us who hide the Blogger nav-bar, it can be awkward to access our Blogger dashboards to create a new post, change settings or customize the layout of our blogs.

So after a bit of brainstorming, I realized how we could add an "Admin control panel" to our Blogger template, which is only visible to the administrators of a blog (and not to regular readers).

You can read my method and instructions in full over at BloggingTips.com, where I write regular posts about Blogger and blog design. I hope this article will be useful for many of you! Please let me know your opinions about this post by leaving a comment here or at Blogging Tips where you can read through the archives of Blogger tutorials and enjoy loads of other tips about blogging.

Site issues and updates

There could be no worse time for things to go wrong than when I am preoccupied with other important projects! Unfortunately, many of you may have experienced some issues using the site this week. So please allow me to explain what's going on, and why I haven't been around as much as I would like.

Issues with the Top Commenters and Popular Posts widgets

The biggest issue so far is that my Top Commenters and Popular Posts widgets have suddenly stopped working.

Both of these widgets are configured using the Yahoo! Pipes service, and due to their popularity and extensive use, the pipes used for these widgets have been putting a strain on the pipes service (causing them to be temporarily disabled).

Unfortunately, this is going to become a regular issue. I don't think it is possible to host pipes on my own servers (to bypass the bandwidth issue) and while these widgets use the same Pipes to output the widget contents to the many bloggers using these widgets, there will continue to be a strain on this service.

The best all-round solution would be for individuals to make a personal copy of the pipe for their own blog and change the pipe URL within the widget to match that of their own Yahoo! pipe. Luckily, I made "back-up" copies of the pipes used for these widgets, so I will get turorials for this method uploaded as soon as possible.

I do sincerely apologize to all affected by this issue! Before I had created these widgets, I had thoroughly checked the documentation for Yahoo! Pipes though was unable to find any information regarding limitations of use or bandwidth. In essence, I had thought it was safe and reliable to use these pipes to deliver content for your widgets. I am glad that the Yahoo! team were able to explain this situation, and hope we can get your widgets working again soon by helping you create pipes specifically for your own Blogger blogs.

Blogumus widget issues

The Blogumus animated tag cloud widget is without a doubt the most popular widget delivered on this site!

For most users, this widget works without a hitch, though some readers reported that the widget is blank and does not display tags at all.

After much trial and error, Roy Tanck helped me create an alternative method of installation for this widget which embeds the widget as a flash object rather than generating it through JavaScript.

This new version works well in most Blogger templates, though unfortunately not for everyone. I really don't understand why this works for some blogs but not for others, and so far have been unable to find a definitive solution to this problem. The only other possible method would be to hand-code the widget for your own blog, which would require you to add each url for your labels individually. However, even this method is not guaranteed to work.

If enough people are interested in this method, I will write up a tutorial to help you install Blogumus by hand-coding each link, so please let me know if you would like to try this by leaving your comments below.

Comment moderation for older posts

For the first time ever, I had to enable comment moderation this week.

Generally I feel confident that Blogger's anti-spam systems will pick up on *most* comment spam before it ever reaches the post. But when spammers disguise their comments, they seem to slip past the radar.

So I have temporarily enabled comment moderation for older posts (as in my experience, recent posts are rarely targeted by spammers). This means that if you leave a comment on an older post, it will be held in moderation until I have had the chance to review it. Of course, when the main spamming culprits have ceased their unwanted comments, I will lift the moderation ban and your comments will appear immedietly after posting.

Why I've not been around much this week

While blogging is my passion, there will often be times when I am unable to be online as much as I'd like. As many of you will already understand, I'm also a full-time mommy so when I take on occasional work, this means I have much less time to spend maintaining Blogger Buster and replying to all my emails.

Now that most of this work is completed, I can concentrate on blogging and also on some other interesting projects which I hope will allow me more financial freedom in the future (in other words, more time to blog!).

I will be offline from 9/28 to 10/5 as we're going to visit family abroad and it's doubtful I'll be able to get online. Thanks to Blogger's scheduled posts feature, I can still provide updates while I'm away :)

Any other issues?

Have you experienced any other problems using Blogger Buster which I may have missed? If so, please let me know about this so I can fix the issue as soon as possible.

I hope you all continue to enjoy reading my posts despite the occasional hiatus! Thank you to all Blogger Buster readers for your support and continued readership!

Problems Previewing Changes to your Blogger Template? Here is a solution

On the Blogger Help forums I've noticed many people are experiencing bX-errors when attempting to preview changes to their template through the "Edit HTML" page.

This only seems to happen when the "expand widget templates" box is checked; it can even occur when no changes have been made to the template at all, or when trying to upload a new template.

I experienced this issue myself last week, and for a while I thought there was some issue with my templates (which are heavily customized). However, this also happened with new, default, un-customized templates. In my experiences of this issue, the error codes changed each time I tried to preview the template.

If you are experiencing this issue for your own blog, there is a simple solution for you: clear the cookies in your browser!


Once you have done this, refresh the page and log in to Blogger again (as clearing the cookies will clear your login information). Then when you attempt to preview your template, you should receive no errors and be able to edit your template code as required.

Note: Any changes to your template will not be saved! If it is important to save these changes, copy your entire template and paste into Notepad (or a different text editor) so you can access this after logging into Blogger again.

How to clear cookies for your browser

Depending on your browser, you may have to try a different method to clear cookies. Here are methods for the major browsers:

For Internet Explorer 7.0

1. Select "Tools" from your browser menu
2. Select "Internet Options".
3. Open the "General" tab.
4. In "Browsing history" area click the "Delete" button.
5. In "Delete browsing history" window click "Delete cookies" button and then click "Yes".
6. Click Close and then click OK.

For Internet Explorer 6

1. Select "Tools" from the browser menu
   
2. Select "Internet Options".
3. Open the "General" tab.
4. Click the "Delete cookies" button.
5. Click OK.
   

For Firefox 3

1.  Select "Tools" from the browser menu
2. Choose "Clear Private Data"
3. Check the "Cookies" box
4. Click the "Clear private data now" button.

For Firefox 2

1. Select "Tools"
2. Select "Options".
3. Select "Privacy".
4. In Private area click "Clear Now".
5. In "Clear Private Data" window put the check mark for "Cookies" and click "Clear Private Data Now".
6. Click OK.

If your browser is not listed here, take a look at this page which explains methods for all other major browsers.


For those of you running Windows, you may like to check out CCleaner. This is a freeware system optimization, privacy and cleaning tool. It removes unused files from your system, and really does make your computer run faster!

I've been using CCleaner for a few years now, and can honestly recommend using this. It usually takes less than a minute to run (unless you have not deleted temporary files for a LONG time!), and has cleared up the problem previewing my template each time it has happened for me.

Unfortunately CCleaner is not available for Mac users, though if anyone can recommend a similar program which may be of use to Mac users, please do let us know by leaving your comments below.

I'm not sure why this is happening; there is no mention on Blogger's Known Issues blog (yet), though I hope this information will be of use for those of you experiencing issues when previewing your template!

Photo by Renaissancechambara.

Alternative installation for Blogumus (fixes the blank widget problem)

Update: The URLs for the tagcloud files have now been updated. See original post for more information.

Blogumus is an animated tag cloud widget for Blogger powered blogs, which has proven to be the most popular widget ever published on this site.

Most bloggers have been able to install this flash-based widget successfully using the default installation instructions. However, for those using long label names or who have many JavaScript/Flash based widgets present in their blog layout, there seems to be a "blank widget" issue where Blogumus is present but will not display the animated tags.

Thanks to some helpful insights from Roy Tanck (the original author of Cumulus on which this widget is based), I've been able to construct an alternative method for installation which embeds Blogumus as a flash object rather than relying on JavaScript.

If you have experienced problems in displaying Blogumus in your Blogger template, this alternative method for installation should enable Blogumus to display correctly for you.

How to install Blogumus using this alternative method

This method of installation is very similar to the original one.

Firstly, go to Layout>Edit HTML in your Blogger dashboard. Do not check the "Expand widget templates" box as this would complicate the process!

Using your browser's search function, find this line in your template code:

<b:section class='sidebar' id='sidebar' preferred='yes'>

Immediately after this line, paste the following section of code:

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>

    &lt;object type="application/x-shockwave-flash" data="http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;
        &lt;param name="movie" value="http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf" /&gt;
        &lt;param name="bgcolor" value="#ffffff" /&gt;
        &lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
      <b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
&lt;/tags&gt;" /&gt;
        &lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;
    &lt;/object&gt;


  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Now preview your template. If the installation is successful, you should see the Blogumus widget appear in your sidebar. You can then proceed to save your template.

This version of Blogumus should display all of your labels without issue, and can be moved to other sections of your layout through the Layout>Page Elements screen.

Customizing this alternative Blogumus installation

As with the original widget, it is possible to customize some aspects of Blogumus to better match the style of your blog.

By default, this installation uses the following values:

• The width is 250px
• The height is 200px
• Background color is white
• Text color is black
• Font size is 12

All of these options can be changed by editing the code used to display this widget. Here is how you could customize these options:

Change height and width

Both of these options can be configured in the following line:

&lt;object type="application/x-shockwave-flash" data="http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;

Change these dimensions (in pixels) to a more appropriate size for your sidebar or widget section. Note: it is better for the tag cloud to be wider than it is tall (landscape proportions) which enables proper display of the tags.

Change background color

To change the background color, alter the hex value found in this line:

&lt;param name="bgcolor" value="#ffffff" /&gt;

By default, this is set to white, but you can alter this to any value you prefer.

Change the color of text

The tag-links are black by default, though you can change this within the following line using the tcolor value:

&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;

This six character tag is actually a hex value without the preceeding # symbol. You can alter this to be any hex color code you prefer.

To alter the size of tags/links

In the following line of code, the size of the tag links is "12" (proportionate to the size of the widget). You can change this value to a smaller or larger number depending on whether you prefer the links to appear smaller or larger in your widget.

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'>

For example, if you prefer smaller links, change this value to "10" (or even smaller). You can always preview the changes before saving to ensure the links appear in the style and size you prefer.

I hope this alternative method works for you!

After much testing and modifications, I feel assured that these new installation instructions for Blogumus should work for any Blogger "layouts" template, regardless of the length of label names, other scripts present in the widget, and so on.

As far as I can tell, no labels should be "missing" from the cloud (an issue reported by many in the previous thread, for which we cannot discover the problem!).

If you do experience issues with this alternative method, please do let me know.

Special thanks to Roy Tanck for his help with the "object embed" solution on which these instructions are based :)

10 Gorgeous New Blogger Template Releases for 9/11/08

This past week I've been on a short hiatus from blogging while working through some important issues offline. Luckily my feed reader helps me stay up to date on the latest Blogger news (albeit a little later than normal) and I was thrilled to see some truly awesome Blogger templates have been released in recent days.

Here are ten of my favorite new Blogger templates which are available for free download:


Google Chrome by Francisco (ZonaChrome)

A clean, blue two column theme based on the new Chrome Browser. Converted from the original Wordpress theme by Smashing Wordpress Themes.

Demo | Download

Grunge Superstar by Blog and Web

I'm quite a fan of the grunge design trend, and this is an excellent example of how this style can be adapted to a Blogger theme. This is a one column template with three sections in the footer for your meta-content. As you can see from the screenshot, the theme is monochrome though this would be perfect for a photoblogger or designer to showcase their work.

Converted from the original Wordpress theme by Arcsin.

Demo | Download

Firebug by ThemeLib

This is a stunning colorful template with two, three or four columns (depending on your customizations of the theme). It features built in feeds for your recent posts and comments, and includes spaces for 125px square ads in the sidebar.

I love the background texture of this theme which is best viewed in the demo blog (the screenshot here does not convey the tru detail of this theme), and with the fully featured functions, this is an excellent Blogger template to use.

Converted from the Wordpress template designed by Blog Oh Blog.

Demo | Download

Cool by Our Blogger Templates

This is a beautiful and feminine narrow two column theme with a fresh color scheme.

Details and download

Outdoor by Btemplates

A simple though well designed two column theme, converted from the Wordpress template by Styleshout.

Demo | Download

ZixPk Blue

Here is a stunning three column design which features spaces for ads, an integrated search function and navigation links below the header.

Demo | Download

Blue Pigment by Btemplates

A bold, colorful two column theme with integrated navigation links and stylized posts.

Demo | Download

Fervens Themes (A, B and C) by Blog and Web

Francisco has successfully converted all three variations of the Fervens Wordpress theme by Design Disease which was created for Smashing Magazine and its' readers.

All three are clean, simple and beautifully designed themes with excellent color highlighting for the sidebar widgets.

Details, demo links and download from Blog and Web

Cake Recipe by ThemeLib

This is a beautiful niche-based Blogger template which could be an ideal choice for a food/recipe blog. Includes three columns in the layout and widgets within the header for recent posys and comments.

Converted from the Wordpress template by Quality Wordpress.

Demo | Download

Special Tribute: Ramadhan Al-Mubarak by Our Blogger Templates

Our Blogger Templates has created a special tribute theme for Ramadhan, which includes two columns in the main layout and three sections in the footer. This is a beautifully designed template and an excellent tribute for this month of fasting.

More details and download

Do you have a theme to share?

If you are a Blogger theme designer or would like to share a theme you have created, please feel free to drop me a line or leave a comment so I may include your theme in the next round-up on Blogger Buster.

Which of these themes do you like the most? Feel free to leave your comments and opinions below.

Using Blogger's New Followers Feature

As many of you may have read on Blogger Buzz, Blogger has introduced a great new feature: "Followers".

This new feature allows you to:

• Show that you are a fan of your favorite Blogger blogs
• Follow a blog publicly or anonymously
  
• See fans of your own blog (and the number of followers you have) from your blog dashboard
• Display a list of your followers in a new "followers" widget
• Read your favorite blogs (even those not hosted on Blogger) from the reading list in your dashboard.
• Import your reading list from Google Reader
• Read posts from the blogs you are following in a special "Blogs I'm Following" folder in Google Reader
  

At present, this feature is not available to all Blogger users, though it is being rolled out for everyone to use over the next few weeks.



For those of you who are (like me) impatient to try out this new feature, you can enable this automatically by following a blog (use this link to follow Blogger Buster, for example). Once you have followed even one blog, your dashboard will be updated to show the number of followers, your personal reading list, and the ability to add a "followers" widget to your layout. Thanks to Ionut of Google Operating System for the tip to enable this new feature :)

Add new subscriptions to your reading list

Once your blog dashboard has been updated for the new "followers/reading list" feature, you can easily add new subscriptions to read in your Blogger dashboard.

Adding a new subscription is easy. Simply click on the "Add" button near the bottom of your reading list, where you will be presented with a screen like this:

You can add a new blog by simply typing the URL (eg: http://www.blogsite.com). This does not need to be a Blogger powered blog, nor do you need to know the URL of the blog's feed.

On the next screen, you can choose to follow this blog publicly or anonymously. Choosing to follow publicly means that your friendship with this blog is made public. Those using Blogger can see a list of their public followers, and readers of these blogs can also access follower details if a Followers widget has been added to the blog. In the future, non-Blogger sites will have access to similar widgets to display their public followers.

Choosing to follow anonymously is similar to subscribing to a blog feed in the normal manner: you would be counted among the list of followers, though your details and affiliation would be hidden.

Alternatively, you can choose to import your subscriptions from Google Reader by checking the "Import from Google Reader" option. On the next page, you can see a list of all the subscriptions in your Google Reader account, then check the ones you would like to import. It can take a few minutes to import all of your subscriptions of you have many listed in your reader, so you may need to be patient!

Managing your subscriptions

If you decide not to follow a blog you can easily edit or remove blogs in your reading list by clicking the "Manage" button.

This will generate a page listing all of your subscriptions with options on the right to delete this from your reading list and to toggle between "Public" and "Anonymous" following. You can also add new subscriptions near the bottom of this page.

Building a social network with Blogger...

In time, the "Followers" feature will also be integrated with FriendConnect which is built on Google's Social Graph API.Rather than being a social network in its own right, FriendConnect will link with other social networks and allow you to integrate your blog completely with your online social activities.

I must admit that my research on this subject is sparse, though you can read more about the possibilities for FriendConnect on Google Operating System, the FriendConnect homepage and the OpenSocial pages.

Learn more about the "Followers" feature

The Blogger Help Section has been updated with information to help you make the most of the new Followers feature. Here are links to the most useful pages which should help you get up and running:

• What is Following? 
• How do I add the Followers gadget to my blog 
• How do I use the Blogger reading list?
• Follow a blog publicly or anonymously
  

What do you think of the "Followers" feature so far?

I'd love to know your thoughts about the new Followers feature, so please feel free to leave your comments and opinions below.

Elegant Post Summaries for Blogger with jQuery

The ability to display extracts of posts is a feature which many of us would love to see added to Blogger! Such a feature would prevent readers having to scroll far down the page to find the next post on home and archive pages, and in many cases, could offer the potential for different styles of layout...

Many Blogger users have adopted Ramani's selective expandable posts hack or a similar alternative. However, I have found these to be a little complicated: they require manual editing of each post or cause other irritating problems. In my search for an elegant and less cumbersome alternative, I have discovered an almost perfect solution: the jQuery Expander Plugin by Karl Swedberg.




Integrating the jQuery Expander plugin for Blogger offers many useful options and features:

• It can be added easily in only two steps!
• The length (and other options) of excerpts is completely customizable within the blog template (no need to edit JavaScript files!)
  
• We could choose to expand posts into the same page (with a smooth transition) or add a "read full post" link to the item page instead.
• HTML tags and complete words are preserved (unlike many forms of Wordpress excerpts)
• There is no requirement for additional tags or editing of posts: it works right away after installation!
• It's possible to use different lengths of extracts for use in magazine style layouts (I'm actually working on such a project right now...)

To see how well the jQuery expander plugin could work in Blogger, take a look at this demonstration in which the posts expand into the same page.

Installation

Depending on the style of post summaries you would prefer to display, the method for installation will be slightly different.

I'll begin with a default explanation which will summarize posts with a link to expand in the same page (this requires only two steps). Next we can make two small changes which prevent expansion and add a link to the post page.

Finally I'll explain how you can alter some options for extracts which can be applied to both methods.

For whichever function you prefer, the installation is simple and the result will be elegant post summaries for your Blogger powered blog :)

Method 1: Expandable post summaries

This is the simplest method to add excerpt functionality to your blogger powered blog!

Firstly, go to Layout>Edit HTML in your Blogger dashboard and check the "expand widget templates" box.

Then, find the closing </head> tag in your blog template, and paste the following section of code immediately before it:

<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery-1.2.3.pack.js' type='text/javascript'/>
<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.expander.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

$('.excerpt').expander({
slicePoint: 280, // default is 100
expandText: '[...]', // default is 'read more...'
});

});
</script>

Next, find this section of code (or similar) in your template:

    <div class='post-body entry-content'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

If you cannot easily find this section, search for the following tag using your browser's search function:

<data:post.body/>

You need to highlight this and any surrounding code, as in this screenshot:

Replace this section of code with the following instead:

  <b:if cond='data:blog.pageType != "item"'>
    <div class='excerpt post-body entry-content'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
  <b:else/>
    <div class='post-body entry-content'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
</b:if>

Now preview your template. You should now notice that posts on your home page have been summarized and feature an ellipsis at the point of truncation which (once viewed in the live page) is a link to expand/truncate the post:

If you're happy with this, you can save your template and enjoy using your new post summaries right away. Alternatively, read on for methods of preventing the expansion in the same page, and customizing the excerpts to suit your preferences.

Method 2: Excerpts with a link to the post page

My personal preference is to display only an excerpt of posts with a link to the full article. This requires only two small changes to the default installation:

• Use a slightly different jQuery plugin (change the URL)
• Add a "Continue reading" link beneath the excerpts

Assuming you have already added the codes from Method 1, here is what you should do:

1. Find this line in the <head> section of your template:

<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.expander.js' type='text/javascript'/>

And replace it with this instead:

  <script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.extractor.js' type='text/javascript'/>

I have highlighted the different file name in bold red so you can see the change at a glance.

2. Next, find the code you have added around the <data:post.body/> section, and add the line in bold red, as shown below:

  <b:if cond='data:blog.pageType != "item"'>
    <div class='excerpt post-body entry-content'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
    <a expr:href="data:post.url">Continue Reading</a>
  <b:else/>
    <div class='post-body entry-content'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
</b:if>

Be careful to add this in the correct place, just above the <b:else/> tag, otherwise it will not be displayed!

Now preview your template. The "linked" ellipsis should now be replaced with a plain one, and you should see the "Continue reading" link appear beneath the extract. You could change the link text to anything you prefer (eg: "Read more", "Full Post", etc). Then proceed to save your template.

Post Summary Options

The jQuery plugins used for these methods are almost identical, except that the "extracts" version has the "more" link removed.

Both plugins therefore have identical options which you can set by adding or changing code in your blog template.

The options can be configured within the internal javascript in the head section which by default appears like this:

<script type='text/javascript'>
$(document).ready(function() {

$('.excerpt').expander({
slicePoint: 280, // default is 100
expandText: '[...]', // default is 'read more...'
});

});
</script>

Here are some of the most used options available, and how they can be changed. A full list of options can be found on the expander plugin for jQuery page.

<script type='text/javascript'>
$(document).ready(function() {

  $('.excerpt').expander({
    slicePoint:       280,  // change this to the length in characters you would like to display.
                            // HTML tags included in this count.
    // the folllowing functions apply when choosing the expanding post version
    expandEffect:     'fadeIn', // the effect used for displaying expanded text.
    expandText:         '[...]', // Change this from an ellipsis to "Read More" for example
    userCollapseText: '[^]'  // This is the icon used for truncating the post after it has been expanded.
  });
 
});
</script>

You can add or change any of the lines above as appropriate for your needs.

License, Credits and Download

This function uses the jQuery JavaScript library and the jQuery expander plugin for the base functions.

The Expander Plugin for jQuery was created by Karl Swedberg and is dual licensed under the MIT and GPL licenses.

If you would prefer to host the jQuery scripts on your own server, you can download a zipped folder including all scripts from this tutorial and a basic Minima template in which this function has been added for demonstration or testing purposes. As in the case of the original Expander Plugin and jQuery file, these are provided under the GPL licence.

Download Elegant Blogger Post Summaries Files

I hope you have found this tutorial to be a useful and elegant solution for creating and using post summaries for your Blogger template. Please feel free to leave your comments and any suggestions for improvement below.

11 Useful SpeedLinks for Blogger Users

Here are some of the best tutorials and sites for Blogger users which have caught my attention this week:

1. Customized Feedburner Subscription Box After reading a thread on the Blogger Buster forums about customizing Feedburner's email subscription box, Doug Cloud has written an excellent tutorial to explain how he created a version to match his template design using Photoshop and CSS styling. If you haven't already visited Doug's blog, I really do suggest you pop over to see a beautiful Blogger powered design...

2. Add Yahoo! Buzz Buttons to your Blogger template Over at Woork, you can read how to add Yahoo! Buzz links to your Blogger template to benefit from this new social bookmarking system. While you're there, check out the amazing new design!


3. Utilize Blogger to reduce email overload

As part of an article explaining methods of reducing email overload, Digital Inspiration suggests using Blogger! I won't explain the details here as the post itself is an excellent read :)

4. iBlogSpot with Lifecast (iPhone App Review)

Over at The Blog Herald, you can read a review of Lifecast: an iPhone application for those using Blogger.

5. Weebly (An alternative to Google Pages)

As many of you may be aware, Google Pages will be phased out by the end of the year. So if you're looking for a free alternative host for your scripts and template files, Weebly is an excellent option. (Thanks to Fernandoo1 for the tip!)

6. Wowzio Widgets

Alisha of the Wowzio team let me know about this new service which automatically produces useful widgets for your blog based on the content from your blog feed. It certainly seems easy to use, and you can preview your widgets right away.

7. Show the current date in your blog

Over at ThemeLib, you can find a useful tutorial to display the current date in your blog with only minor tweaks to your template.

8. Show off your followers (new feature for Blogger)

I'm dying to try out this latest new feature for Blogger, but my dashboard hasn't been updated yet! If you'd like to know more, head over to Blogger Buzz to read this introductory post.

10. Ratings Widget for Blogger (With Popular Posts Widget for your Sidebar)

Although Blogger has recently introduced "star ratings" for our posts, this still lacks a fundamental function which I'm sure we'd all love to use: a popular posts widget for to showcase the most popular posts as determined by our readers.

Yellow Turnip has developed a ratings widget which you can add to your template with ease. There's no need to register, AND you can use a popular posts widget too!

11. Blogger Showcase

This Blogger powered site showcases the best of Blogger designs and is well worth a visit just to see how well it's been designed! You can vote for your favorites and submit your own designs for consideration: