Blogger Buster

How to add Quick Edit Pencil to Blogger Posts

2008-07-16T16:00:00.000+01:00

The "Quick Edit" pencil icon provides a link to edit our blog posts while viewing blog pages in our browser.

This function is always present in Blogger's default templates. However, if you have customized your template or are using a non-standard template, you may notice this function is missing from your blog pages.

In this quick tutorial, I'll explain how you can check if the "Quick Edit" function is present in your blog template, and how this can be restored if you find it's missing.

Check the quick edit settings

The first thing we should do is check that the quick editing is activated in your blog's settings. To check this, go to Settings>Basic in your Blogger dashboard and scroll down to the section which says "Show quick editing on your blog".

You should ensure this option is set to "yes" and save this setting.

Then go to Layout>Page Elements in your Blogger dashboard, and click on the "edit" link for the Blog Posts widget.

On this pop-up page, you should ensure you have checked the "Show quick editing" option which enables you to quickly edit your blog posts.

Check if the required code is present in the template

Next we need to check if the code required to make these icons appear is still present in your template.

To find out, go to Layout>Edit HTML in your Blogger dashboard. Check the "Expand widget templates" box, then search for this section of code:

<b:includable id='postQuickEdit' var='post'> <b:if cond='data:post.editUrl'> <span expr:class='"item-control " + data:post.adminClass'> <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'> <img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_edit_allbkg.gif'/> </a> </span> </b:if> </b:includable>

The easiest way to locate this section is to use your browser's search function and find the following phrase:

b:includable id='postQuickEdit' var='post'

If this section of code is present in your template, you're already halfway towards adding those quick edit icons again.

If this section of code is not present in your template, you will need to copy the entire b:includable section above, then paste this just before the following line of code in your template:

<b:includable id='comments' var='post'>

Once you are sure that this code is present in your template, you need to add a simple line of code to the posts section where you would like your quick edit icon to appear:

<b:include data='post' name='postQuickEdit'/>

In this template, my quick edit icon is located in the "post-footer" section, like this:

<div class='post-footer-line post-footer-line-1'> <b:include data='post' name='postQuickEdit'/> </div>

If the "post-footer-line" section is not present in your own Blogger template, you may prefer to add the quickedit code just after this line instead:

<data:post.body />

Once you have added this line of code, preview your template. The quickedit icons will not appear in the preview, but if you have made any errors during these changes, the preview will make you aware of this.

Finally, you can proceed to saving your template. Then view your blog in your browser. Your quick edit icons should now appear below each of your blog posts which allows you to easily edit posts when you are logged in to your Blogger account.

Did this work for you?

I hope this tutorial has enabled you to restore missing quick edit pencil icons for your Blogger posts with the minimum of fuss!

Please let me know if this tutorial has been useful for you by leaving your comments and opinions below.

A New Look for Blogger Buster!

2008-07-14T20:10:00.001+01:00

Today I've finally finished work on the new design for Blogger Buster! I hope you all like the new, clean look!

My main motivation for redesigning the site was to ensure articles could be easily read, and also to make the site load much faster. So I have stripped lots of unnecessary content from the template, and use far less scripts and images than before.

So far, I'm happy with the overall look of the design, especially now I can see this with my posts and widgets in place. There are still some areas and adjustments I would like to make over the next week or so, though in the meantime, please let me know what you think!

The Header Section

Deciding what to do about the header section was the most challenging part of the design process!

Thank you to everyone who posted a comment on the post I made about this, and also to everyone who contacted me directly. I was thrilled to see how many of you offered your opinions on this. While I had expected one choice to greatly outweigh the other, it seems Blogger Buster readers are divided in opinion!

For the time being I've decided to keep the current logo and the layout of the header. I am rather fond of the vector style logo, and as many of you pointed out in the comments, it does offer a sense of personality to the site.

In the future, I will probably work on a better site logo which uses less colors while representing the personality of the site. Especially now that I've seen this inspiring showcase of logo designs...

There are still some improvements to be made...

While uploading this template, I discovered a few areas of the template which still require further thought. I'm not satisfied with the sidebar and footer section yet, so you'll probably notice a little rearranging (and possibly replacement) of widgets over the next few days.

The forum is almost ready now, which will also have some impact on this new design. Just a few more tweaks are required to ensure the forum design matches that of the blog...

What do you think of the new look?

I hope that most of you will prefer this new design (I certainly do!). Does it load faster, and ensure posts are easier to read?

Please let me know what you think by leaving your comments below :)

Uploading the new template today...

2008-07-14T13:25:00.003+01:00

Today I will be uploading the new template for Blogger Buster!

For the next few hours, you may notice a few strange things happening on the site as the design changes and I make changes to the widgets and content, so please bear with me through this day!

I'm trying to make this as seamless as possible, but if you do notice anything drastically wrong, please let me know!

Admittedly I'm rather nervous about how drastic some of these changes may be, though I sincerely hope you will find the new design much better to use and read than the magazine style template I've used these past few months.

Once all is complete, I'll update with a new post and explanations of these changes. Wish me luck :)

Which logo do you prefer?

2008-07-12T13:42:00.001+01:00

Although I love the current Blogger Buster design, various factors have convinced me that a redesign is in order.

On Monday, I will unveil a whole new look for Blogger Buster, featuring a clean layout which is easier on the eyes; loads much faster and will help you find articles of interest much more easily!

But I now have a slight dilemma: I don't know which logo I should use! So I'm hoping that you will offer your opinions to help me decide the final appearance of my new blog design.

You'll already be familiar with the current "grunge style" logo which seems to fit so well with the current style:

While I could continue using this logo with the redesigned layout, this does take up a lot of room in the header section.

Instead I wondered if I should revert back to the old logo which takes up much less room:

Which one do you think I should use?

Update: I am awed by the number of responses so far! In fact, this makes it even more difficult for me to choose between the two logos, so last night I did a little experimentation with the two headers to give you a sneak peek of the layout and better idea of the changes this could make to the header section.

If I use the current logo (the grunge style) I will maintain most of the current appearance of the header section:

With the smaller logo, the header would take up much less space, using only the search box from the current design (while the Twitter badge and other elements would move to the sidebar instead):

Admittedly, one of the reasons I was going to reduce the content in the header was because of the Twitter badge. As the code for this was in the header section of my template, whenever Twitter was down, my site refused to load. Thankfully I've now discovered a solution to prevent this from happening, so I can continue to use Twitter in the header section.

I do agree with you all that the tagline should still remain part of the header! The two examples are still "works in progress" as I will make the final changes to the redesign today.

I'm redesigning Blogger Buster for all of you, so your opinions on this matter to me! Please let me know what you think by leaving your comments below.

Blogger: Beyond the Basics (A new book from Packt Publishing)

2008-07-10T22:00:00.000+01:00

Packt publishing emailed me a few days ago to let me know about their new book: Blogger: Beyond the Basics which is available in both print and PDF formats.

I was really happy to hear about this because (as far as I know!) this will be the first publication to cover use of the new Blogger Layouts system; it covers aspects of template customization, social networking and other advanced features of publishing with Blogger.

Blogger Beyond the Basics was written by Lee Jordan, a new media designer, writer and marketer, who also maintains an accompanying blog to the book.

Here's some more information about the book from the Packt Publishing site:

The book aims to be a "complete" guide to working with Blogger. The focus is on more advanced, professional uses. You will learn everything you need to know to extend your blog and grow beyond the basics of using Blogger. This book will cover the following:

    * Customizing and creating templates to make your blog attractive
    * Adding social bookmarks to your blog to promote your site
    * Joining the blogosphere to drive traffic to your site
    * Customizing your blog by using widgets effectively
    * Customizing your blog's RSS and Atom feed, so that the Blogger feeds are available to the users
    * Managing ads and adding e-commerce features
    * Monitoring viewers and ads using Google Analytics
    * Managing and optimizing your blog for search engines
    * Integrating your website with your blog

The standard cover price of Blogger: Beyond the Basics is £24.99, but you can currently save 10% off this price by purchasing directly through Packt Publishing. There's also free shipping to the US. UK, Europe and selected Asian countries.

The Adobe PDF eBook version is listed at £16.99, though you can save 15% by purchasing directly through Packt Publishing website..

Packt have generously offered me a review copy of Blogger Beyond the Basics so I will be posting my own review in the next couple of weeks.

In the meantime, you may want to take a look at the free sample chapter which covers social bookmarking. It's a PDF download which can be downloaded directly from Packt Publishing.

Create Extra Columns in your Blogger Layout - Magazine Style!

2008-07-09T22:00:00.000+01:00

One of the newest (and popular) trends of blog design is the magazine style layout. As the name suggests, this design style presents content in magazine format where extra columns and content are featured on the home page, offering readers an overview of the entire site.

At present, Blogger Buster's home page features a magazine style layout. Rather than display a list of recent posts in typical blog style, the home page summarizes the most recent post, followed by links to other articles by category, and additional information about the site.

Many readers have requested a tutorial to create a similar layout for their own Blogger powered blogs, so in this tutorial I'll explain how you can add extra columns and widget sections on your blog's home page to create a magazine style layout of your own.

How Magazine Style Layouts Work in Blogger

In this template (and also in the Blue Steel template), I have added extra widget sections beneath the main posts column. This allows me to add (or change) the content displayed on the home page from the Page Elements section of my dashboard, without having to manually change my template code.

Also, I have used the b:if function to prevent these widgets from being displayed on post and archive pages (where they are not required).

To create a magazine style for your own blog, you will need to make two main changes to your template:
Insert the code required for your new widget sections
Add relevant styling code to the <b:skin> section of your template to change how these widget sections appear.

In this tutorial, I will explain the simplest method of creating a magazine style front page. This involves adding two columns for widgets (to appear side by side) beneath the main posts section of your blog. Once you have added these sections, you can add widgets and change the settings for your blog to alter the appearance and overall look for your template.

Be sure to back up your existing template before making any changes! Then if you change your mind about your design (or make mistakes during the process) you can easily restore your template.

To make a back-up of your existing template, go to Layout>Edit HTML in your blog's dashboard and click on the "Download full template" link. This will save your template as an XML file to your computer.

Add new widget sections below your posts

To add new columns for widgets below your posts, we will need to add some code to the main posts section of your blog.

Go to Layout>Edit HTML in your blog template, and do not check the "expand widget templates" box. Then search for this section of code in your template:

<div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> </div>

In your own template, this section may look a little different. For example, you may find <div id='main'> or <div id='content'> instead of <div id='main-wrapper'>.

If you are having problems locating this section, use your browser's search function to locate the phrase "blog posts" or "Blog1", and be aware of the surrounding b:section and div tags.

Once you have found this section in your template, you will need to copy and paste the following code just after the closing </b:section> tag and before the closing </div>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='sidebar' id='magazine-left' showaddelement='yes' >
<b:widget id='Text51' locked='false' title='Test Title 1' type='Text'/>
</b:section>

<b:section class='sidebar' id='magazine-right' showaddelement='yes' >
<b:widget id='Text52' locked='false' title='Test Title 2' type='Text'/>
</b:section>

<div style="clear: both;"></div>
</b:if>

By adding this code, we have inserted two extra widget areas which contain a "dummy" text widget so you can preview their appearance. These sections are also contained in <b:if> tags, which determine they are only seen on your blog's home page.

At this stage, you can preview your template and will see these dummy widgets appear below your posts section. However, as we have not yet styled these sections, they will appear beneath each other rather than side by side.

Adding style to your new widget sections

Now that we've added the code required for our new widget sections, we need to add some styling code to ensure they appear side by side.

For this, locate the closing </b:skin> tag in your blog's template. Just before this tag, you should paste the following section of code:

#magazine-left {
width: 45%;
float: left;
}
#magazine-right {
width: 45%;
float: right;
}

Then preview your template. Now you should see your the titles for the dummy widgets appear side by side with a gap between them. These titles should have similar styling to your sidebar headings and match the overall theme of your template.

Once you are sure everything looks okay, you can proceed to save your template.

If you do receive an error when attempting to preview or save these customizations, click the "Clear edits" button and begin adding your code from the beginning, being extra careful when copying and pasting this code.

Adding widgets and styling your home page

Now that you have added the required code for your magazine style front page, you may want to remove the dummy text widgets and replace them with your widgets of choice.

Simply go to Layout>Page elements in your Blogger dashboard, where you will see your new widgets appear below the Blog Posts section like this:

Click on the edit link for the existing "Test Title 1/2" widgets, and choose to remove these if you prefer. Then add new page elements of your choice to customize the appearance of your blog's home page.

You may also prefer to limit how many posts are displayed on your blog's home page so that your new widgets will feature higher up on your blog's home page.

To change the number of posts which are displayed, go to Settings>Formatting and choose the number of posts to display using the first option on this page:

In many magazine style blogs, only one post is displayed on the home page, but if your posts are short, it should be acceptable to post more than one without affecting the overall look and style of your design.

More ideas for your magazine style design

If you want to take your magazine style design a step further, you may also like to check out these tutorials:

I hope this tutorial has helped explain how to add new widget areas for a magazine-style front page with Blogger. Please feel free to leave your comments and opinions below.

VPS Media - My New Hosting Provider

2008-07-09T14:03:00.004+01:00

Blogger Buster is primarily hosted by Blogger, and uses the custom domain feature for my dot com URL. However, all of the background images, scripts, Blogger templates and other downloadable content are hosted externally, since these cannot be hosted by Blogger.

For me, reliability is of chief concern for Blogger Buster: I offer free templates; have more eBooks in progress, and am working on an integrated forum to accompany the site. I wasn't sure that my shared hosting package could handle it, and am certainly not in the position to purchase a dedicated hosting package just yet! So when VPS Media contacted me about their Virtual Private Server packages, I couldn't wait to give it a try!

What is a VPS?

A VPS is the link between shared and dedicated hosting: it is an isolated partition on a server and each partition the appearance and capabilities of running on its own dedicated machine. In effect, it's like having a dedicated server, without the huge price tag!

Until recently, I was content to use a shared hosting solution. Shared hosting means that many hosting accounts are present on the same server (and often share the same IP address too); this is the cheapest form of web hosting (often free), though it does have limitations and issues of reliability.

My new hosting provider, VPS Media, provides blazing fast Xen VPS servers and guarantee 100% network uptime, so I know reliability is not an issue with this company! What's more, I have complete control of my VPS: this means I can run any applications required; install my own mail server, and can use my VPS to host multiple websites too.

What I'm using now

At present, I'm using the VPS starter package, which offers 384 MB of dedicated RAM, 15GB of data storage and 150GB of data transfer which costs $20 per month. There are no set-up fees and no contracts either. While this is slightly more than I previously paid for shared hosting, I'm more than happy to pay this for reliability and the fantastic support I've received surpasses that of any other hosting company I've used.

A VPS offers a much better standard of web hosting than a shared hosting package; however, this comes with a great degree of responsibility and the requirement of technical knowledge.

A VPS package is installed with only the bare minimum required to make it operational: it doesn't already have a web-server, email, PHP or database packages, so in order to be able to use my VPS for web hosting, I needed to learn how to install these myself.

Considering that I had no previous experience of using Unix operating systems, I must say that this was a steep learning curve for me! Thankfully, VPS Media has a VPS article library available so customers can learn how to install various packages and use their VPS effectively. Carlos Taborda also kindly pointed me towards some highly useful articles over at How to Forge where I learned about the best set-up for my Debian operating system and other useful insights.

How my VPS will help improve Blogger Buster

As I mentioned earlier, I found my existing shared hosting package to be unreliable at times. Blogger Buster readers may have noticed slow loading times, missing images from the template, or that templates (and other downloads) are temporarily unavailable (for which my host was unable to offer any explanation!).

Now that I am hosting with VPS Media, I know that my web hosting is completely under my control. The 100% uptime guarantee assures me that my server will always be accessible, and if something goes wrong, I will be able to discover the problem and deal with this myself.

New features are on their way!

With these assurances, I feel confident in making some dramatic changes to Blogger Buster. In the next week (or so) this site will undergo a complete redesign, including the new Blogger Buster forum and the release of a new (and rather large) eBook.

I'm also in the process of transferring all my images, scripts and downloadable content over to my VPS which should result in faster page loading and that downloads will be available at all times. And since I can host multiple websites on my VPS, I'm also considering starting a new blog...

Is VPS Media the hosting company for you?

A VPS is the ideal solution for bloggers, designers and developers who require a powerful and reliable hosting package to serve their pages, content and scripts.

Here at Blogger Buster, I provide a great deal of content for the Blogger community including Blogger templates (and related images); scripts used for widgets; eBooks and more. For me, VPS Media provides an excellent and affordable hosting solution.

Most Blogger users will not require such an advanced hosting package, especially as this is a highly technical solution which requires knowledge of Unix and console access. However, for those of you who are looking for a reliable external hosting package, VPS Media gets a great big thumbs up from me!

If you are interested to try out a virtual private server package from VPS media, Carlos Taborda has generously offered a three month starter package as a prize for Blogger Buster's forthcoming (and very interesting) competition! So be sure to subscribe to learn more about this, and also to see for yourself the transformation that my VPS hosting will offer to this site!

Announcing the winners of the Blogger Wishlist Competition

2008-07-06T19:59:00.000+01:00

After verifying all entries to the Blogger Wishlist Competition, I am happy to announce the winners:

The Ultimate Blogging Package: XavMP

Five Runners Up: Bawa, Tony, La Blogueria, Dette and Thomas Williams.

Thank you to everyone who participated in this community project, including those who suggested features without actually entering the competition. I really appreciate the effort everyone has put into raising awareness of the features which would make Blogger much easier and more pleasant for us to use, and will be posting a full write-up of the project in the next couple of days.

In order to be completely transparent about the selection process for the winners, you can view the complete list of verified entrants in this Excel file, and see how I used Research Randomizer to select the overall winner and runners up in the videos below:

I will be contacting the winners shortly to discuss their prizes. And for those of you who weren't winners this time, watch out for a new and exciting competition which I'll unveil in the next week or so...

How To Add Star Ratings to your Blogger Blog

2008-07-03T22:00:00.002+01:00

Star ratings is a new feature currently available through Blogger in Draft. This enables you to add a widget beneath your posts which readers can use to rate your articles on a scale of 1-5, like this:

If you use a default Blogger template, you should be able to activate this feature right away when logged through Blogger in Draft: simply go to Layout>Page Elements and edit the "Blog Posts" widget to activate the display.

However, those using a customized or third party template will need to add the required code to their templates first. In this tutorial, I'll explain how you can add "star-rating" functionality to your customized Blogger template.

To use the "star ratings" feature, you will first need to activate this through Blogger in Draft (it's still in beta, and not yet available for use in the regular Blogger dashboard).

Log into Blogger in Draft and choose the blog you wish to work with. Then go to Layout>Page Elements, and click the "Edit" link on the "Blog posts" widget.

This screen offers many options for you to add (or remove) from the posts section of your blog. If you scroll down a little, you'll see the "star ratings" option. Tick this option to activate this setting for your blog, then scroll down to save your settings.

If you are using a default template, you should see the star ratings widget appear on the post pages of your blog. However, if you have customized your template (or are using a third party template), it is likely that your template does not include the code required to make the star ratings display.

Here is how you can add the required code for star ratings to your non-standard Blogger template

Go to the Edit HTML page in your blog's dashboard, and ensure you have checked the "expand widget templates" box.
Using your browser's search function, try to find this line of code:

<div class='post-footer-line post-footer-line-1'>
If you cannot locate this, search for the following instead:

<p><data:post.body /></p>
Immediately after this line (either the post-footer or post.body), add the following section of code:

<b:if cond='data:blog.pageType == "item"'>

<span class='star-ratings'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>
</b:if>
</span>

</b:if>
Next, find this line in your Blogger template (this should be a little further down):

<b:include name='nextprev'/>
Just after this line, paste the following section of code:

<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1");
function initialize() {
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>
Then save your template.

Now when you view a post page on your blog, you should see the star ratings appear beneath your posts!

Anurag Bansal has posted a similar tutorial on his blog, Knowliz. If you have any problems with this version, I'd advise you to check out this page instead (thanks for the comment and info, Anurag!).

If you would prefer the star ratings to appear on all pages of your blog, you can remove the lines which include the <b:if> tags. These lines tell Blogger to display the star ratings only on your post pages; removing them enables them to be displayed on all pages of your blog (take a look at this post for more information about the b:if function).

I hope this tutorial will help you understand how to apply the star-ratings function on your Blogger powered blogs! Please let me know what you think about this post by leaving your comments below.

Blogger Wishlist Competition: Only Two Days Left to Enter!

2008-07-02T22:00:00.000+01:00

Since there are only two days left for entries to the Blogger Wishlist Competition, I thought I should post a quick reminder for those who haven't already posted their entries.

This competition is part of a community project to raise awareness of the features we would most like to use in Blogger. As many of you will already know, Blogger surprised us all last week with some very useful improvements to the system, many of which had been popular suggestions posted by the Blogger community.

Let's work together and let the Blogger team know of other improvements we would like to see added in the future! Post summaries, a simple template editor and static pages are just some of the suggestions put forward by Blogger Buster readers.

So why not post your own suggestion? Aside from the benefit of raising awareness, your post will also count as your entry to the Blogger Wishlist competition and you'll be in with the chance of winning the ultimate blogging package!

The competition closes this Friday, the 4th of July at 10pm GMT. There's still plenty of time to post your own entry! Just be sure to follow the guidelines and make your entry official by commenting on the competition post with a link to your official entry article.

Wishing you all the best of luck :)

New Blogger XML Template: BT Dark Green

2008-07-01T22:00:00.001+01:00

BT Dark Green is my first Wordpress conversion. Originally created by Blogging Tips, this is a slick and professional looking widget-ready theme (for Layouts blogs) with mouseover effects for sidebar links and navigation tabs. You can see the BT Dark Green template for Blogger in action here.

This template is very easy to set up and configure to your tastes. Simply download the XML template, upload this as a complete file to your blog, and add links as required in the "Link List" widget (which is built into the template). A "Home" link is already set up to lead back to your blog's home page.

Once installed, most of the fonts and colors can be changed through the Fonts and Colors section of your blog's dashboard, so if the default color scheme is too dark for you, this can be adapted to your personal needs.

The sidebar links and tabbed navigation buttons feature a nice mouseover effect to complement the color scheme of the template, and sidebar headings all have the matching icons to complement the green highlighting.

In the demo, the header includes a custom logo to match the theme. You can download this and change the title to suit your own blog. If you prefer not to use this logo, the header will instead include your blog's name and description (or you could design your own header banner instead).

There is also a built-in blog search function, which uses the default Blogger search function to return entries from your archives.

You may also notice on the Home and Archives pages that a message appears above the posts ("Latest posts" on the home page, and "Archives for [day/month/year]" on archive pages.

How to install this template

First you need to download the BT Dark Green template. This is an XML file contained in a Zip folder (which also includes instructions for use).
Once downloaded, unzip the contents of the folder and save to a location on your hard drive.
Log in to your Blogger dashboard and select the blog where you want to install this template.
Go to Layout>Edit HTML and look for "Upload a new template from a file on your hard drive". Click on the "Browse" button, and locate the bt-dark-green.xml file on your hard drive. Then select "Upload".
This will upload the complete template file to your blog.

Please note that you may be prompted to delete some existing widgets when uploading this new template. This happens when installing any third-party template. If you need to retain all of your existing widgets, you can either make copies of the content to save on your computer, or transfer widgets over using the method described on this page.

I hope you enjoy using the BT Dark Green template! This is my first ever Wordpress theme conversion, though in the next few weeks I hope to convert other Blogging Tips themes for use with Blogger blogs.

Please let me know what you think (and also if you experience any problems with this template) by leaving your comments below.

Demo/Download BT Dark Green Blogger XML Template

PS: I've almost finished my next eBook: Choosing and Using a New Blogger Template which includes detailed informations and methods for all your template needs. Be sure to subscribe to Blogger Buster to learn when this eBook is released for download.

How to add a comment form beneath your blog posts

2008-06-27T10:16:00.010+01:00

Blogger have developed an inline (embedded) comment form which can be enabled through Blogger in Draft. This is probably the most requested feature for Blogger, and I'm sure many of you will want to use this straight away!

To enable inline comments for your Blogger powered blog, you need to log into your dashboard through Blogger in Draft. Then go to Settings>Comments and scroll down the page to see the new "Comment form placement" setting:

Check the radio setting for "Embedded below post" which will enable the display of the comment form below your blog posts.

If you have customized your template, you will need to make a small change to your template code for this comment form to display. But don't worry, it's a very simple customization to make!

Simply go to Layout>Edit HTML in your blog's dashboard and check the "Expand widget templates" box. Then search for this section of code:

<p class='comment-footer'> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </p>

Replace this entire section of code with the following instead:

<p class='comment-footer'> <b:if cond='data:post.embedCommentForm'> <b:include data='post' name='comment-form'/> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </p>

Then save your template. Now when you view a post page in your blog, you should see the new comment form in place!

Update: As many of you have pointed out in the comments, not all templates feature the code I've described above.

Luckily, Is has offered a method which is much easier to use, and has worked for every template I've tried so far. So if my original method isn't working for you, try this instead:

Search for this line in your template code:

<b:include data='post' name='comments' />

Immediately after this line, add the following line of code:

<b:include data='post' name='comment-form'/>

Then save your template. This method adds the required code for the comment form without having to alter the whole comment area, and is very useful if you have experienced problems using the original method Thanks for the hint, Is!

If you don't see your comment form, make sure you have changed this setting through Blogger in Draft and have added your code in the correct place in your template.

You can see this comment form in action beneath this post. Using this comment form allows readers to comment using their Google account, OpenID, Name/URL and all of the settings previously available when using a pop-up or full page comment form (depending on the settings you have chosen).

I am very happy to see that Blogger have listened to our requests and have added this great functionality to our blogs. There are also some other new features added to Blogger in Draft including an improved posting page and import/export features which you can read about in the Blogger in Draft blog.

Please let me know what you think of this new feature by leaving your comments below.

Inline comments are available for Blogger blogs!

2008-06-27T09:40:00.004+01:00

I'm thrilled to tell you that the Blogger team have enabled a comment form below the post - Wordpress style! This is probably the feature we ALL wanted added to the Blogger service, so many thanks go out to the Blogger team for enabling this service for us.

The inline comment form is currently available through Blogger in Draft. To activate this, go to Settings>Comments in your Blogger dashboard and scroll down to "Comment form placement" where you can check the radio setting for "Embedded below post".

There is only one problem with this at the moment: those of us who have customized our templates cannot currently use this feature. This is because our templates do not contain the code required to display the comment form. If you use a default template, your comment form should automatically appear below your post once you have changed the comment settings in your blog.

~~I will post about this in full detail in the next couple of hours with instructions for those who have modified their templates.~~ Update: I have now posted full details for adding comment form functionality to your customized Blogger template, and you can also see this in action beneath this (and every) post on Blogger Buster.

Update: FTP Blogs do publish comment feeds!

2008-06-27T00:00:00.000+01:00

While researching for my previous post, Recent Comments for FTP Bloggers, I had been unable to locate the comments feed for FTP published blogs (and had wrongly assumed that such blogs didn't publish a comments feed!). Luckily, Pete has confirmed that FTP blogs do publish comment feeds! The URL structure of the feed location is as follows:

http://blogger.com/feeds/[blog-id-number]/comments/default

Where [blog-id-number] is the unique identifier for your blog. To find your unique blog ID number, simply log in to Blogger and access the dashboard for your FTP published blog. You can then locate your blog ID by looking in the address bar, where your blog ID will be the long numeric string at the end of the URL: Copy this number, and replace [your-blog-id] with this number instead. The URL for your FTP blog's comment feed will then be structured like this instead:

http://blogger.com/feeds/8351217949706258294/comments/default

You can use the URL for your comment feed to enable a link for subscribers; to syndicate through Feedburner, or simply to provide a list of recent comments which is drawn from your comments feed.

How to publish recent comments from your FTP blog's comment feed

If you would like to display a list of recent comments in a similar manner to this widget's display, you can use paste the following code into your blog template (be sure to change [your-blog-id] to your unique ID number!):

<script style="text/javascript" src="http://bloggerbuster.com/scripts/comments.js"></script><script style="text/javascript">var a_rc=5;var m_rc=true;var n_rc=true;var o_rc=100;</script>
<script src="http://blogger.com/feeds/[your-blog-id]/comments/default?alt=json-in-script&callback=showrecentcomments"&gt;</script>

By default, this script will display the 5 most recent comments, with a 100 character excerpt from each comment. If you prefer to display more (or less) than 5 recent comments, you should edit this phrase in the code, replacing "5" with the number of comments you prefer to show:

var a_rc=5;

If you would prefer to show more (or less) of an excerpt for each comment, you should edit this phrase and replace "100" with the number of characters to display:

var o_rc=100;

Note: to display no excerpt at all, you can simply replace "100" with "0". I hope this update has provided useful information for those publishing their Blogger blogs via FTP. Please accept my apologies for assuming FTP blogs didn't publish comment feeds! Many thanks go out to Pete for his helpful comment and information.

Celebrate 4th July with the Template Monster Lottery

2008-06-26T12:00:00.000+01:00

Template Monster is one of the oldest and best known resources for web designers. To celebrate the upcoming 4th of July, Template Monster has launched a lottery of the best kind: one which rewards everyone who takes part! What's more, by entering this lottery, you are in with the chance of winning an extra special prize too.

To enter this lottery, you need to cast your vote for one of two excellent website templates which will be showcased between now and the 9th of July. The concept is similar to an election: the web design which receives the most votes will be declared the winner. But unlike a regular election, everyone who casts their vote will receive a free themed icon set!

What you could win

Template Monster is offering these great prizes to the lucky winners of the lottery:

1x Voucher to receive any product in the Template Monster database for free
2x Vouchers to receive 80% off any product in the Template Monster database
3x Vouchers to receive a 50% reduction against any product in the Template Monster database.

Template Monster provides website templates; professional business logos; stock photograph images; icon sets; flash templates and much more! Whether you need to create a fully fledged website or simply need to update your blog design, you can be sure one of these prizes would be an excellent prize to win.

Each and every participant in the Template Monster lottery will receive a free icon set, which includes themed images for the 4th July celebrations. If you're looking for some free professional icons to decorate your blog template (or simply to add to a celebratory post) for Independence Day, then it would be worth your while to take part in the lottery. You may also want to check out some of the other patriotic templates available on the site for more examples of inspirational designs.

What's more, if you purchase any product from the database between now and the 9th of July, you will also receive a free icon set!

Template Monster also feature some free web elements, such as clipart, flash buttons and fonts which are well worth checking out if you're on a budget.

Don't forget to enter the lottery before the 9th of July in order to receive your free icon set and be in with the chance of winning a great prize from Template Monster!

Poll Results: What readers enjoy most from Blogger Buster

2008-06-25T22:00:00.000+01:00

Two weeks ago, I asked Blogger Buster readers to vote for their favorite type of content through an interactive poll.

Overwhelmingly, it seems my posts about customizing Blogger templates are the most popular: this option received 39% of the overall votes (more than double the percentage who voted for Blogger Template downloads!).

Here are the poll results in full:

I'm happy to have conducted this poll as I now realize that my "how-to" style articles are among the most popular and requested from readers as a whole. I was surprised to see that none of the options I'd posted received a huge minority though. Hopefully this means all of the post types I publish here are useful for your needs and interests?

Other suggestions

On the original poll page, some of you suggested other ideas for post content. In particular, Alan suggested a regular "Question and Answer" post (which was seconded by many others in the comments for this post). Thank you Alan, I think this is an excellent idea!

Due to the amount of email I receive, it has become increasingly difficult for me to answer all questions sent by email; using a Q&A feature would enable me to answer some Blogger related questions in a way all readers may benefit from, as my answers will be published on the site.

I plan on posting this Blogger Q&A feature each Monday (beginning next week) so if you have a question about your Blogger blog which you'd like me to answer in Monday's post, please leave me a comment with your question and blog URL below this post. I can't guarantee to answer every question, and will instead focus on the questions which are of the greatest interest to you all.

Another redesign for Blogger Buster..?

In recent weeks, I've received constructive feedback to suggest how the design of this site may be improved. Currently, my templates makes heavy use of scripts and images; these slow down page loading time, and can make reading articles difficult for those browsing with images disabled.

Reader experience of Blogger Buster is of great importance to me. While I do love the current design, I have begun designing a new and improved template which I hope will be much more beneficial to you all.

I'm also considering adding a forum to Blogger Buster, which I feel would add a greater sense of community and interaction to the site. Would you like to see a forum added to the site?

Thank you for your feedback!

Thank you to everyone who voted in the poll, and also to those who offered feedback via comments and email. I truly appreciate all feedback and suggestions for how Blogger Buster may be improved, so don't be shy: tell me what you think!

Don't forget to ask your Blogger related questions for Monday's Q&A post by leaving your comments below.