Scheduled Posts for Blogger Have Finally Arrived!

It seems that Blogger has listened to our feature requests, and have finally implemented the feature which will allow us to schedule our posts!

Currently this feature is only available for use through Blogger in Draft (where we are able to test new widgets and features before their mainstream release). Luckily, all registered Blogger users are able to log in through draft.blogger.com to access their dashboards, so we can all access this great new feature right away!

How to schedule your posts

This is really easy! I've already tried this out myself, and can honestly say that it's no more "fiddly" than writing a regular blog post!

Simply log in to your blog through http://deaft.blogger.com. The dashboard looks a little different but everything should still work in the same way.

Click on the link to create a new post, and type your post as normal. When you have finished, click on the "post options" link beneath your post:

Now change the date and time in the box to the right to those when you would like your blog to be published.

Finally, save your post, and you'll receive a message looking something like this:

When you now view your posts list in your dashboard, you will see your scheduled posts are highlighted with their date and time of publishing.

My thoughts

I'm so pleased to know that Blogger have finally decided to implement this function, especially as posting by scheduled email doesn't allow us to use images in our posts. Now many of us won't have to worry about maintaining our blogs while we're away from the computer: we can simply write them in advance!

Please feel free to leave your comments and opinions about scheduling posts in Blogger below. I'd be interested to know how you will be using this new feature too!

Don't forget to subscribe to Blogger Buster for regular updates of new features, Blogger tutorials and free templates.

How to Create Post Summaries in Blogger Layouts Blogs

One of the questions I am asked most about my blog is how I create post summaries on my main and archive pages.

The hack I use for this is Ramani's "selective expandable posts". This hack enables me to choose whether my posts are summarized or not, and provides a "Read full post" link only for those which I have chosen to summarize.

Whereas I would normally refer readers to Ramani's original post to learn how to implement this technique, many readers have expressed their difficulties in using this, and Ramani seems unavailable for support. So I have decided to write a full explanation of how to use this hack in the hope that this will answer many of your questions, and enable you to use this hack in your own Blogger layouts blogs.

Please note: This "selective expandable posts" hack was written for Blogger layouts blogs (those which use widgets). If you need to learn how to use such a technique for Classic Blogger templates, please refer to this post instead.

How the selective expandable posts hack works

This technique uses a combination of JavaScript and Blogger code to display your selected portion of a blog post on your main, archive and search pages. On item (post) pages, the full content of your post will be displayed.

This technique is very useful for bloggers who write long posts, or who prefer to provide a "teaser" of their full post on the main page, which would encourage readers to read the whole article on item pages instead.

Before installing the selective expandable posts hack to your blog, you should be aware of two things:

• Only your future posts (and any previous posts you choose to edit) will feature a summarized version on the main pages of your blog. This is because you must use a post template to make the summaries appear. Those posts which do not include this template will not be summarized.


• To ensure the summary hack works, you will find it necessary to edit your posts in HTML mode, rather than using the rich text editor. Again, this is due to the necessity of the post template; if you edit in compose mode, you will run the risk of accidentally deleting some code which is not visible in the rich text editor.

If these considerations are something you can live with, you're ready to install the "selective post summary" hack.

How to Install the Selective Post Summaries Hack

This isn't the easiest hack to install in a Blogger template. In fact, it took me a few attempts to get this right the first time I installed it! So I would advise you to remember two important things:

Back up your existing template before making any changes whatsoever!

You should always back up your blog template before making any changes to the template code. It is even more important to back-up before installing this hack, as we are dealing with the display of your blog posts, rather than a simple edit to your styling code!

Read each step fully, familiarize yourself with the code, and then read it again!

It is important to pay attention to detail when installing this, otherwise you may place code in the wrong place and get that dreaded "Your template could not be parsed" message.

Also, there may be slight differences to the code which you will be looking for in your template. I will point this out where appropriate, along with the alternatives which may be present in your template.

Here is my step by step guide to installing the selective post summary hack in your blog template:

1. Back up your existing template code!
   
   To do this, go to Layout>Edit HTML in your Blogger dashboard, and click on the link which says "Download full template". This will allow you to save a copy of your existing template in XML format which you can use to restore your blog if ever your template edits go awry.


2. Choose to create a new post. On this page, click on the "Edit HTML" tab so this becomes highlighted. Then in the content box below, paste this entire section of code, exactly how this is written here:
   

   This is the summary
   
   <span id="fullpost">
   
   This is the rest of the post
   
   </span>

   
   Then save this post.
   
   This will only be a temporary post, to help you understand if the following edits you make are working. Once you have installed this hack into your template, you can delete this post.


3. Next go to Layout>Edit HTML in your Blogger dashboard, and check the "Expand widget templates" box.


4. We now need to add the required JavaScript code to the head section of your blog template.
   
   This is the easy part of the installation! Simply copy all of the code on this page to your clipboard (you can do this easily using the keyboard shortcuts CTRL+A followed by CTRL+C).
   
   Next, locate this line in your blog template:
   

   </head>

   
   Paste the code from your clipboard directly before this line.


5. Here comes the tricky part...
   
   In your blog template, you will need to locate the DIV section which contains this line:
   

   <p><data:post.body/></p>

   
   In many templates, this section will look something like this:
   

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

   
   However, the class of the containing DIV section may be called something different, such as:
   

   div class='post'
   
   div class='entry'
   
   div class='post-body entry-content

   
   In the case of third party templates, this could well be something else entirely!
   
   The best way to locate this is to search for <data:post.body/> using the CTRL+F function in your browser, then take a look at the surrounding code to work out where you need to edit.


6. Once you have found this section of code, take a look at the code below. I've added some code in red, which is what you will need to add in your own template. As I have explained, the <div class='post-body'> section may be named differently in your own blog template, so do bear this in mind!
   

   <div class='post-body'  expr:id='"post-" + data:post.id' >
   
        <b:if cond='data:blog.pageType == "item"'>
           <style>#fullpost{display:inline;}</style>
           <p><data:post.body/></p>
        <b:else/>
           <style>#fullpost{display:none;}</style>
   
           <p><data:post.body/></p>
   
          <span id='showlink'>
           <a expr:href='data:post.url'>Read More......</a>
          </span>
          <script type='text/javascript'>
            checkFull("post-" + "<data:post.id/>");
          </script>
        </b:if>
   
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
   

   
   Before you attempt to save your template, I would advise you to preview your blog.
   
   If you have pasted the code correctly, you will see the test post you created earlier will now feature only the summary, followed by the "Read more..." link, like this:
   
   
   
   
   If you have pasted the code incorrectly, one of two things will happen: you will either be unable to preview, or your test post will appear in full, rather than as a summary.
   
   In either case, you should clear all edits you have made, and start again from the top: it's a far better idea to begin the process again, paying attention to every detail, than to try and edit the code!


7. After you have successfully made the changes outlined above, you can proceed to save your template.


8. The final step is to add a post template in your blog settings.
   
   This is the same code we used to add the content to our test post, though this time we will add this as a permanent template which will appear in your post editor each time you write a post.
   
   Go to Settings>Formatting in your Blogger dashboard, and scroll right down near the bottom of this page where you will see a text box for your post template.
   
   Inside this box, you must paste the following section of code:
   

   This is the summary
   
   <span id="fullpost">
   
   This is the rest of the post
   
   </span>

   
   Be sure to copy and paste this code exactly as you see it here. If you accidentally insert any extra spaces, extra characters or line breaks by typing this manually, you run the risk of breaking the operation of the script.
   
   Finally, save these settings, and enjoy the convenience of selectively summarizing your blog posts!

Using the Selective Expandable Posts Hack

For me, Ramani's selective post summaries hack has been the most effective method of summarizing my posts. However, when using this hack you may need to change the manner of your blogging habits slightly, and learn how best this can be used.

Here are some tips which I have learned through using this hack on a regular basis, which will probably be useful for you too:

• You must create and edit your posts in Edit HTML mode. The <span> tags which are included in your new post template will only be visible in Edit HTML mode. If you use the regular "Compose" mode, you may accidentally delete some of the required code, which will cause your posts to be displayed improperly.


• If you do not want to summarize a post, simply delete all of the post template when creating your post! In this case, there will be no "Read more" link beneath the post, and your complete post will appear on the main pages (ideal for short posts).


• If you are used to writing your posts in paragraphs using appropriate paragraph code, like this:
  

  <p>This is a paragraph</p>
  <p>This is another paragraph</p>

  
  you will need to wrap all of your content in paragraphs, and may need to add the appropriate paragraph tags to the lines in your post template too.


• When using this hack, you can easily implement Google AdSense code to appear in your post pages only, and can choose to display this within the body of the post itself, as well as above/below your post content.

As I mentioned earlier, this hack will only work for posts which you create after installing the required code and post template. Your existing posts will not be summarized unless you edit them to add the required code inside the post.

If you have a great many posts, I would advise you only to edit the posts which appear on your front page. So if you display seven posts on your home page, you would only need to edit the previous seven posts, if you would like these to be summarized. The reason I advise this is because in my experience, fewer people browse through your archives using the "newer/older posts" links than would search through using the blog search function. This means that your readers' experience would suffer little disruption from seeing older posts in their full form.

Troubleshooting

If ever you notice a "summarized" posts appears strangely, or other posts seem to disappear from beneath this on your main pages, the problem is most likely that you have accidentally deleted the closing </span> tag from the very bottom of your post. Don't worry if this happens, it is easily solved by adding that line right at the very end of your post!

Another possible problem Ramani has noted is that sometimes the "read more" link will appear on archive pages, even for those posts which have not been summarized. This issue is not yet resolved, though if I come across a definitive solution I will be sure to update this post

Final thoughts

This is by no means the only method you could use to summarize your posts (Jackbook has discovered seven different methods), though for most bloggers the selective method will be the most effective and easily maintained choice.

I hope that my explanation of Ramani's excellent hack will help you implement this version of post summaries in your Blogger layouts blog.

If you have any more hints or suggestions for using this hack, please feel free to leave your comments below.

Redesigning Blogger Buster....

In the next couple of days, I will be unveiling a complete redesign of Blogger Buster. This is a project I am very excited about. I can't wait to show you just how much a Blogger powered blog can be customized, and how adaptive Blogger templates can be. Most of all, I hope that this transformation will ensure your experience of Blogger Buster will be enhanced, and that you'll enjoy the new look as much as I do :)

Not only will this blog feature a newly designed appearance, there will also be some major changes to how this site works. So before I release this brand new Blogger template, I feel I ought to provide you all with an explanation of this redesign, and a little information about the changes you should expect from the site.

Why I have decided to redesign Blogger Buster

While researching Blogger templates, and blog design in general, I couldn't help but be inspired by beautiful, functional web designs, and began to consider just how much I could push the boundaries of Blogger template design.

There seems to be a general "consensus" of what can be achieved with Blogger, especially by those who use Wordpress. So many times, I've read phrases like "No, this can't be done in Blogger", or "Choose Wordpress instead: it's a much more powerful platform".

I want to prove these people wrong!

I'll be honest with you: I've used Wordpress for a different blog for some time now. I understand how Wordpress operates almost as much as I understand Blogger templates. By now, I feel I can safely tell you this:

There is very VERY little which can be achieved in Wordpress powered blogs which cannot somehow be duplicated in Blogger blogs. Albeit with a little compromize, externally hosted scripts and a LOT of patience.

In the next few days, you'll see exactly what I mean...

Keeping all my content on the site!

In it's present state, Blogger Buster actually operates across three domains:

1. www.bloggerbuster.com: the main site (here) where the main blog content is stored.


2. designs.bloggerbuster.com: the "templates" section, where you can search for and download Blogger templates which I have designed.


3. tools.bloggerbuster.com: the "tools" section, where you can find and use blogging tools, such as the web color calculator and PageRank display.

Sure, it works. The transition is almost seamless to most readers and up until now this method has served me well.

But unfortunately there are many drawbacks to this method. The templates and tools I provide barely attract any attention from the major search engines and are difficult to search for. Also, in "diluting" my content across these sub-domains, I am also losing out on traffic, backlinks and overall rank.

One of my main concerns in creating this set-up was that the tools I provide are based on PHP scripts which cannot be used, or hosted, in Blogger blogs. Luckily, I have discovered a method which can bring the tools into this site! Yes, you can now use my Email Scrambler, PageRank display and even the Web Color Calculator here on the main blog!

Now that I have figured out this solution, I can concentrate more fully on developing only this part of the Blogger Buster site.

Search Engine Optimization and Accessibility Issues

I was unpleasantly surprised to discover just how low this site ranks for various keywords in Google searches, despite my best attempts to provide a useful and reliable site.

So after much research into the possibilities of optimizing the site, I've come to discover some useful tactics of template design which I hope will serve this site much better.

Linked to this is the subject of "accessibility". As a web designer, I understand the importance of website accessibility for visually impaired and disabled readers, though by default Blogger templates are barely accessible at all.

Accessibility and search engine optimization are intrinsically linked: if visually impaired visitors are still able to easily understand our blogs with all the images disabled, so can search engine spiders. So far, I think I have done a pretty decent job of ensuring the redesign is accessible, and hope you will all think so too.

What you can expect from the "new look" Blogger Buster site

Over the next few days, I will be making quite a few changes to the site in preparation for the new design. These changes will include:

Some changes to the labels/categories

I will be merging some of the labels currently used into more descriptive categories, and also adding a few new ones which will help you find the posts you need more quickly.

Three new "Main Categories, plus contents pages for each

Since I am changing the way this whole site works by merging the three "domains" into one, I also feel it necessary to create three main categories and a contents page for each. This will assist in navigating around the site and will also offer a much cleaner appearance.

"Tools" pages will be added shortly.

As mentioned earlier, I am drawing all of the available tools from the current tools sub-domain into this main site. So if you notice a few strange new posts appearing in your feed-reader, this will be the reason why:)

The New Design...

I have retained a few aspects of this original design for the new template, though at first glance, you will notice some major changes in the overall appearance!

A "Magazine Style Layout"

I've been much inspired by the recent trend in magazine style layouts which are now a common feature of new Wordpress themes. Such designs feature a site overview on the main index page which assists readers to find the information they need about the site. Many also feature dynamic sidebars, a feature I have implemented into this site which I think will help you navigate more easily, and also draw attention to the more important areas of the site.

Two new features which are available to Blogger users!

I've discovered two great new features of template design which I'd previously considered inaccessible to Blogger users. While these are not major features, I feel they add to the overall style of my new template, and was really happy to discover that they can be made to work in Blogger powered blogs.

I don't want to give too much away as I think it may spoil the surprise, but I'm sure you'll like them to. And of course I will post details of how these could be implemented in your own blogs in the near future.

Style, accessibility and far fewer errors!

Perhaps the style of the new design will not be to everyone's tastes, though I feel confident that the majority of you will appreciate this. I wanted to showcase the capabilities of Blogger, combined with the style of web design which I personally enjoy. So I have worked through every aspect of the new design to ensure that all elements complement each other, with a little twist of personality in there too!

I've designed a striking new logo for Blogger Buster, which still retains the overall "brand" that many have come to recognize. The header section has now been put to much better use, with easily accessible navigation and a more prominent search box to help you navigate more easily.

After much deliberation, I decided on a 2/3 column layout, rather than the current wide two column design. This has enabled me to feature important content of the sidebar in a more prominent place, and also include some of the magazine style features into the home page.

With regard to accessibility, you can now be sure that all links will tell you where they will lead, and all images will describe what they depict.

Furthermore, there will be few (if any) errors between different browsers. I know that the navigation tabs in this design cause problems in Internet Explorer, and also that some of the current scripts bring up error messages too. I hope that I've managed to resolve these problems, and the few invalidation errors which remain are due to the way Blogger publishes our blogs, rather than any mistakes I may have made in the design!

So when will the new design be ready..?

I did initially hope to have the redesign ready to release early this week, but as many designers will understand, there are always problems when tweaking a design, ensuring that every element works the way it should.

Rather than release the site in beta while I iron out the discrepancies, I would prefer to get everything right from the start.

There are still a number of pages I need to write, a few minor tweaks and tests to perform. If possible, I hope to release the new theme next Monday, providing that everything goes to plan!

Will the new template be available for download?

Without wanting to disappointed you all, I'm going to have to say "no".

I've worked incredibly hard on this new design, and would prefer this design to be something unique to this blog. Furthermore, the implementation of the new template is integral to the content: the magazine style layout, sidebar features and aspects of the header section will be unique to this site. It would take a great deal of time and effort for others to implement the same features on their own sites, and due to my commitments to various projects, I'm simply unable to offer support for this.

But there is some good news!

Firstly, I promise to offer tutorials about the major aspects of this redesign, which you could use to implement similar changes in your own sites, one step at a time.

Secondly, I will soon offer this current template as a prize for the lucky winner of a competition, including full installation.

I'll publish the details of this competition in full once I've decided on the method and format.

I do hope you will all enjoy the new design and format of the Blogger Buster blog! Please do tell me your thoughts about the redesign, including any suggestions you may have of how this site could be improved.

If you'd like to be updated when the new design is published, and receive news of future tutorials regarding Blogger template design, please subscribe to the site feed or sign up for email updates.

Optimize Your Blogger Template for Search Engines

Over at Blogging Tips, my latest guest post discusses some useful tips and tricks you could use to optimize your Blogger template for search engines.

While designing the new template for Blogger Buster, I realized many methods which can help search engines spiders index our content more effectively, resulting in better search result rankings for our blogs. If you're interested to learn more about these methods, please pop over to read my guest post on Blogging Tips and let me know your opinions on this article.

Weekly Review #8

Oh my, what an exciting week this has been for the Blogger community! Google have pulled a really great new tool out of the hat which will be very useful for Blogger members, while I have been working on a complete overhaul of this site, which I plan to unveil in the next few days...

In fact, I'm so busy writing about these new developments that I will have to keep this Weekly review relatively short. The good news is that in the next few days you'll be seeing complete posts about these developments, so keep your eyes peeled for updates which will appear very soon.

Blogger Buster news

Guest posting at BloggingTips.com

Regular readers of BloggingTips.com may have noticed my guest post: 40+ Essential Tools for Google Blogger, which was published late last Sunday. This post is a resource list for Blogger users which features some of the best tools and resources available to help you build a better blog.

As the name suggests, Blogging Tips is a resource for bloggers in general, featuring articles about blog development, design, SEO, marketing and so much more!

Please do pop by to take a look at my resource list for Google Blogger, and also the other great posts written by the more regular members of the Blogging Tips team.

I do hope to become a regular writer on Blogging Tips where I'll be writing about Google Blogger and general blog design. My next post is (probably) due in the next couple of days, and once I have clarification, I'll be sure to let you all know about my posting slot!

Blogger Buster redesign

I'm in the process of giving Blogger Buster a whole new makeover. Not simply a new design, this is intended to make more positive changes to the way this site can be used, including:

• Easier navigation for access to posts, resources and templates


• Search engine optimization and better overall ranking for the site


• Better organization for labeling, searching and archives to ensure readers are easily able to locate the content they need.

I will post about the changes more fully before the new changes take full effect, and I would greatly appreciate any suggestions you may have about how this site could be improved!

Blogger News

As I hinted in the introduction to this post, Google have developed a really great new tool which can be used for free in our Blogger blogs!

Grandcentral is a free new service from Google which allows you to receive calls and post voice mails directly on your blog!

For me, this is a revolutionary method for blog authors to interact with their readers, and foresee this will be a highly useful tool for many blog authors to implement.

At present, Grandcentral is in beta testing mode, though Blogger users are able to sign up to begin using this free service right away.

I will post about this more fully once I've had the time to research and test this new product, and will let you know more about it then (though for many reasons, I doubt I will implement this into Blogger Buster).

This week's links

Here's a handful of my favorite posts and links related to blogging for this week. I'm sure you'll understand why this one is a little short when you see the new site design ;)

• 40+ Top blogs which will teach you to blog like a pro! ProBloggersMatrix has created a truly inspirational list of must read blogs for aspiring bloggers.


• A comprehensive guide to keyword research for bloggers : this is a great, though somewhat lengthy article which has been published for free by CopyBlogger. Find out how keyword research affects your blog's status in search engines, and learn how to improve this by reading your free comprehensive guide.


• Prioritize your blog into 5 distinct groups: This article by ProBlogDesign has been invaluable to me whilst working on the makeover for Blogger Buster. If you're interested in the design and layout of your blog, this really is a "must read" which will provide much food for thought.


• 9 Things that drive a blogger crazy! Skelliewag has become a must read blog for me, and as always, this is an excellent post which delivers the best advice about blogging. In this post, Skellie tackles nine blogging events which can drive us crazy if not approached in the right way. (Number 2 was particularly relevant for me when I noticed my subscribers had dropped to almost half! Temporarily though, thank goodness!)

I hope you've enjoyed this somewhat shorter Weekly Review. Please do subscribe to the feed to ensure you're kept up to date with the developments here over the next few days. I promise you'll be in for a very pleasant surprise...

How to add icons beside your navigation links

Having relevant icons beside your navigation links is a great way to draw attention to them. In the image above, you can probably tell at a glance where all the links will lead. This trend of modern web design not only looks good, but is also a useful way to help your readers navigate to important content in your blog.

In this post, I'll explain the method I use to add icons beside navigation links in Blogger template designs.

Explaining the method

In the image above, the links are part of a link-list. Each individual link in the list is displayed inline, and is wrapped in span tags. Furthermore, each link is coded with its own class.

There are three essential steps to make icons appear beside links in your blog:

1. Find icons (in GIF format) to suit your blog's theme, and upload these to an image hosting service.


2. Add the code for the links into an HTML/JavaScript widget in the blog layout.


3. Style these links with a background image by adding some code to the <b:skin> section of your blog template.

We need to add the links manually in an HTML/JavaScript widget for this to work. This is because we cannot edit each individual link in a regular link list widget, which is required to ensure each link features its own image.

This method is really not as complicated as it sounds!

Once you've tried this method for yourself, you'll get a much better understanding of how this method can work for you. To get started, try using the code and example images below to add images to a navigation area in your own blog template. Then afterwards, you can easily change the icons and style to suit the style of your own blog theme.

How to add icons beside your navigation links (example icons and code)

In this example, we will add icons to the three most popular navigation links used by bloggers: the "Home", "About" and "Contact" links.

The end result will look something like this in your template (though the font and colors may differ, depending on the styles already in place in your own template):

Step 1: Add the code for your links in an HTML/JavaScript widget

In the layouts section of your Blogger dashboard, choose to create a new HTML/JavaScript widget where you would like these navigation links to appear. This could be in your blog's sidebar, in a widget above the posts or within the header section if you prefer.

Then paste the following code into your new widget, substituting the links highlighted in red for the URLs of your home page and relevant post pages:

<div id="menu-items">

<ul>
<li><span class="home"><a href="http://your_blog_url.com">Home</a></span></li>

<li><span class="about"><a href="http://your_blogs_about_page.com">About</a></span></li>

<li><span class="contact">;<a href="http://your_blogs_contact_page.com">Contact</a></span></li></li>

</ul>
</div>

At first, these links will appear like a regular, unordered list with bullet points instead of the images we require. So now, we need to add some style to the template, which will make the links appear beside each other (inline display), feature relevant background images for each link, and be evenly spaced.

Adding the relevant code to your blog's template

For this part of the tutorial, you need to edit your blog's HTML code, so go to Layout>Edit HTML in your Blogger dashboard.

To add the style for your new navigation links, you can simply copy and paste the following code just before the closing <b:skin> tag on your blog template:

#menu-items ul li {
display: inline;
font-weight: bold;
list-style-type: none;
padding: 5px 5px 5px 0;
margin: 0;
}


#menu-items li span.home {
background: url('http://bloggerbuster.com/images/bb_post/home.gif') no-repeat;
padding: 0 0 0 20px; }


#menu-items li span.about {
background: url('http://bloggerbuster.com/images/bb_post/about.gif') no-repeat;
padding: 0 0 0 20px; }


#menu-items li span.contact {
background: url('http://bloggerbuster.com/images/bb_post/contact.gif') no-repeat;
padding: 0 0 0 20px; }

Now if you preview your blog, you will see your newly added navigation links now feature the icon images to their left. Once these modifications are complete, you can choose to save your template and enjoy the added style to your navigation links.

If you would prefer to host these icons on your own server, you can download the icons to your computer, upload them to a new location, and change the URI's for these to match their new location.

Here are links to the icon files (right click and choose "Save As..."

• home.gif


• about.gif


• contact.gif

If you would like to add more links and different images, the simplest method would be to duplicate the format of the style (using a different class), then add another link to the list, referring to the class you have just created.

Here is an example of what the style code may look like in your template:

#menu-items li span.anotherpage {
background: url('http://yourimagehost.com/images/anothericon.gif') no-repeat;
padding: 0 0 0 20px; }

The items highlighted in red are those which you would need to alter to suit your new links and icons.

Here is an example of how to call a new link (and associated icon), which could be added to the code in your HTML/JavaScript widget, just before the closing </ul> tag:

<li><span class="anotherpage"><a href="http://another_blog_page.com">New Page Title</a></span></li>

Important notes

The icons used in this example are have the dimensions 16x16px. To display larger icons, you may need to adjust the padding of the lost items, otherwise your images may appear cropped from above and below.

If you need to use icons which have transparency, you should ensure these images are presented in GIF format, rather than PNG. Internet Explorer 6 and below cannot display PNG transparencies correctly, so when viewed in these browsers, your icons would appear incorrectly.

Final thoughts

I hope this tutorial has provided you with the tools and knowledge to create your own styled navigation links, and expand on these examples to create links which are more suited to the style of your own blog.

Here are some resources for free icons if you're looking for alternatives to the ones used in this example:

• Iconlet: a search engine for free icons


• Silk Icons: a huge download featuring over 700 free 16x16px icons


• TwoTone icons: A collection of simple 16x16px icons in editable Photoshop and GIF format.

Feel free to leave your comments and suggestions below. I look forward to seeing how you have used this tutorial to add style to your own Blogger template designs.

A new design for Blogger Buster in progress!

While researching and writing about Blogger template design, I've come to realize that there is certainly room for improvement here at Blogger Buster. What concerns me most is that you-the readers-can enjoy your experience of the site. I need to reorganize this blog's theme, and categorize the content more effectively, to ensure it is easier to find the information you need.

So I've decided to give Blogger Buster a makeover: updating the blog theme, logo and layout which (I hope!) will make this site much easier for you to use (and certainly much more stylish!)

I've come to realize that there are few aspects of blog design which cannot be achieved with Blogger powered blogs. In designing a new template, I hope to really push the boundaries of what can be achieved, which is both stylish and easy for readers to use.

My main ambition with this is to recreate a "magazine style" template, where the front page is organized into sections which offer a much better idea of what this blog contains. Recent posts (by category), featured articles and a more organized sidebar section will certainly appear in my new design, as well as an up-to-date logo.

Also, I hope to achieve two new features which (to my knowledge) have not yet been used in Blogger template design.

Without wanting to give too much away, I feel confident in saying that this will my best Blogger design ever. And once this is complete, I will concentrate on posting all about how this was achieved, with examples and code of how you could archive similar results in your own Blogger powered blogs!

Hopefully, the theme will be ready to unveil early next week. I hope you're looking forward to this as much as I am?

Weekly Review #7

For me, this has been another busy blogging week, especially as my hosting service suffered problems around midweek, causing all of my images (and parts of this site) to disappear!

But on a happier note, this past week has also bee rather inspiring. The Blogger team have introduced some new updates and bug fixes for us, I've discovered even more about Blogger template customization, and have also discovered some great articles and resources for you all!

Blogger Buster News

Epiblogger Interview

I was thrilled to receive an email from Lee Robertson of Epiblogger asking for an interview about my blog! While Epiblogger is still a fairly new blog, it's fast gaining popularity due to the great quality of blogging-related articles. So if you haven't already discovered Epiblogger, I would really recommend you stop by for a read, and perhaps take a look at the my interview...

Apologies for the "downtime"

Those of you who visited the site midweek may well have noticed many flaws in the site, and also missing images in many of the templates. This happened because my hosting provider was having some mysterious fault which was preventing access to any of my files (not because I had exceeded my bandwidth allowance!).

Fortunately, the problem now seems to be solved, though I am still none the wiser about what had caused this in the first place!

This problem has happened before with a different site hosted by the same company, so as you can imagine I am now rather nervous of this happening again. While I am very tempted to change my hosting provider to a more stable company, my concern is that this site and all the services provided would be unavailable for a couple of days while the new settings take effect.

Hopefully this will be unnecessary, though if we start to see problems again, I will be sure to make the switch to a host which is recommended by some of the best names in blogging!

A new look for Blogger Buster (and perhaps a little competition?)

In recent weeks while writing the Blogger Template Design series, I've been doing some rather enjoyable research about blog design trends, and have also experimented with various techniques of customization which really push the boundaries of what Blogger is capable of displaying.

However, this has also made me consider new styles which I'd love to apply to this blog, in particular, the "magazine style" front page which is now becoming very popular in Wordpress driven blogs.

So... I'm considering a makeover for Blogger Buster.

In writing this, I know many of you will be wondering why: this template works well for me (at least, in most respects), it seems to have become a recognizable "image" for my blog, and is probably among the most original templates on Blogger driven sites. Unfortunately I can't help feeling a sense of discontent when I see my content isn't organized as effectively (or stylishly) as it could be. So last night, I took a deep breath and begun to design how the new template will look!

The good news is that this will also be useful for readers of this site.

As create my new template, I will document any customizations which have not already been posted here for the benefit of the Blogger community in general. Furthermore, I may well offer a slightly modified version of this existing template as a prize in a future competition!

In the next couple of days, I will write a full post about my proposed changes to the site, so be sure to come back soon to read more about this.

Blogger News

I was really happy to notice that the Blogger team have made some updates to the way Blogger operates, and have also fixed some annoying bugs!

The identity options for the comment forms are now much better defined, which for me is an important update as readers can clearly see which would be the best option to use. Furthermore, posts with more than 200 comments now have them split across pages, so as not to clutter a single page with too much content.

Layouts blogs (new Blogger) now have a tab which says "Layout" instead of "Templates", to ensure there is no confusion between the two template types.

Also, new transliteration options have been added for Kannada, Malayam, Hindu, Tamil and Telugu, allowing even more options for bloggers using different language systems to post their thoughts online.

The Blogger Team have now fixed the following bugs:

• Better Persian translations and other BiDi layout fixes


• A fix to the long-standing incorrect label counts bug


• Safari 3 support for the Layouts template editor pages


• Faster loading times for the post editor


• Improved international support in the post editor’s date and time fields


• Compatibility fixes for Picasa’s BlogThis! button

This week's links

Here are some useful articles and sites which I have discovered during this week of blogging:

• MyBlogLog have released a shiny new Recent Readers widget! This is a much more stylish version than the previous block-effect one, as you can see in this example. I'm sure many of you will now want to upgrade, which you can do by logging into your MyBlogLog control panel and choosing to create a new widget.


• PlaceMyProduct: over at SuperBlogging, Tay has written about a new service which may be useful for bloggers who monetize their sites with ads and other paid content. This is a great review of a new service which explains which focuses on the benefits for bloggers.


• Feed Analysis for your Feedburner Feeds: This is such a useful tool from BlogPerfume! I was thrilled to see statistics of my feed subscribers, plus loads of other useful information relevant to my site. Do take a look at this if you have the time!


• The Blogger Code: Now this is quite an old meme now, but it's still a rather interesting find. By answering a series of questions related to blogging, you can generate your own "Blogging Code". Check it out for yourself to see what the fuss is all about. Here is my own Blogger Code for those who are interested. You'll have to visit the Blogging Code site to decode it though ;)

  
  

  
  

  
  B9 D+++ T K+ S+ F I O++ X- E+ L C Y4 R+ W+ P+ M1 N H
  

  
  

I hope you've enjoyed this week's review! To receive updates of new posts, please subscribe to the feed or consider registering for email updates.

As always, your comments and opinions are always welcomed, so please leave your messages below.

Adding style to search forms

If you've added a search widget to your blog, you may be wondering how it could look a bit more stylish! After all, the default gray button isn't the most desirable button in the world.

Styling a search widget isn't difficult at all. You can customize the button using CSS or replace this with an image instead. Another customization option is to add some informative text inside the search box and remove the search button altogether.

In this post, we're going to look at some options and methods of customizing the search widget, so you can choose the method which works best for you and style your search box to match the overall design of your own customized blog.

In the previous installment of the Blogger Template Design Series, I explained an easy method of changing the layout of the header, enabling widget elements to be added. Search widgets are an excellent example of what could be included in a blog header, and in this post we will learn how search forms can be styled to suit your theme.

Search widgets are a type of form, constructed of a text box (the area where you type the search terms), a submit button, and some hidden elements which send information to the server about the search which is being performed.

If you're using a simple Blogger search widget, the code for your search widget will look something like this:

<form id="searchthis" action="/search" style="display:inline;" method="get">

<input id="search-box" name="q" size="25" type="text"/>

<input id="search-btn" value="Search" type="submit"/>

</form>

The elements which we can style are highlighted in red. The "search-box" element is the box which contains the search text, while the "search-btn" is the button keyed to submit the search query to the server.

By default, this simple search widget will appear like this in your template:

But using some simple techniques, we can make this look a whole lot prettier!

Using CSS to style the search widget

The easiest customizations can be achieved using only "inline CSS": this means that the search box and button can be styled within the code used for the search box.

For example, let's say we wanted the search box to have a pale blue background and a dark blue border. To achieve this, we simply add some style declarations to the "search-box" element, like this:

<form id="searchthis" action="/search" style="display:inline;" method="get">

<input id="search-box" name="q" size="25" type="text" style="background: #ccccff; border: 2px solid #000066"/>

<input id="search-btn" value="Search" type="submit"/>

</form>

By adding these style declarations, we can create a search form which looks like this:

We can add style to the search button in the same way. This time, the background will be dark blue with a red border, while the text is white and bold:

<form id="searchthis" action="/search" style="display:inline;" method="get">

<input id="search-box" name="q" size="25" type="text" style="background: #ccccff; border: 2px solid #000066"/>

<input id="search-btn" value="Search" type="submit" style="background: #000066; border: 2px outset #ff0000; color: #ffffff; font-weight: bold;"/>

</form>

Note that in this example, I used "outset" rather than "solid" for the border property; this ensures the button looks raised rather than flat, and helps readers understand that it is a button which can be clicked.

Here is the resulting form:

You can experiment with different colors ans styles for your own search form to create a unique design.

Changing the visible text within the form

You could add some text within the search box as a guide for your readers (eg: Search this blog!).

This is achieved by adding a "value" to the search box, like this:

<form id="searchthis" action="/search" style="display:inline;" method="get">

<input id="search-box" name="q" size="25" type="text" value="Enter search terms"/>

<input id="search-btn" value="Search" type="submit"/>

</form>

This will appear like this:

To change the text on the search button, we only need to change the value to our preferred term:

<input id="search-btn" value="Search" type="submit"/>

If you prefer the button to say "Go!", you could simply replace the value of "Search" with "Go!" instead:

<input id="search-btn" value="Go!" type="submit"/>

Using an image instead of a button

Using an image instead of a button isn't as complicated as you may think! For this, we simply need to change the input type from "Submit" to Image" and specify a URL for the image.

First of all, you will need to find the image you would like to use, and upload this to an external hosting account.

It is advisable to use a small image or icon for this (16x16px or slightly larger would be a perfect size for a search form). There are many free search icons available from Iconlet, or you could download an icon pack and choose a suitable image instead.

For this example, I'm going to use this icon from Iconlet:

To use this icon instead of the button for my search form, this is the code I will use:

<form id="searchthis" action="/search" style="display:inline;" method="get">

<input id="search-box" name="q" size="25" type="text" value="Enter search terms"/>

<input id="search-btn" value="Search" type="image" src="http://bloggerbuster.com/images/search-small.jpg" style="margin-left: 5px; margin: 3px 0 0 5px;"/>

</form>

Notice that I have changed the type of the input in this form from "submit" to "image", and have added the URL of my image afterwards. The style declarations align the image against the search box, adding some space to the left, and ensuring this doesn't float above the search box.

This is what the image will look like in the search form:

When using your own image instead of the submit button, be sure to reference the correct URL of your image.

You may also need to adjust the margins slightly for images of a different size to the one used in this example.

Coming soon...

In the next installment of the Blogger Template Design series, we will learn how to style links in a navigation bar using both CSS and icons.

If you have enjoyed this tutorial, please subscribe to the feed to receive updates of new posts.

Downtime Uptime!

Update: Hopefully everything is back to normal now. As far as I can tell, all the images, scripts and templates are back in place. But if anyone notices something amiss, please do let me know!

It seems that my hosting provider is suffering some downtime. I've contacted tech support to find out why many features of this site are inaccessible and hopefully will have this resolved very quickly.

My sincere apologies to all readers and users of this site. As soon as I know any more, I will be sure to post this here!

The easy way to make a great blog header!

In yesterday's post, I wrote about what makes a great blog header. As I'm sure many of you will agree, a great blog header doesn't only include your blog's title and logo. Visitors
need to know what your blog is about (branding) and how easily they will be able to find the information they need (navigation, and possibly search elements).

So in this installment of the blogger template design series, I'm going to show you a quick and easy way for you to add more than just your header image to your Blogger blog: adding extra sections for widgets, in which you can place anything you want!

If you take a look at the Blogger Template Design blog now, you'll see the bare bones of a header beginning to take shape. The title and description for this blog are now featured in the left-hand section, while on the right you can find a search box, and a simple navigation bar:

The search box and navigation links are actually widgets which can be edited through the layouts section, rather than being built into the template itself. This is by far the easiest way to change elements of the header section, and it's really easy to install this in your own blog template!

How to add more elements to your header section

In this tutorial, there are only three essential steps needed to add these extra elements to your own blog:

1. Copy and paste a section of code in the header section of the template.


2. Add some styling code to the CSS portion of the template

And finally...


3. Add some widgets to your newly created widget sections!

Trust me when I tell you that this is a really easy hack. You can be up and running with a new, more interactive header in no time at all, and once the basic structure is in place, you can begin styling each section to best suit your needs.

Step by step instructions

1. Go to Template>Edit HTML in your Blogger dashboard, and find this section of code:
   

   <div id='header-wrapper'>
   
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   
   <b:widget id='Header1' locked='true' title='Your blog title will appear here (Header)' type='Header'/>
   
   </b:section>
   
   </div>

   
   Highlight this entire section of code, and replace it with this instead:
   
   <div id='header-wrapper'>
   
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   
   <b:widget id='Header1' locked='true' title='Blogger template Design Series (Header)' type='Header'/>
   
   </b:section>
   
   <div id='header-right'>
   
   <b:section class='header' id='header-right-top' showaddelement='yes'>
   
   </b:section>
   
   </div>
   
   <div id='header-right-bottom'>
   
   <b:section class='header' id='header-right-bottom-section' showaddelement='yes'>
   
   </b:section>
   
   </div>
   
   
   </div>


2. Next we need to change some of the style in the <b:skin> section. So find this entire section of code:
   

   #header-wrapper {
   
   border: 1px solid #000000;
   
   margin:0 auto 10px;
   
   border:1px solid $bordercolor;
   
   clear: both;
   
   word-wrap: break-word;
   
   overflow: hidden;
   
   }
   
   
   
   #header-inner {
   
   background-position: center;
   
   margin-left: auto;
   
   margin-right: auto;
   
   }
   
   
   
   #header {
   
   margin: 5px;
   
   border: 1px solid $bordercolor;
   
   text-align: center;
   
   color:$pagetitlecolor;
   
   }

   
   Note: the code which appears in your own template may have slightly different styling attributes to the example above. The important thing here is to replace the #header-wrapper, #header-inner and #header sections, and add some extra styling code.
   
   
   Once you have found this section, highlight it and replace it with the following section of code:
   
   #header-wrapper {
   
   width: 950px;
   
   border: 1px solid #000000;
   
   margin:0 auto 10px;
   
   border:1px solid $bordercolor;
   
   clear: both;
   
   word-wrap: break-word;
   
   overflow: hidden;
   
   }
   
   
   
   #header-inner {
   
   background-position: center;
   
   margin-left: auto;
   
   margin-right: auto;
   
   }
   
   
   
   #header {
   
   width: 500px;
   
   float: left;
   
   margin: 5px;
   
   border: 1px solid $bordercolor;
   
   text-align: center;
   
   color:$pagetitlecolor;
   
   }
   
   
   
   #header-right {
   
   width: 400px;
   
   float: right;
   
   border: 1px solid $bordercolor;
   
   color: $pagetitlecolor;
   
   margin: 5px;
   
   }
   
   #header-right-top {
   
   padding: 0 5px 10px;
   
   }
   
   
   
   #header-right-bottom-section {
   
   padding: 0 5px 10px;
   
   }
   
   
   
   #header-right ul {
   
   margin: 0;
   
   padding: 5px;
   
   }
   
   
   
   #header-right ul li {
   
   display: inline;
   
   padding: 5px;
   
   }
   
   
   
   #header-right-bottom {
   
   width: 400px;
   
   float: right;
   
   border: 1px solid $bordercolor;
   
   color: $pagetitlecolor;
   
   margin: 5px;
   
   }
   
   
   
   #header-right-bottom ul {
   
   margin: 0;
   
   padding: 5px;
   
   }
   
   
   
   #header-right-bottom ul li {
   
   display: inline;
   
   padding: 5px;
   
   }
   
   
   
   Note: if your own blog template is narrower than 950px, you may want to make some alterations to the styling code above. Change the width of the #header-wrapper to match the width of your outer-wrapper, so that it will not disrupt the overall width of your blog. You may also want to lessen the widths of the #header section, and the #header-right and #header-right-bottom sections too.
   
   
   If you preview your template you will see that the title and description are now aligned to the left, with space on the right for you to add your new widgets. So save your template, and let's add some widgets to these new sections!


3. Adding widgets to these new sections is the easiest part of this tutorial. Simply go to Template>Page Elements and add your widgets in the new sections which have appeared beside your header!
   
   Both of these sections now have styling for list items, so if you want to add a navigation bar, choose to add a "Links List" page element. Add your links as required and save. When you preview your template, you'll see that this display inline (horizontally) rather than in a long list.
   
   To add a search box to your header, you could either choose to add a Google Custom search widget, or use a simple blog search widget instead.

Width these extra widget sections in place, there are endless possibilities for what you may add to your header section! I used a search box and navigation links as an example, but you could easily substitute these for a description, feed links or anything else you choose instead.

Your blog logo/custom header image

As before, you can still add your custom logo or header image to the header widget. This will be resized to the new width of your header section (in the example above, this is 500px wide), so for best results you should upload an image of the same size.

If your image is wider than this, you should check the "Shrink to fit" box inside the widget editing box to ensure the header doesn't overshadow the other widgets on the page.

Coming soon...

The next two installments of the Blogger Template Design series will focus on styling your new header elements:

• Creating a more interesting search box


• Adding style and icons to the navigation links

If you'd like to see the progress of this series to date, you could check out the demonstration blog to see the what we have accomplished, along with links to all previous tutorials in this series.

To keep up to date with this series, be sure to subscribe to the feed or sign up for email updates!

As always, your comments and opinions are much appreciated. I'd love to know what you think of this series so far!

What makes a great blog header?

Photo by Martin Kingsley

A blog's header is the first thing visitors see when they visit your site. In my opinion, a good header section is one of the most important aspects of a well designed blog. It needs to make an impact on the visitor, both in terms of design and functionality, in order to make them want to see more of your site.

When I began to construct the design for Blogger Buster, I built the header section first, then designed all other elements around this. Setting the tone of a great blog design by focusing on the header first can help all other elements fall into place. So in this installment of the Blogger Template Design series, we will take a look at the elements of a great blog header, and methods we could use to create one.

Some examples of great blog headers

When you come to think of great blog designs, there are probably a few sites which first come to mind. So take a look at these sites now, and focus on the header sections of these designs.

What elements of the header section make these blog designs stand out for you?

Here are some examples of headers in blogs whose design I admire:

Adii.co.za

Skelliewag.org

Ndesignstudio

JohnCow.com

Revolution theme by Brian Gardner

In all of these themes, there are three main features which I consider are essential in the design of a great blog header:

1. The blog title/logo


2. Brand reinforcement


3. Navigation links

Additional features of a blog header may also include a search box and subscription links (indeed, the header is the first place I look for these features when browsing other blogs!).

Why are these features important?

When a new visitor finds your blog, there are three essential things your design needs to convey in a glance:

1. Something striking or unique which will catch their attention and make them want to read on!


2. General information about your blog: what is it called? What are they likely to read about in your posts? Do these messages suggest the reader will find the information they are interested in?


3. How easily readers will be able to find the information they are looking for.

A great blog header should be able to convey all three messages within the space of a few seconds.

Of the examples mentioned above, Adii's blog header is perhaps the most striking in terms of branding and information: strong colors and unusual fonts convey Addi's personality as a designer, while the visual descriptions of his site and status tell the reader exactly what to expect in the content.

John Chow's header is put to great use, illustrating his theme of "making money online" through the image of cash in the header and also the blog description. The navigation and search box quickly help visitors understand how to find the information they need.

There is no reason why Blogger headers cannot look this good too!

Those who are familiar with these blog designs may realize that these are not Blogger powered templates. So let me assure you of one thing: all of the header designs featured here can easily be recreated in Blogger templates!

Using some simple techniques, you can easily create a header section which looks as good as any of the excellent designs featured above.

In the next installment of this series, I will offer you a very easy way to create a great layout for your header section! This layout will include sections for your blog logo/title and description, a search box and easily configurable navigation links. Best of all, you will be able to simply copy and paste the code required for this layout into your blog template, including the sections for widgets which you can configure yourself.

In the meantime, why not get some inspiration for your header design/blog logo, and imagine what you could achieve with your own Blogger blog!

Blogger template releases for 2/11/08

Each Monday, you will now find a new feature here at Blogger Buster: listings of the previous week's Blogger template releases, with information information, screenshots and links to the download pages.

If you are a designer of Blogger templates, please do let me know about your latest releases so I can include them in this weekly digest.

Zen by SuckMyLolly

A three column template in hues of green. Both the background and main content background colors can be changed in the Fonts and Colors section of your Blogger dashboard.



Download includes: a zip file including the XML template file, terms of use (with link to upload instructions) and the header image used in the template.



Demo | Download

Hot Hands by SuckMyLolly

A two column template featuring a header image and customizable backgrounds.



Download includes: XML template, Terms of use (including link to instructions for uploading the template) and header image.



Demo | Download

Dear Diary by Blogger XML Skins

While this is not such a recent theme, I discovered this after writing the 101 excellent Blogger templates post and really wanted to share this beautiful design!



Download includes: A zip file containing only the template code. To upload this to your blog, you will need to paste this into your Edit HTML section in your Blogger dashboard, replacing the content which is already present.



Download (there is no demonstration page for this template)

Modern Paper by TemplateGodown

A clean and simple theme with two sidebars to the right of the main column. The header section features an RSS icon for linking to your feed.



Download includes: a zip file containing only the XML template. To upload this to your blog, you will first need to save this file to your computer. Then go to Template>Edit HTML in your Blogger dashboard, and choose to upload this file by clicking on the "Browse" button near the top of the page.



Demo (temporary page!) | Download

The Erudite Template by Jashan of The Erudite Blog

I was quite impressed with this template. Neat and clean with a single sidebar to the right, this template also features social bookmarking links after each post, and a customizable RSS message to help encourage readers to subscribe to your feeds. You can also choose from seven different header images to use!



Downloading this template: on the download page, you will need right click the download link and choose to save this XML template directly to your computer. However, there are very detailed instructions for installation on the download page itself.



Demo | Download

I hope you have enjoyed reading this week's round-up of Blogger template releases. If you are a Blogger template designer, please let me know about your latest releases so I can include them in future round-ups and help other bloggers discover and enjoy your designs too!