Page Navigation with Arrow Keys in Blogger

Navigating between pages using the keyboard arrow keys is a very useful feature. It saves time scrolling down the page to find links to the next page in a site and is very intuitive for visitors.

In this tutorial, I offer a very simple Blogger template hack which can be used to navigate between newer and older posts on any page where the "blog pager" is present (including index, search, archive and item pages) using the left and right arrow keys.

Try out this functionality on my latest Blogger template release and read on for details of how to add this function to your own Blogger-based site.

Add a Facebook Invite Friends Link to your Blogger Site

Over at 9Lessons I read a very helpful tutorial to add an "Invite your Facebook Friends" link to a website. I was able to modify this in order to add to a gadget which now appears in the sidebar on all pages of Blogger Buster (beneath the Facebook Like box).

If you click on this link, a box will appear on the page enabling you to invite chosen friends from your Facebook profile to visit Blogger Buster.

In this simple tutorial I'll explain how you can add this functionality to your own Blogger powered blog.

Even more fonts for Blogger with Google Web Fonts

Using the Blogger Template Designer, we can spruce up our blogs using any of the many custom fonts available. This selection is powered by Google Web Fonts, and offers a wide variety of styles for almost any type of blog.

However, if none of these fonts are suitable for your design, take a look at the huge selection (currently over 500) of freely available web fonts available from Google.

We can use any of these fonts in our Blogger templates by adding just a few lines of code. Here's how to use any Google Web Font in your Blogger template design in just a few simple steps.

Smooth Scrolling to Anchor Links on Page with Blogger (Quick Tip)

When writing long posts or pages in Blogger, it can be useful to have links enabling readers to quickly scroll to the relevant section of the page.

An example of this which is found in most Blogger sites is the "Comments" link which when clicked jumps to the comment section on the post item page.

Rather than jump sharply to the linked section, it may be desirable to scroll gracefully. This provides the reader with a glimpse of the content they are skipping over, and is a nice touch to add to a well-designed site.

Here's a quick tip to scroll smoothly to a section link further down (or up!) a page in Blogger.

How to control the Attribution gadget when using the Template Designer

If you are using one of Blogger's new templates, you'll notice an "Attribution" widget which appears at the very bottom of your site. This will contain details of the template designer, a "Powered by Blogger" statement, and possibly attribution for any background images you've added through the Template Designer.

We can add copyright information to this gadget by editing through the Layout page in our dashboard, but by default are unable to change it's position or remove it.

For various reasons, you may want to remove this gadget from your Blogger layout. For example, if you have highly customized your template so it looks nothing like the original design on which it is based, or you would prefer visitors not to know that your site is operated using Blogger's free service.

Since removing the Attribution gadget is not a straightforward customization, I have developed a simple method we can use to remove this gadget and (if you choose) replace it with a gadget of your choosing.

Create a contact form with Google Docs?

While creating a client's website (using Blogger, of course), I decided to try using Google Docs to create a comprehensive contact form.

The form was wonderful: with a bit of tweaking, I was able to embed a CSS styled form (rather than use an iframe); validate required fields with jQuery; redirect to a custom "thank you" page, and even have the form submissions emailed directly to the client!

Feeling rather happy with the results, I created a similar contact form for the Blogger Buster contact page and was in the process of writing up a tutorial when I realized my inbox was rapidly filling up with spam. Which was unfortunately delivered by my Google Docs-based contact form.

Sadly, I haven't (yet!) been able to find a Blogger-compatible solution to create a Google-based contact form with spam filtering and emailed submissions, so I've reverted back to my previous contact form.

I'm still hopeful that a method to prevent (most) spam submissions is still possible, so I've decided to publish a simple version of my Google Docs form tutorial for anyone who would like to use it.

How to Back-up, Restore and Upload New Templates to Blogger

Although we can customize virtually any element of our Blogger templates using the new Template Designer, there may be occasions when we want to upload a premade template. Similarly, we may need to back-up an existing template before making significant changes, or upload a previously used template to restore a blog to a former design.

The method and application for backing up and uploading templates has changed significantly since the last time I wrote on this subject, so in this updated post I'll explain how to back-up, restore and upload new templates using the new Blogger interface.

Adding a Google+ Badge to Blogger (Updating my Blogger Template)

Adding a Google+ badge to our Blogger templates enables readers to easily connect with our Google+ page. This can be achieved in just a few simple steps by adding a Google+ Badge gadget; it's also possible to customize the badge and change the display effect.

As part of updating my Blogger template, I added a badge to the sidebar which enables readers to directly connect to the official Blogger Buster page on Google+. I've documented my methods here for other Blogger users who may find this tutorial useful.

Adding threaded comments to a customized blog (Updating my Blogger Template)

Since deciding to update my Blogger template, one of the features I've been most looking forward to using is threaded comments. This enables us to reply directly in response to comments left on a post.

After diving into reams of code and going a very long way about updating my template to include this feature, I stumbled across a very simple way to add this functionality to older Blogger templates.

To help anyone else using a custom Blogger template include threaded comments for their site, I've written this quick tutorial which (unlike my original method!) should get you up and running with comment replies in no time!

Uploading a custom favicon to Blogger (Updating my Blogger Template)

Blogger Buster Favicon

Back in June last year, the Blogger team enabled Blogger users to upload their own favicon to replace the default Blogger icon.

Initially favicons could only be uploaded if they had been converted into .ico format, though it's now possible to upload a square-shaped favicon in .png.gif or .jpg format as long as the file size is below 100kb.

I prefer to use this built-in feature instead of the methods I'd previously used to add favicons to my Blogger sites, particularly as the icon is hosted on the root of our domain (*.blogspot.com/favicon.ico or custom-domain.com/favicon.ico).

Since I have updated my icon as part of updating my Blogger template, I've documented my method (and troubleshooting) for others who are updating their Blogger templates.

How to Add Post Titles to Read More Links in Blogger

Add interest to your "read more" links by including each post's title

Blogger's Jump-Link (Read More) feature enables us to display summaries of our blog posts on the home page (and all non-item pages).

We can configure the text displayed for the Jump Link (which links to the post's item page) by editing the Blog Posts gadget in Design>Page Elements. However, I've also found it useful to add the title of the post beside the Jump-Link text to clarify the title of the post to which it links.

If you're reading this post on the Blogger Buster home page, you'll see an example of this in action a few lines below.

This is a very easy customization and the modified Jump-Link will inherit any current style you've applied to this section. Here's how to add this featre in a single, simple step.

5 New Dynamic Blogger Templates for us to Preview

We can now preview 5 dynamic new Blogger template styles for our blogs which use AJAX, HTML5 and CSS3. These new templates will soon be made available for us to use as the default views for our sites, and will be customizable so we can preserve our blog's individuality.

The "Snapshot" view is an ideal choice for photo bloggers

Easy Post Summaries and Thumbnails for Blogger Blogs - No JavaScript Required!

The ability to display post summaries and automatic thumbnails is one of the most sought-after Blogger customizations. Using such a feature enables us to create a cohesive layout on non-item pages with the entire post and full-sized image on item pages.

Recent changes to Blogger's functionality now enables us to achieve this using only Blogger code - no need for JavaScript, awkward CSS customizations or restrictions on the length or format of our posts.

With only a few small changes to our Blogger template, we can display post summaries and thumbnails using this easy to manage hack.

Add Facebook "Like" Box Beneath your Blogger Posts

Facebook has become one of the most popular tools among Bloggers for syndicating blog posts. By adding a stylish Facebook "Like" box beneath your articles in Blogspot, you offer readers a temptingly easy means of sharing your posts with their friends.

Aneesh of Blogger Plugins has developed a simple, customizable way of installing a Facebook Like box for each page of your Blogger-based site. This tool is based on the original code and design developed by Mia of Dezign Matterz. I'm using a slightly altered version of this widget here on Blogger Buster.

In this post, I'll offer an overview of how to install Aneesh/Mia's stylized Facebook Like box, and an additional method for adding a simpler "Like" widget to your Blogger/Blogspot site.

New eBook Released: Building Websites with Blogger (Plus a Limited 25% Discount)

I'm thrilled to announce the release of my new eBook, Building Websites with Blogger.

This premium guide explains the process of design and maintenance of a beautifully crafted Blogger-based website for a personal portfolio, business presence or eCommerce outlet.

Including details of Blogger's latest features and based on original content, Building Websites with Blogger is illustrated throughout and beautifully laid out. As an added bonus, this eBook is bundled with three exclusive Blogger templates which can be used for both personal and commercial projects.

Mobile Templates available for Blogger

Blogger Buster, Mobile View

Although our Blogger sites can be viewed on most mobile devices, it can be difficult to effectively read blogspot sites due to the small screen size.

To enhance our readers experience of Blogger blogs when viewed on Smartphones (and similar devices), the Blogger Team have enabled Mobile Templates as an opt-in setting through Blogger in Draft.

Add a Lightbox-Style Contact Form to your Blog

While researching customization methods for my forthcoming eBook, I was really impressed at how easy it is to add a Lightbox-style contact form to our sites using ThickBox:

Using Thickbox to display a contact form in this way enables your readers to email you without having to leave the page. We can add this functionality in a simple HTML gadget, and there is no need to edit the HTML of our template at all.

In this post, I'll explain how easy it is to add a lightbox-style contact form to your Blogger blog using Thickbox and a free Kontactr account.

Host Template Images for Free on Picasa

If you use a third party template or customize the design of your blog, chances are you'll need to find hosting for images used in the design.

Many Blogger designers use Photobucket, Flickr and other free image hosting solutions. It's also possible (albeit unnecessarily complicated) to upload images to Blogger or Google Sites.

But my personal favoured image hosting service is Picasa Web Albums. This free Google powered service offers unlimited bandwidth and a generous 1gb of storage - perfect for serving up any images you need for template visualisation.

How to Add a Featured Content Section on your Blog's Home Page

One of the customizations I use most when designing Blogger templates is creating a "featured content" section to be displayed only on the home page. I often use this technique to display a content slider, mini-portfolio or slideshow above the main posts section.

Take a look at the home page of my site, Just Great Film, to see an example of this in action (click on images for full screen previews):

Here's an easy way to restrict the display of a gadget to your blog's home page.

How to hide the Blogger Navbar - Updated for 2010 (Quick Tip)

With all the changes to Blogger's template system, it seems no wonder that my original tutorial for hiding the Blogger nav-bar no longer works effectively (particularly for newer template designs).

In case you were wondering, it is possible to hide the Blogger nav-bar (which displays a search box and useful links). The principle is the same as in my previous tutorial in that we simply need to add a few lines of CSS to our Blogger template code.

Here's how my updated technique to hide the Blogger nav-bar in a few simple steps: