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.




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!




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:





 

 




   



   

   



     

       



     


     

     





 


In your own template, this code may not contain the and 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:





 

 




   



   

 



   

     

     

       

     

     

       

     


     

       

       

       

     


     


     


     


   




 


   

 


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:



    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:






























































  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 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.




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:





 

 




   



   

   



     

       



     


     

     





 


In your own template, this code may not contain the and 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:





 

 




   



   

 



   

     

     

       

     

     

       

     


     

       

       

       

     


     


     


     


   




 


   

 


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:



    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:






























































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




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.




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!






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.






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)



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:







 

   



 


 




   

       

       

       

       

Blogumulus by Roy Tanck and Amanda Fazani



   






 




 





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:

250" height="200" allowscriptaccess="always" >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:



ffffff" />


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:

000000&mode=tags&distr=true&tspeed=100&tagcloud=
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.





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






Alternative installation for Blogumus (fixes the blank widget problem)



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:







 

   



 


 




   

       

       

       

       

Blogumulus by Roy Tanck and Amanda Fazani



   






 




 





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:

250" height="200" allowscriptaccess="always" >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:



ffffff" />


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:

000000&mode=tags&distr=true&tspeed=100&tagcloud=
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.





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.