Yesterday a few readers emailed me to explain that there were issues with Blogger's embedded comment form.
The issue was that the "Comment as" drop down menu was empty, preventing readers from choosing an identity for their comments which in turn prevented comments from being left.
As yet, the Blogger team have not acknowledged this issue on the Known Issues (or any other blog), and as far as we can tell, the problem should now be resolved. It could have been a browser-related issue, or perhaps Blogger was making some improvements to the embedded comment form which caused this temporary glitch?
Software Testing Zone wrote about this issue in detail, and has since updated this post to explain that this issue appears to have been resolved. I personally did not experience any problems with the embedded comment form for any of the Blogger blogs I viewed over the past few days, but I am interested to learn more about this issue in case something similar happens in the future.
For anyone still experiencing this problem when reading Blogger powered blogs, try refreshing your browser (press F5 for most browsers, which completely refreshed the page), or clear cookies and temporary internet files to ensure you have a fresh version of the page.
If you were affected by issues with the embedded comment form, please do leave a comment below with some information, such as the browser you were using (Firefox, IE6/7, Safari), whether the blog was using a custom domain or a customized template, etc.
Thank you all for keeping me informed about any Blogger issues you are experiencing! Even though I am not officially affiliated to Blogger, I will do my best to help the Blogger community in any way I can.
November 06, 2008
October 28, 2008
Hell's Kitchen: A Spooky Halloween Themed Blogger Template
In the spirit of Halloween, I have designed another dark and spooky Blogger template for your free download. Hell's Kitchen is a wide two column theme, with a sidebar floated to the left and integrated navigation links in the header.All of the fonts and colors used in this theme are customizable through the Fonts and Colors section of the Blogger dashboard. It's easy to use, and should work "right out of the box" with little customization required.
Take a look at the Hell's Kitchen demonstration blog to see this design in action.
The header and footer sections include a "skulls" background image which is a slightly modified version of the "Bones" tile from DinPattern. I've also included the PSD of the header banner so you can modify this for your own requirements. The font used in this header banner is "Bleeding Cowboys" by Last Soundtrack which you can download for free from DaFont.com.
Preview Hell's Kitchen
Download the "Hell's Kitchen" Blogger Template Package (Zip File)
How to upload this template
Included in the Zip folder, you will find the following files:- hells-kitchen.xml - The actual template file
- hells-kitchen-readme.pdf - A PDF help file to help you upload and configure this template.
- skulls-bg.jpg - The background image for the header and footer sections
- hells-kitchen-logo.gif - The header banner used in the demo
- hells-kitchen-logo.psd - The PSD for the header logo, which you can adapt for your own blog title.
Back-up any important widgets
When you upload a new template to your blog, you may be prompted to delete some of your existing widgets. This is because the new template does not have "placeholders" for all existing widgets within the code.If your existing template includes many important widgets, it is good practice to back-up these widgets before uploading a new template. Peter Chen of Blogger Tips and Tricks recently posted a great article explaining how to back-up your Blogger gadgets.
You may also like to read my tutorial about transferring widgets from one template to another.
Uploading the XML file to your blog
Once you have extracted the files and have backed up any important widgets, log in to your Blogger dashboard and select the blog you wish to upload this template to.
Then go to Layout>Edit HTML. Near the top of the screen, you will see the following section:
Click the "Browse" button, and locate the "hells-kitchen.xml" file where it is saved on your hard drive. Then click the "Upload" button.
You may be prompted to delete some of your existing widgets, so be sure you have backed up these widgets if they are required in your new template design (see above).
Finally, you should see a message which says "Your changes have been saved. View blog". This means that your template has been successfully uploaded, and you can now take a look at your new design.
Configuring your new template
Navigation Links
The Hell's Kitchen template contains a Links List widget in the header which provides navigation links.
To make these links appear, you need to go to Layout>Page Elements in your Blogger dashboard, click the "Edit" link for the Links List widget, and add your links as required.
These links will automatically appear side-by-side to the right of the blog title. As this section is 400px wide, you can add around 4 or 5 links of average sized link text before your links will appear on a new line beneath.
Adding a logo to the header
In the demonstration blog for Hell's Kitchen, I used a custom header image (which you can find i the download folder). This image is 400px wide, and uses the Bleeding Cowboys font from DaFont.com (free for personal use).I have included the PSD source file in the download folder which you can adapt to include your own blog title. Be sure to "Save for web" in GIF format, and use a dark grey color as the background on which transparency is overlaid.
Alternatively, you can create your own logo (if desired), which would need to be no wider than 400px.
Once you have modified or created your logo, go to Layout>Page Elements in your Blogger dashboard and click on the "Edit" link for the Header widget.
Click the "Browse" button to select the logo image from your computer, and ensure you have checked the "Use instead of title and description" selection so this will display instead of the text-based title and description.
Finally, save these changes and enjoy your Halloween themed Blogger layout!
More Halloween Goodies for your Blogger blog
Last year, I released two other free Halloween themed templates for Blogger which you can download below:Smashing Magazine is also offering a selection of high quality Halloween goodies which you can use to decorate your blog and desktop:
I haven;t had much time to research Blogger downloads for Halloween, so if you have designed or know of other downloads, please add these in the comments below and I will update this post with the information.
Final words
Lastly, I want to apologise for having spent so much time away from my blog. For various personal reasons, I needed to take some time off.But I'm back now, and hope to provide you with some great Blogger tutorials, free templates and more to make-up for the time I've spent offline ;)
I hope you enjoy using this template in your Blogger blogs! Please let me know your opinions by leaving your comments below.
October 03, 2008
"Premium" Blogger Templates now available from Theme Forest
Theme Forest is the first template marketplace I've encountered which offers premium Blogger templates for download, alongside web templates and themes for other CMS's.At the time of writing, there are 7 premium Blogger XML templates available for download, though I suspect many more will become available in the coming weeks as more designers create themes for our favorite blogging platform.
These themes are very reasonably priced (between $10 and $12 at the moment) and as they are offered as premium downloads, they have been designed exclusively by the theme author.
My offerings on Theme Forest
For some time, I have considered designing premium Blogger templates, but had been anxious about the amount of time and work involved in creating a site through which to sell these. So when I discovered Theme Forest, I decided this would be a much better entrance for me into the realm of premium template sales.At present, you can find two of my own Blogger template designs available in the marketplace: Lotus and Underland:
Both of these themes are three column designs and, as you should expect of a premium theme, these offer many non-standard features. The download files include all template images used in the theme and a comprehensive PDF which includes instructions for upload and set-up.
Here you can browse the full selection of Blogger themes on Theme Forest.
I also have two more premium themes in progress which should be complete and ready for sale in the next couple of weeks.
Will I still be creating FREE Blogger templates?
Of course! Blogger Buster is my pride and joy: I love writing about Blogger and creating templates for others to use, and I assure you that I'll continue to create free templates too.As I'm sure many of you will understand, I do still need to put food on the table. Anything I earn from designing for Theme Forest will be extra income which enables me to spend more time researching and blogging than working on freelance projects.
Downloading themes from Theme Forest
Theme Forest is one of three marketplaces housed on the Envato blog network (the others being FlashDen and Audio Jungle).To purchase a theme or other offering from these marketplaces, you need to register your free account and make a deposit (min $20) which can be spent on any of the marketplaces, and on any theme.You can make a purchase by choosing the "purchase" link on any theme page, and as far as I can tell, these downloads are available for you to access at any time, ensuring you can download any updates or changes to your themes which have been made by the theme author.
Become a Theme Forest author!
Those of you who design Blogger templates may be interested in how easy it is to become a theme author, so I'll fill you in on the details.To become an author, you first need to register your account, then read through a comprehensive tutorial which explains the process and responsibilities of becoming an author.
Before you can upload files, you need to complete a questionnaire to ensure you understand the terms and conditions, and how to organize/upload your themes and files. After this, you will be able to upload your templates and themes for review by a member of staff.
How themes are priced
Once you have uploaded themes for review, your work will be assessed for quality and assigned a price (we cannot choose the prices for our own work at present).Wordpress themes seem to attract the highest prices, while Blogger and general Site templates are priced bwtween $10 and $15.
Earnings and referrals
When you first become an author, you will earn 25% of all sales. Once you have sold more than $500 worth of themes, you will be offered the opportinity to become an "exclusive author": this means that you can choose to sell your themes exclusively through the Theme Forest marketplace, and your commission will increase to 35% (and possibly up to 50% in the future).To many, this may see, a very low commission for theme authors (I must admit I'm a little disappointed to earn only $2.50 each time one of my own themes is downloaded). However, I should point out that Theme Forest take on the responsibility of advertising, hosting, distribution of files and so on. This means that authors have no other work than designing and uploading their themes, as all other requirements are taken care of by Theme Forest staff.
Referrals generate 50% in commission. This means that if you refer a new user who deposits $20 across the Envato marketplace network, you will earn $10. This offers much more incentive for authors to generate referrals for their themes and for users to promote the availability of themes from their own sites.
What do you think?
I would love to know your opinions about Theme Forest as a purchaser or author, and any feedback you may have about the premium Blogger themes I have created, so please feel free to leave your comments and opinions below.October 02, 2008
Add a "breadcrumb" trail and status messages to your blog
An important (and often overlooked) aspect of good blog design is navigation. In order to encourage visitors to read more of your posts, stay longer and make repeated visits, you need to make it easy for readers to navigate and find the information they need!
Adding a list of related posts, links to recent articles and easily accessible categories are among the most effective techniques. Another method which I have noticed in many popular blogs is the "breadcrumb trail": a message above posts which explains how the page being read fits into the heirachy of the blog, with liks to the containing categories.
Hoctro wrote a very useful tutorial which explains how to add a "breadcrumb trail" on item pages in Blogger. However, I preffered to use a method which would display a message on all pages of the blog, including Archives and Search/Label pages. So in this tutorial, I'll explain how to add a status message for each page of your blog, with links to the containing pages for easy reference and increased page views.
On the home page:
On item pages:
On archive pages:
On search/label pages:
As you may notice, the default "status message"which appears on your search/label pages is replaced by this new breadcrumb trail, ensuring that this area blends completely with your blog design.
I have tried to ensure the code used in this tutorial will allow the "breadcrumb trail" to blend with other elements of your template, though you can also customize the code and styling to control the design even more.
Just before this tag, add the following lines of code:
If your template does not include the variable $bordercolor, replace this phrase with the hex value of a chosen color instead (eg: #000000 for black).
Now preview your template. In the preview, you should see the "Welcome to [your blog name]" message which tells you this customization has worked. If nescessary, you may want to add more margins/padding/a background color to the style statements for #places.
Once you have finished, you are ready to save your template. You can then take a look at various pages in your blog to see how this breadcrumb trail operates.
Adding a list of related posts, links to recent articles and easily accessible categories are among the most effective techniques. Another method which I have noticed in many popular blogs is the "breadcrumb trail": a message above posts which explains how the page being read fits into the heirachy of the blog, with liks to the containing categories.
Hoctro wrote a very useful tutorial which explains how to add a "breadcrumb trail" on item pages in Blogger. However, I preffered to use a method which would display a message on all pages of the blog, including Archives and Search/Label pages. So in this tutorial, I'll explain how to add a status message for each page of your blog, with links to the containing pages for easy reference and increased page views.
How the status messages will appear in your blog
Here are some screenshots of how this customization would appear in your blog design:On the home page:
On item pages:
On archive pages:
On search/label pages:
As you may notice, the default "status message"which appears on your search/label pages is replaced by this new breadcrumb trail, ensuring that this area blends completely with your blog design.
I have tried to ensure the code used in this tutorial will allow the "breadcrumb trail" to blend with other elements of your template, though you can also customize the code and styling to control the design even more.
How to add the "breadcrumb trail" to your Blogger template
This is a surprisingly easy customization to add to your Blogger template, and can be achieved in only three steps:Step 1
Go to Layout>Edit HTML in your Blogger dashboard and ensure you have checked the "expand widget templates" box.Step 2
Using your browser search function, locate this exact phrase in your Blogger template code:<b:include data='top' name='status-message'/>Replace this entire line with the following block of code:<div id='places'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div class='breadcrumbs'>
Welcome to <data:blog.title/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
» <span class='post-title entry-title'><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>
</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>
</div><!-- end places -->Step 3
Find the closing </b:skin> tag in your template (again using your browser search function if it is helpful).Just before this tag, add the following lines of code:
#places {
border: 1px solid $bordercolor;
padding: 5px 15px;
margin: 10px 0;
line-height: 1.4em;
}If your template does not include the variable $bordercolor, replace this phrase with the hex value of a chosen color instead (eg: #000000 for black).
Now preview your template. In the preview, you should see the "Welcome to [your blog name]" message which tells you this customization has worked. If nescessary, you may want to add more margins/padding/a background color to the style statements for #places.
Once you have finished, you are ready to save your template. You can then take a look at various pages in your blog to see how this breadcrumb trail operates.
Your opinions?
I hope this tutorial may be a useful method for enhancing navigation and page-views in your own Blogger template. Please let us know what you think of this hack or how you may have adapted this for your own requirements by leaving a comment below.September 30, 2008
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.
September 28, 2008
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!
In particular, watch out for an announcement on Tuesday (which incidentally is also my birthday).
See you soon everyone!
September 26, 2008
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.
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.
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 <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:
When you have located this section of code (or similar), replace it with the following instead:
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.
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:
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:
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.
Here is how to use a Feed widget to display post summaries for a sideblog in Blogger:
Here is an example of how your new sideblog could appear:
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.
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:
Those of you who actively design or develop Blogger templates may already see the possibilities of using this function for possibilities like:
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.
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/-/LabelNameWhere "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/-/SideblogUsing 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:
- Go to Layout>edit HTML in your blog dashboard. Do not check the "Expand widget templates" box.
- 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.
- 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 != ""'>
<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 != ""'>
<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> - 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.
- 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.
- 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.
- 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.
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)
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).
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.
September 25, 2008
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!
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
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!
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!
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!
Subscribe to:
Posts (Atom)
Get Updates!
Subscribe to Blogger Buster by email for updates to your inbox:
Be informed of new posts by subscribing to the RSS feed in your feed reader or by email .
Kickstart a Year of Classic Literature
Google+ Updates
Followers
Blogger Template Collections
Popular Posts
-
I've created a widget which displays a different image greeting depending on the time of day: morning, day, evening or night. You can se...
-
With the increased trend towards photoblogging, many bloggers seek one column templates which enhance the appearance of their photographs. ...
-
Blogger template design has evolved so much since I posted the showcase of 101 Excellent Blogger Templates and the follow-up of 125 more...
-
After curating DailyGraphics.info for quite some time, I was disappointed at being unable to find an infographic celebrating my favourite b...
-
Unfortunately, Blogger chose not to include trackbacks in their new interface which can make it difficult for bloggers who want to cross ref...
-
As a dedicated Blogger enthusiast, I'm very interested to learn more about the sites hosted on Google's free blogging platform. ...
-
Trackbacks are a way of telling another blogger that you have found their post useful, and have made a post of your own which continues the...
-
Privacy Policy for Blogger Buster (http://www.bloggerbuster.com) If you require any more information or have any questions about our priva...
-
Having spent a little time away from blogging, I recently discovered that properly setting up custom domains with Blogger has changed a ...
-
Since we can completely customize the appearance of our blogs and use custom domains, it is not always easy to tell if a website is powere...














