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.