101 Awesome Free Blogger Templates.

Blogger template design has evolved so much since I posted the showcase of 101 Excellent Blogger Templates and the follow-up of 125 more...

This past year, we have seen some incredible changes to the sheer quality and quantity of free templates available for the Blogger platform! From incredible magazine style designs with automatic post summaries to beautiful photo showcases, lifestream templates and everything between - there are high quality designs to suit every requirement, or inspire you in the creation of your own unique designs.

For your browsing and inspirational delight, here is my showcase of awesome Blogger templates for summer 2009. These have been selected because of their outstanding quality, attention to detail, beautiful layout and feature-rich design.



I've categorized these themes under nine headings to help you find the perfect template for your site: Simply Awesome, Magazine and Gallery Styles, Bright and Colourful, Minimal and Simple, Dark Designs, Feminine and Flirty, Travel Themes and Miscellaneous Templates.

Each template includes a high-resolution screenshot, a link to a live demonstration blog and links to the Blogger designer/coder's download page where you will find instructions, licensing and further details for the design.

Due to the sheer number of images, this page may take a while to load. Please be patient - I promise the wait will be worth it!

Simply Awesome!

This selection includes some of the most stunning and well-designed templates I have found. These templates are image-heavy and highly stylized, but I'm sure you'll all agree they are awesome!

Papelys y Color

Blog Amuki is one of the most astounding Blogger based designs I have ever seen! I was awestruck to discover this hugely talented designer has released some Blogger templates for free!

This is the first template by Amuki, which features a very interesting effect to hide the sidebar. Be sure to check out the demo to see this effect in action!

View Demo | Download Papeles y Color

Paper Wall

Originally designed for Wordpress by Indezigner, this theme has been converted for Blogger three times, by BloggerThemes, Blogger FAQs and Deluxe Templates. Each conversion is slightly different but both look absolutely superb and deserve these links to their download pages ;)

View Demo | Download from BloggerThemes | Download from Blogger FAQs | Download from Deluxe Templates

Showcase

This is a perfect template for anyone wishing to showcase images/templates and the like using Blogger.

Created by the talented Dante araujo, this showcase-style design works almost right out of the box and even includes javascript-based summaries so that text is hidden on non-item pages.

View Demo | Download Showcase Blogger Template

Eden's Garden

This beautiful template was designed by RayCreations. Featuring a stunning background, stylized headings and date headings, this is bound to impress visitors to your blog.

View Demo | Download Edens Garden

Tree House

Designed for Wordpress by Skinpress, this adorable theme has been converted for Blogger by FalconHive.

This theme is surprisingly easy to set up: full instructions are provided on the download page, while the navigation and 125px ads can all be configured using widgets in the layout.

View Demo | Download Tree House Template

Craftwork

This theme was originally created by EzWpThemes and converted for Blogger by Blogger FAQs. A feminine and quirky design, the appearance has been considered in all areas and makes for a stunning theme.

View Demo | Download Craftwork Theme

Gamma Ray

This stunning dark theme includes an animated featured posts section and very stylish typography. An original design by Insight Your Blogger.

View Demo | Download Gamma Ray

ImpreZZ

This fabulous template offers a three column layout with integrated Twitter updates and beautifully styled headings in the central column. Converted by Falcon Hive from the original design by Gopal Raju.

View Demo | Download ImpreZZ 

Art Template

Here's another memorable EzWpThemes conversion, this time by Gosu of FoolBlogger.com. Designed to appear like a scrapbook, this highly stylized theme is colourful yet very functional.

View Demo | Download Art Template

Magazeen

Designed by WeFunction for Smashing Magazine, this Blogger template conversion from Zona Cerebral is simply awesome! Don't be deceived by the apparent simplicity of the layout: once you see this template in action you'll understand why I like it so much.

Beneath the header section is an area of thumbnails which link to recent posts. When you hover over a thumbnail, the title of the post it links to will fade in (and out) above the thumbnails. The footer too is well-styled, and while this template will require personalization for your particular blog, I promise the results will be well worth the effort!

Demo | Download Magazeen Template

Wooden Fence

Here's another stunning conversion from Alvaris Falcon, converted from the Wordpress theme by TemplateLite.

This three column theme is beautifully designed with image-heavy backgrounds in the style of a sunny garden.

View Demo | Download Wooden Fence Theme

Magazine and Gallery Styles

In recent times, magazine and gallery style themes have become very popular.

Magazine-style themes are ideal for niche blogs which are regularly updated, and where the showcase of a particular category assists readers in navigation.

Gallery-style templates are perfect for photo-bloggers, artists and designers to showcase their works as in portfolio fashion.

All of the following templates make excellent use of functions and CSS styles to ensure magazine and gallery style themes showcase the potential of Blogger as a powerful publishing tool.

Dreamy

Here is a simple, elegant and fresh template by Dante araujo which includes automatic post summaries and thumbnails on the home page.

View Demo | Download Dreamy Template

Clean Milano

Here is an elegant design with an unusual colour scheme, particularly effective for a business/corporate blog. Converted from the WP theme by Jinsona, Falcon Hive's Blogger template is excellent and well worth a look.

View Demo | Download Clean Milano

Falkner Press

This design is simply fabulous! Converted by BloggerTricks from the original design by CamelGraph.com, this features automatic summaries, recent posts with thumbnails, a featured posts section and integrated YouTube embed.

View Demo | Download Falkner Press Template

The Latest

This is a clean, magazine style theme with read-more feature for posts on the home page and split header section (perfect for adding wide adsense banners above the fold).

Converted from WpThemeDesigner's template by Anshul.

View Demo | Download The Latest

Photoplus +

This template by Dante araujo is a fantastic template for photo bloggers, designers and artists! Only the images of each post are visible: these thumbnails expand into a larger version using the JQuery FullSize feature.

Be sure to check out the demo for this template: I am very impressed by this template as it demonstrates the full potential of Blogger as a web-publishing tool.

View Demo | Download Photoplus +

Infinity

When I saw the Wordpress version of this theme on Smashing Magazine, I wondered when it would be possible to see a conversion of this for Blogger. And finally it is here!

Originally designed by Vikiworks.com, this has been converted for Blogger by Blogger FAQs and features thumbnails for posts on non-item pages, integrated Flickr photostream and stunning graphics in the background.

View Demo | Download Infinity for Blogger

Gumball Special

A clean, magazine style theme, Gumball Special was originally designed by Evan Eckard and has been converted for Blogger by Blogger FAQs.

View Demo | Download Gumball Special

Magasin

A stylish magazine layout from Falcon Hive which has been converted from the original theme by PaddITsolutions.

Features a featured posts slideshow, automatic post summaries and excellent use of space in the sidebar.

Demo | Download

Zitizen

A fully functional template with featured posts slideshow and recent posts thumbnails in the header. This is converted from a template by Jinsona by Cahaya Biru.

View Demo | Download Zitizen

Showcase Light

A pale version of Dante araujo's Showcase theme, which includes automatic thumbnails and a fresh take on the colour scheme.

Demo | Download

Schemer Mag

This is a stunning, unbtrusive magazine style design which makes use of all available space in a truly elegant manner. Converted from the WP theme by Wpthemedesigner.com by Blogger Tricks.

View Demo | Download SchemerMag Template

Zinmag Futura

This is a truly stylish, magazine style theme converted from Jinsona's WP Theme by Cahaya Biru. With bold contrasting colours, a sliding featured posts section and integrated Twitter updates, this is a stylish and highly functional template.

Demo | Download Zinmag Futura

Cellar Heat Light Gallery

This is a pale, gallery-style version of the popular Cellar Heat theme by Evan Eckard, which has been converted for Blogger by MagzNetwork.

View Demo | Download

Mahusay

Here is a stunning, elegant template which has been converted from PaddItSolutions' WP theme by FreeBloggerTemplate. It features a slideshow "featured posts" section in the header and stylish presentation throughout.

View Demo | Download Mahusay Template

GameZine

This is a tremendous theme which really needs to be seen in action in order to be fully appreciated! Gamezine is converted from the WP theme by Jinsona Design by Cahaya Biru. It is designed to be a showcase style template for gaming Bloggers, and includes a wonderful magazine-style on the main page.

View Demo | Download GameZine

Bright and Colourful Templates

The use of strong, bright or contrasting colours can really make a blog design come to lie. Here is a selection of colourful and memorable templates to enhance the appearance of your blog:

Spring

A stunning design from RayCreations with tabbed navigation and high-res background image.

Demo | Download Spring Blogger Template

Magasin Diez

This cheerful, bright coloured theme uses few background images and is very pleasing on the eyes. Converted from the WP theme by Deluxe Templates.

View Demo | Download Magasin Diez

Night Whimsey

This three column layout was converted from the original theme by Scribblescratch by DeluxeTemplates.

Demo | Download Night Whimsey

Retrograde

Harking back to designs of the past, this bold and colourful template will brighten any blog! Converted from the original CSS template from Dawghouse Design Studio by Blogger FAQs.

View Demo | Download Retrograde Template

Paradise Valley

Fresh, colourful and beautifully designed, this theme by RayCreations is simple yet truly awesome.

View Demo | Download Paradise Valley

Nature Blog

A clean and fresh blog theme, converted from the WP Theme by WebDesignLessons by Deluxe Templates.

Demo | Download Nature Blog

Red Light

This bright and eye-catching template was converted from Template Lite's WP theme by Blogger Styles. It offers a three column layout with stunning large background image and many stylistic features throughout.

Demo | Download Red Light Template

Green Scrapbook

Converted from the WP theme by SimplyWP, this muted colour theme is simple yet effectively presented. Blogger template coded by Ipietoon.

View Demo | Download Green Scrapbook

Maroon King

This is a simple, red-toned theme was created for Blogger by Skinpress and offers a clean simplistic layout and an integrated feed link in the header.

Learn more and download

Minimal and Simple Designs

Colour, layout and typography alone can serve as the basis for a great design. These simple, minimalist templates use few (if any) images, ensuring that the blog content is the main focus of the readers' attention:

Scrappy

This fast-loading three column blog features three narrow columns and lots of eye-pleasing white space. Ideal for micro-bloggers, this was designed for Blogger by Dante araujo.

View Demo | Download Scrappy Template

Extreme Georgia

This simple typographic template was converted from Mentariwork's CSS template by Deluxe Templates.

View Demo | Download Extreme Georgia

Typoork

Antonio Lupetti of Woork has always had an exceptional eye for design. Typoork is his latest free Blogger template offering, featuring an exceptional clean layout and beautifully ordered typography.

View Demo | Download Typoork

Quick Chic

An elegant, vaguely feminine theme with minimalist layout. Based on the theme by Quick Online Tips and Bloggerized by ChicaBlogger.

View Demo | Download Quick Chic

Halo 01

This is a two column template of my own design which features a unique approach to presenting the meta-data for each post.

View Demo | Download Halo 01

Showoff

A simple, yet highly effective design which includes integrated Twitter updates beneath the header and navigation links. Designed by Dante araujo.

View Demo | Download Showoff template.

Showoff Light

A pale white and red version of Dante araujo's Showoff template.

View Demo | Download Showoff Light

The Summer

A simple two column theme with only one backgroud image which instead focuses on CSS based colour and typography. Designed for Blogger by Deluxe Templates.

View Demo | Download The Summer Template

Smash My Typo

Originally designed for Smashing Magazine by Alexander Dahlberg, this elegant minimal template was converted for Blogger by Blogger FAQs.

View Demo | Download Smash My Typo

Excess

This simple green-toned template is based on the CSS template by FreeCssTemplates and has been converted for Blogger by Blogger FAQs.

View Demo | Download Excess Template

Think Simple

This elegant simple theme features three columns and integrated RSS subscription links.  This was designed for Blogger by Deluxe Templates.

View Demo | Download Think Simple

Dark Designs

Templates of a dominant dark colour scheme work beautifully where bright contrasting images are presented in the posts.

Many designers choose to adopt a dark colour scheme for their blogs, though these templates may also be adapted for personal, business and technology-related niches:

Gotham Nights

This stunning dark theme was originally created for Wordpress by Evan Eckard, and has been converted for Blogger by Blogger FAQs.

View Demo | Download Gotham Nights

Black Power

This theme includes Twitter updates in the header, well-designed comment counts, plus integrated search, feed and navigation links. Converted from the WP theme by Skinpress by Falcon Hive.

View Demo | Download Black Power

Dark Mistry

Another stunning original design by RayCreations. Features a two column layout with unique styling of the different widget types and breathtaking main background image.

View Demo | Download Dark Misty

Tagland

A dark and serious theme by Dante araujo with a keen focus on each element of style.

View Demo | Download Tagland

Rock My World

Originally designed by Pelangipetang, this awesome grunge-style theme has been converted for Blogger by Deluxe Templates.

View Demo | Download Rock My World

Evidens

A stunning, simple dark theme which offers three columns in the layout and perfect attention to details. Originally created for WP by Design Disease and converted for Blogger by Blog and Web.

View Demo | Download Evidens for Blogger

Blue Diamond

This is an image-heavy, beautifully toned design featuring Twitter and RSS links in the header and a stylish approach to the layout. Converted from Skinpress' WP theme by Falcon Hive.

View Demo | Download Blue Diamond

BCute

Here is another conversion of a Skinpress theme by Deluxe Templates, this time a dark theme with a stylish and highly functional header section.

View Demo | Download BCute Template

The Conservative American

An unusual niche-style template with a patriotic feel, this two column template is not short of features including: automatic date, Twitter integration and navigation links. Converted by Zona Cerebral from the Wordpress design by Jeremy Buff.

View Demo | Download Conservative American

Zinmag Remedy

Converted by Falcon Hive from the Wordpress theme by Jinsona Design, this dark intriguing theme offers many great features, though requires a good deal of customization to install.

View Demo | Download Zinmag Remedy

Template Black

An original dark design by Templates Novo Blogger.

View Demo | Download

Woody

A wood effect template with semi-transparent backgrounds, converted from Frozr's design by ChicaBlogger.

View Demo | Download

Feminine and Flirty Designs

This round-up would not be complete without a selection of feminine and flirty designs for ladies who prefer a girly appearance to their themes:

WP Polaroid Pink

Adii's excellent WP theme was originally converted for Blogger by eBlogTemplates, and has been given a wholly feminine makeover by ChicaBlogger.

View Demo | Download WP Polaroid Pink

Meet the Chef

Gisele Jaquenod's designs are always cute, well designed and perfectly laid out. Here is her latest offering: Meet The Chef, a three column feminine design with unique header banner.

Read more and download

Flower Garden

This cheerful theme was designed by IpieToon and features a split sidebar, widgetized footer section and unique header banner (watch what happens when you move your cursor around...).

View Demo | Download Flower Garden Template

Nature Gift

This simple two column theme was originally designed by Top Tut and includes a beautiful header image. Converted for Blogger by BloggerThemes.

View Demo | Download Nature's Gift

Tired Girl

Tired Girl offers a beautiful header design and quirky approach to navigation. Designed by Skincorner for Blogger users.

View Demo | Download Tired Girl Template

Baby Cute

A cute theme by Ipietoon, which is perfect for those blogging about a new addition to the family. The PSD file may also be downloaded for customization of the header banner.

View Demo | Download Baby Cute

Vector Flower

A beautiful Blogger template offered by Klodian of Deluxe Templates, this two column template was converted from the original design by EzWpThemes.

View Demo | Download Vector Flowers

Girly Nature

This ethereal theme offers a beautiful colour scheme, and includes integrated search and RSS feed link. Converted from the WP theme by TemplateLite by Deluxe Templates.

View Demo | Download Girly Nature

Retro Book

A simple, retrospective design in sepia tones, this theme was converted from GetTemplate's original design by Chica Blogger.

View Demo | Download Retro Book

Floral Day

Subtle and feminine, this template was converted from SimplyWP's theme by ChicaBlogger.

View Demo | Download Floral Day

Glamorous

This original theme by Dante araujo offers a three column layout which can be easily customized by swapping out the background image. The PSD file is included for easy customization of the logo.

View Demo | Download Glamorous

Green Mile

I love the balanced layout of this subtle theme, which is based on the design by EzWpThemes and converted for Blogger by Deluxe Templates.

View Demo | Download

Water Color

With a stunning background image, tabbed navigation and stylish sidebar section, this template is impressive while pleasing to read. Converted from TemplateLite's original design by Falcon Hive.

View Demo | Download Water Color Template

Unusual Layouts and Styles

I love to see new design styles where the author has chosen to break out of conventional layout schemes. We tend to consider a blog layout as having at least one sidebar to the left, right or either side of blog content; that the header section should span the width of the blog, and other assumed layout options.

This set of themes defy convention: some are single column themes (ideal for showcasing photos!) while others do not appear like blogs at all!

Mainstream

Based on the WooThemes template, this Blogger conversion includes tabbed navigation buttons, social media links and stylish sidebar headings.

This has been bloggerized by WP Blogger Themes and is well worth a look!

View Demo | Download Mainstream

Launchpad

Are you launching a new blog soon? Launchpad is the solution to help potential readers subscribe for updates. You can write blog posts and simply upgrade your theme once the site is ready for launch.

This template was converted by ejner69 from ThemeShaper's original design.

View Demo | Download Launchpad

RS Garden

Please do take a look at the demo for RS garden to appreciate it fully - my screenshots do not do justice to this unusual theme!

Featuring a single, wide column on the home page and a narrow, left sidebar on item pages, this clean layout is ideal for photobloggers.

Converted from Rambling Soul's theme by BlogAndWeb.

View Demo | Download RS Garden

Photoblog

This simple one column theme is ideal for photobloggers and designers to showcase their works. Converted from ClipThePhotos' theme by Deluxe Templates.

View Demo | Download Photoblog

Stripped

This is a very clean, single column theme which features the post-meta-data in a column to the right of the post body and a widgetized three column footer. Converted from Nathan Rice's theme by Quite Random.

View Demo | Download Stripped

Halfbaked

This theme offers a highly unusual, fluid layout in which the sidebar and posts are separated by a central vertical line.

Converted from Guy Fisher's WP theme by Template GoDown.

View Demo | Download Halfbaked

Dark Flower

This unusual two column theme is left-aligned: a rare layout style in recent template design. It appears as a grunge-style notebook with highly stylized widgets in the sidebar and integrated navigation links. Converted from the EzWpThemes template by Deluxe Templates.

View Demo | Download Dark Flower

Tiny Studio

A narrow, single column theme converted from Pelangi Petang's template by Zona Cerebral.

View Demo | Download Tiny Studio

2Plus

Another left-aligned theme, this original design was created by Dante araujo. It offers a clean and simple layout with excellent use of contrasting colour and minified header logo.

View Demo | Download 2Plus

Travel Themed Templates

Here is a small selection of "travel" themed templates for Blogger, specifically chosen for those who wish to blog about their travels and world adventures!

76. Sailing

A bold, bright theme with integrated RSS link in the page curl. Converted from the EzWpThemes template by BloggerThemes.

View Demo | Download Sailing

Exotic Vacation

This is a beautiful, artistic template for travel bloggers. I particularly love the signpost for navigation around the blog! Converted from the WP theme by TemplateLite by Falcon Hive.

View Demo | Download Exotic Vacation

Lembrete

This notice-board style template was designed for Blogger by Lecca and features a split sidebar section.

View Demo | Download Lembrete

Traveling

Another template designed for Blogger by Lecca, this features a useful integrated Flickr photostream in the header which displays the latest Flickr uploads - perfect for updating with images on the go!

View Demo | Download Traveling Template

Travel and tour

Here is an elegant, simple theme for travel bloggers which features integrated navigation links and a quirky "polaroids" section in the footer.

Converted from Free CSS Templates' design by Deluxe Templates.

View Demo | Download Travel and Tour

Miscellaneous Templates

Here's a final selection of awesome free Blogger templates which were difficult to categorise elsewhere. All are of excellent quality and truly deserve a place in this showcase:

Community

An elegant and highly functional theme which offers integrated Twitter updates, email feed subscription and "SexyBookmarks" for easy syndication of posts.

Created by BieTempltes.

View Demo | Download 

Business Talk

This stylish blue business theme was originally designed for Wordpress by EzWpThemes and has been converted for Blogger by FalconHive.

View Demo | Download Business Talk Template

Brilliance

Simple, elegant and well laid out, this template will perform well for a multitude of blog niches. Converted from Blog Oh Blog's original template by Deluxe Templates.

View Demo | Download Brilliance

MobiPress

MobiPress in another feature-rich template from Cahaya Biru, with a bold colour scheme and interesting layout. This was converted from the WP theme by Jinsona Design.

View Demo | Download MobiPress

Notebook

This is a beautiful grunge-inspired theme by Ray Creations, which inuludes a stylized welcome message and integrated navigation links.

View Demo | Download Notebook

Hanging

Originally a WP theme by Web Design Lessons, this lush green theme was converted for Blogger by Deluxe Templates.

View Demo | Download Hanging

The Business Templates

A professional theme, this can be adapted to have 2-6 columns for all your widget needs. The header image also may be changed to suit the requirements of your blog.

Coded by OurBlogTemplates.

View Demo | Download The Business Templates

Zinepress

Based on Andrew Lindstrom's beautiful Wordpress theme, this Blogger conversion was coded by Blogger FAQs.

View Demo | Download Zinepress

The Clam Shell

An awesome theme with big bold icons! Converted from Michael Soriano's template by Free Blogger Template.

View Demo | Download Clamshell

Wiking

This is a simple, grunge-style theme with a huge RSS icon in the header, integrated navigation links and beautiful typography choices. Converted from the Skinpress theme by Dante araujo.

View Demo | Download Wiking

Papercon

This elegant white theme was created by Denshou and may be downloaded from BTemplates.com

View Demo | Download Papercon

Chocolate

This delicious template was coded by Lawny and is based on a PSD tutorial by PSDVibe.

View Demo | Download Chocolate

Typebased

Typebased is a beautifully elegant design, originally created by Woo Themes and bloggerized by BTemplates. This design features two columns in the layout, and post data is separated in a column to the left.

View Demo | Download Typebased

Acosmintech

This stunning, glossy theme is based on the original template by Alexandru Cosmin and converted by WP Blogger Themes.

View Demo | Download AcosminTech

Night Sky

This design includes a breathtaking background image and stylized sidebar column. Another intriguing and original design by Ray Creations.

View Demo | Download Night Sky

Vixilus

This grey and blue themed design puts the blog's description in central focus - a feature noted among portfolio blogs and websites - while the blog title is minimal in the upper left corner. An original Blogger design by Dante araujo.

View Demo | Download Vixilus

Tonos Cálidos

Last - and most certainly not least! - this amazing theme by Blog Amuki is adapted from Falcon Hive's excellent Zinmag Tribune template.

Tonos Cálidos uses the magazine template, but injects this with subtle grunge overtones and a warm colour scheme. This is even more beautiful when viewed in the browser, and would make an excellent choice for a portfolio blog or personal site.

View Demo | Download Tonos Cálidos

Final Thoughts

Blogger templates have truly evolved over the past twelve months. It's been a pleasure to find such great templates and talented designers who offer their works for free download in efforts to improve the resources available to the Blogger community.

Each of these templates is the product of hard work, patience and perseverance. Wherever possible, I have linked to the download page on the Blogger template coder's site and - where applicable - to the original designers website (in cases where templates have been converted from another platform). For any of the templates you download, be sure to check the license and adhere to any conditions of use. After all, attribution for the work of these talented designers is the least reward we can offer for their efforts!

If you have found this a useful or inspirational resource feel free to share, bookmark or re-tweet! I truly appreciate your help to spread the word about the posts you enjoy most from this site :)

Please also take a look at my previous showcase posts to find even more beautiful Blogger templates which are completely free to use:

• The Top 20 Free Blogger Templates of 2008
• 125 More Excellent Blogger Templates
• 12 Free Photoblog Templates for Blogger
  
• 101 Excellent Blogger XML Templates

Let us know which designs you love the most by leaving your comments below!

Image credit (top of post): Swisscan. 

16 Useful Twitter Tools for Blogger

Since it's launch back in 2006, Twitter has become a leading pioneer in the world of social media. Bloggers in particular find this service an invaluable tool for syndication, news stories and community conversation.

For this post, I have rounded up 16 of the most useful tools, tips and free resources to help you get the most out of Twitter through your Blogger powered blog.

Display your Latest Tweets

Visitors to your blog may also enjoy reading your Tweets, particularly if they are of relevance to your blog's niche subject.

Here is a selection of the best tools for displaying Twitter updates in your Blogger layout:

The Official Twitter Badges

Twitter provides an animated "Profile" badge which you can use to display your latest updates as a widget in your blog layout:

You can configure the size, colours and number of updates for your badge in the settings, then grab the code which can be pasted in an HTML/JavaScript widget in your Blogger layout page.

Another alternative is the Twitter "MySpace" gadget, which uses Flash to create a different appearance to the gadget:

We can copy the code generated for this widget and paste into an HTML/JavaScript widget in our blog - it's not limited only to MySpace profiles!

Blogger Widgets and Gadgets

Another way to display your Twitter updates is to install a Blogger widget or gadget in your layout. These can be configured to display as few or many Tweets as you choose, and require only your Twitter username to install:

Simple Twitter Updates Widget
This was the first Twitter application I created for use with Blogger blogs and still remains one of the most popular tools on the site! To install, simply fill out the form and click "Add Widget" to install automatically in your layout.

Twitter Gadget for Blogger (EN)
This gadget works in much the same way as the Twitter Updates widget but is simpler to install and can be reconfigured after installation.

Twitter Updates Gadget (ES)
Daniel Ikeda has made a Spanish translation of my Twitter Gadget for easy installation.

TwitSig - Your Tweets in Pictures

TwitSig is an interesting free service which allows you to display your latest Twitter update as an image. You can add this in your layout as either an HTML/JavaScript widget (using the code generated on the TwitSig homepage) or as an Image gadget using one of the alternative backgrounds.

Here's an example of the default Twitsig badge:


This one uses magnets:


Here's another using a fortune cookie:


Visit TwitSig to generate your own updating Twitter updates image.

Add a "Follow Me" Badge

To encourage your blog readers to follow you on Twitter, try adding a "Follow Me" badge which links to your Twitter profile page.

Here are some useful tools and badges which you can use to add a linked "Follow Me" badge to your Blogger layout:

Twitter Follow Badge by Go2Web"0.com

Here's a new and interesting way to add a non-intrusive "follow me" badge to your site, like this:

The badge can be configured for different colour schemes, height from the top of the page and left/right alignment.

To add the badge to your Blogger blog, visit the TwitterFollowBadge page and fill in the form to your requirements. This will generate some JavaScript code which you should add just before the closing </body> tag in your Blogger template. However, in it's native form this code will not display in Blogger!

Instead, we have two options:

1. Paste the JavaScript into an HTML/JavaScript widget instead
2. Replace <-- and --> in the generated code with &lt;-- and --&gt; (this enables the script to function correctly and display the badge in your page)
   

TwitterButtons.com

TwitterButtons offers several pages of free "follow" buttons to help your blog readers follow you on Twitter:

Simply add your Twitter ID in the space provided and TwitterButtons will generate the code to add the button of your choice as a linked badge in your layout. Paste the code into an HTML/JavaScript gadget in your layout (or directly in your template if preferred!) and you're all set.

Twitter Buttons by Vincentabry.com

This site offers 31 different styles of Twitter buttons which you can add to your blog. Although the site is not in English, the Twitter buttons are.

To add these to Blogger easily, use your favourite image in a Picture gadget in the layout, then link this to your Twitter profile:

Add "Tweet This" Links to your Blog Posts

Twitter is an excellent service for syndicating blog posts and useful or interesting articles. Help your blog readers share their favourite posts on Twitter by providing a "Tweet This" link for each of your blog posts.

Here are three different ways you could do this:

Add a simple "Tweet This" link

The simplest of all Twitter syndication links is a text link which uses the URL and title of your blog post:

There are of course many ways in which this link could be styled, and where it could be positioned. For now I'll explain the most basic method of installation.

Go to Layout>Edit HTML in your Blogger dashboard and check the "Expand Widget Templates" box.

Then using your browser search function, locate the following line of code (or similar):

<div class='post-footer'>

Immediately after this line, paste the following section of code:

<a expr:href='"http://twitter.com/home?status=Reading " + data:post.title + " @YOUR-TWITTER-USERNAME " + data:post.url' title='Tweet it on Twitter'>Tweet This</a>

Be sure to replace "YOUR-TWITTER-USERNAME" with your own username!

Then save your template. This will add a "Tweet This" link in the post-footer section beneath each blog post. Readers can click this link to post a pre-filled template "Tweet" like this:

Image based "Tweet This" Link

If you'd prefer to use a stylish button or larger image link, you can simply replace the text from the previous example with an image tag, like this:

<a expr:href='"http://twitter.com/home?status=Reading " + data:post.title + " @YOUR-TWITTER-USERNAME " + data:post.url' title='Tweet it on Twitter'><img src="http://image-host.com/your-image-link.jpg" alt="Tweet This" /></a>

Here's a great example of this effect on PSDrecipes:

Using Short URLs in "Tweet This" Links

Many of us use lengthy domain names which take up much of Twitter's 140 character limit for the tweeting of posts. 

A while ago I posted a tutorial explaining how to enable short URLs for "Tweet This" links using Bit.ly. This explains how to add a similar text/button/combination link for each of your Blogger posts which adds a shortnened URL to the Twitter post template instead of the regular, lengthier one.

Enable "Tweetbacks" in your template

Our Blogger templates already support "Backlinks" (known as "Links to this post" in Blogger). However, these backlinks don't display links generated on Twitter which usually include shortened URLs.

Dan Zarella's original "Tweetbacks" script is JavaScript based and can be used in Blogger templates to display tweets about your post. It is very easy to install and requires no customization (unless you wish to style how the tweetbacks are displayed).

To add "Tweetbacks" to your Blogger blog, simply copy the code below and paste this in your template where you would like the Tweetbacks to appear:

<script src="http://danzarrella.com/tb.js"></script>

The simplest installation is to paste this code into an HTML/JavaScript widget in your Blogger layout. This will display Tweetbacks on every page of your blog, and will show the Tweetbacks attributed to each individual page.

Another possibility is to add Tweetbacks beneath the "Links to this post" section of your template, effectively grouping these tweets with backlinks to each individual post.

To achieve this, go to Layout>Edit HTML and check the "Expand widget templates" box. Then search for the following line in your template:

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

Immediately after this line, paste the following section of code:

<h4>Tweetbacks<h4>
<script src="http://danzarrella.com/tb.js"></script>

This will add Tweetbacks with the appropriate title just above the "Links to this post" section of your layout.
 
Note: you must configure "Backlinks" to "Show" in the Settings>Comments section of your dashboard to enable this method to work.

Add TwitPic Updates to your Sidebar

TwitPic enables us to share images to Twitter, which can be posted by phone, using the TwitPic API or directly from the TwitPic site.

I've developed a gadget which you can use to display your recent TwitPic updates in your Blogger layout which is easy to install and can be configured to your needs:

Use this link to add TwitPic Updates to your Blogger blog.

Add "Real Time" Twitter Updates

Being a fast, virtually instantaneous stream of updates on any given subject, many of us like to keep up with references, news and re-tweets in real-time, rather than having to update or revisit Twitter search at periodic intervals.

Here are two highly useful gadgets for blogger which can be used to display real-time updates in your actual blog layout:

Twitter Search

Developed by 32Hours.com, this gadget offers a stream of updates for a given search term, hash tag or username.

Simply add the gadget to your blog and change the terms for search after installation (your readers can use this too!):

Visit this page on 32Hours.com to learn more about this gadget and install in your Blogger layout.

Juitter Gadget - real time updates with configurable search terms

Based on the excellent Juitter JQuery plugin by Rodrigo Fante, this gadget enables real-time Twitter updates based on the search terms you specify on installation. You can choose to display tweetbacks referencing your Twitter username, a particular search term and even combinations of terms:

This gadget does not contain ads or added links, and can be configured to display exactly as you want.

Click here to add this Juitter gadget to your blog.

Have I missed anything out?

I hope I've provided a good round-up of Twitter tools which you can use to "Twitterize" your Blogger powered blog. If you feel I've missed out any Blogger-enabled tools, please feel free to let me know about these in the comments below.

Free HTML and CSS Tutorials at BeepTheGeek.com

Many of my tutorials here on Blogger Buster help Blogger users learn how to customize their Blogger templates by manipulating the template code. When customizing our Blogger templates, we need to use a combination of HTML tags and CSS in addition to Blogger template tags.

While I try to make my tutorials easy to follow, I understand these are also contextually aimed at a specific task, and that many of you would like to learn more about HTML and CSS in general in order to make your own unique customizations and templates.

Over the weekend, Gagan of BeepTheGeek.com let me know about a new course he has started to help bloggers learn the basics of HTML and CSS: HTML Tutorials. This is a weekly course specifically designed for those who want to learn the basics of web design which is just as important for customizing Blogger templates as designing stand-alone web pages.

Beginning with an introduction to HTML tags, Gagan hopes this free online course will enable everyone to understand the basic concepts of HTML and how this may be applied to blog template design:

The series will include all HTML concepts and will teach you everything about HTML along with CSS tips and tricks for fast and easy designing. I’ll start from the basics so that each and every concept is clear to you. By the end of the series you will be able to edit your templates.

At the end of the course, Gagan will publish the entire series of tutorials in an eBook for easy reference. 

I hope this free course will be of interest to those of you wishing to learn more about Blogger template design. Pop over to BeepTheGeek.com to take a look at the course and let us know what you think.

Image credit: eelke dekker

Related Posts with Thumbnails using LinkWithin

Displaying links to "related posts" beneath individual entries on our blogs is a tried and trusted method of providing useful and interesting reading material for our readers.

I've written about several different methods which Blogger users can choose to display related posts - all of which perform their function well enough. But after seeing several of my favourite sites displaying links to related items with thumbnails using LinkWithin's free service, I was intrigued to discover how well this may be adapted for use with Blogger.

About LinkWithin

LinkWithin is a free service offered by a small team based in New York. This free service enables us to display related posts with thumbnails below our blog posts (the thumbnail is taken from an image within the post it links to).

We retrieve and index all stories from your blog archive, not just recent stories, making them accessible to new or casual readers of your blog who would not otherwise encounter them.

The posts chosen to appear as related posts are based on several factors including:

• Relevance
• Popularity
• Recency

At present, LinkWithin is not ad-supported and is completely free to use.  As explained on the FAQ page:

We plan to introduce revenue-sharing features in the future, but they will be optional.

At present, there is little documentation for us to be certain of these factors, though after testing LinkWithin in a few different sites, I'm pretty impressed by the choices generated for each post!

Here is an example of how LinkWithin functions for WeLoveBlogger.com:

Why LinkWithin may be a more ideal solution than other related posts solutions for Blogger

The "related posts" solutions for Blogger which I've used until now have all relied on label feeds. That is, the recent posts generated by such scripts collect recent posts from the same label (category). This often means that posts deeper within our archives are generally ignored, even when they may be far more relevant than the more recent posts displayed.

LinkWithin parses all posts from our blogs, and chooses the posts to be displayed using more complex and relevant factors. This ensures far greater relevancy which is better for our readers and also ensures that older posts are included in the display.

How to add LinkWithin Related Posts to Your Blogger Blog

If you're using a standard, uncustomized Blogger template, the method for installing LinkWithin is fairly straightforward. Simply visit the LinkWithin website, fill in the form on the right-hand side (choosing Blogger as your platform) and follow the instructions provided.

This will install the related posts in your template as a gadget beneath the main posts section, though you'll find the "You may like these related stories" section will be displayed beneath each of your blog posts (before the post-footer section). It will also display on each and every page of your blog, including the main, archive and search pages.

Custom Installation of LinkWithin for Blogger templates

If you prefer to display your related posts only on item pages or have a customized, non-standard Blogger template, here is how you can install LinkWithin:

1. Visit the LinkWithin website and fill in the form on the right-hand side. For the "platform" be sure to choose "Other":
   
   
   
   
   
2. On the next page, you will find a script like this is generated. From this code, you need to write down your unique "site ID" for later use (or copy this to your favourite text editor):
   
   
   
   
   
3. Once you have a note of your Site ID, go to Layout>Edit HTML in your Blogger dashboard and ensure you have checked the "Expand widget templates" box.
4. Using your browser's search function, locate this tag (or similar) in your Blogger template code: <div class='post-footer'>
   
   Depending on the template you are using, this tag may vary slightly though you should usually be able to locate 'post-footer' in your template code.
5. Immediately before this line, paste the following section of code, replacing "YOUR_SITE_ID" with the ID number you have noted down for your site:
   
   

   <b:if cond='data:blog.pageType == "item"'>
   <script>
   var linkwithin_site_id = YOUR_SITE_ID;
   (function () {
   var elem = document.createElement('script');
   elem.type = 'text/javascript';
   elem.src = 'http://www.linkwithin.com/widget.js?rand=' + Math.random();
   document.getElementsByTagName('head')[0].appendChild(elem);
   })();
   </script>
   <a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Blog Widget by LinkWithin" style="border: 0" /></a>
   </b:if>

6. Preview the changes you have made before saving your template. The LinkWithin gadget should not display in the preview; furthermore, if there are any errors in the installation you will be able to see before attempting to save.
7. If all is well, save your template and visit an item page in your blog: you should be able to see related posts showing up beneath your blog posts.

Support for LinkWithin's related posts

While I can help with installation for LinkWithin in Blogger templates, I'm not able to help with specific problems with the script.

Luckily, the LinkWithin team offer a good support service via email:

If your blog uses a non-standard custom template/theme, we will need to add support for your blog manually, and we can do this only if the widget remains installed on your blog. Please email us at support AT linkwithin DOT com, and we will fix the problem, usually within 1-2 days. Thank you for your patience!

At the moment, it appears we can only display three related posts. Hopefully LinkWithin will offer the option to display more (or less) items in a future version of the script.

Why I'm not using LinkWithin yet...

LinkWithin is a very useful solution for Blogger users wishing to display links to related posts in their blog. I recommend this service and will be using this in a future release of Blogger Buster.

My current template is highly complex and has served me well for many months. However, there are several new (and upcoming) customizations and new features for Blogger which may not work so well in this design. I'll explain more about this in a future post when the site changes are closer to completion.

Are you using LinkWithin? What do you think about this service?

If you're already using LinkWithin (or plan to use this soon), please let us know your opinions of this free service, and how well you think this adapts to displaying posts in your blog by leaving your comments below.

Recent Comments and Recent Posts Gadgets for Blogger

Since Blogger updated the API for gadgets, I've been hard at work creating new and useful gadgets for Blogger users.

My first two successful gadgets made use of the google.blog function in order to retrieve and parse post and comment feeds for the blog in which they are installed. These gadgets are now available for installation through the Blogger gadget directory and have even been featured on Blogger's official Featured Gadgets blog!



These Recent Posts and Recent Comments are very easy to install: simply follow the links for the gadget you would like to add, and choose how many posts/comments you would like to display:

When you press "Update" you will be presented with an example of how the gadget will appear in your blog, and can then proceed to save your gadget.

Recent posts with thumbnails

Aneesh from Blogger Plugins has created a wonderful "Recent posts with thumbnails" widget which displays the media:thumbnail for each post.

This is a wonderful and very user-friendly gadget which even includes details of comments! Install the Recent Posts with Thumbnails gadget by following this link.

Known Bugs

As the API is still rather new, there are a few minor bugs with my gadgets. These are the issues I'm currently aware of, which will be updated with new information once it's available:

Need to press "Update" to ensure preferences are configured
This is an issue with all gadgets which should be resolved quite soon.

Some gadgets don't display in Chrome
Several people have emailed me about this, and to be honest I don't know why this is happening. I'm pretty certain the Blogger team are aware of this issue and hope for a fix soon.

Gadgets may "spill over" in customized templates
The width of gadgets is determined by the width of the sidebar, and sometimes ignores any padding/margins applied to the "widget content" section. I've tried many ways to fix this, but so far my only solution would be to apply margins within the gadget, making it narrower (and unsightly) for those who use regular templates.

Any bugs/other issues?

Please let me know if you have any other problems with my gadgets by leaving your comments below.

Recent Posts with Thumbnails Widget by Engadgeteer

Tony from Engadgeteer has sent news of a great new widget developed for Blogger users: a recent posts widget which includes thumbnails from your posts.

Here is a preview of how the gadget would appear in your blog (based on recent posts from Blogger Buster):





The gadget is very easy to install in your blog: simply visit the widget generator page and edit the settings as required. You can preview your feed and then add it to your blog sidebar using the "Add to Blogger" button on the top right of the page.

Thanks Tony for letting me know about this widget!

New Gadgets for Blogger

Over the past few weeks, I've been working with Bloggers improved API for Gadgets and have now completed work on several useful gadgets which can be installed with just a few clicks.

I've found that the Gadget API offers a much better interface to the end-user than HTML/Javascript widgets (although it takes me far longer to create Gadgets than widgets!). While they are a little more difficult to create, I think the end-product is worth the effort:

• Gadgets can be added from within the Blogger dashboard (so we don't need to use search engines, or visit the owner's site to install).
• Gadgets are easily customized, and can be easily reconfigured after installation
• The new API includes the ability to include Blogger post and comment feeds for the blog in which they are installed.
• Developers can ensure gadgets blend with the theme in which they are installed using "Skins" parameters.

How to install Gadgets in your Blogger blog

Gadgets are as easy to install as Blogger's default widgets. Simply go to Layout>Page Elements in your Blogger dashboard and click the "Add a Gadget" link in the area where you want to install your gadget.

A pop-up screen like this will appear:

From here, you can browse gadgets in the directory, search for gadgets of interest, or add a gadget using the URL where it is hosted.

Once you have chosen a gadget to add, you should be presented with a configuration screen like this:

There will be different options here, depending on the gadget you have chosen to install. This example shows the configuration options for my Twitter Updates gadget.

At the very least, you should be able to alter the title of the gadget, however most gadgets have other configuration options available. A preview of how the gadget will look in your blog will appear below these options (do bear in mind that the width of the gadget may be wider when displayed in your blog if the area in which it is added has larger dimensions than the preview screen).

Once you've changed any settings, be sure to click the "Update" link in order to see the changes appear before you save. The gadget will then appear in your blog, and it's position can be changed in the Page Elements section of your dashboard.

Blogger's Featured Gadgets

The Blogger team have created The Featured Gadgets blog which details gadgets of particular interest. Some of these gadgets are also included in the Featured Gadgets section of the Gadget directory (available when you choose to add a new gadget through your dashboard).

I'm thrilled to find four of my own gadgets are "featured": Recent Posts, Recent Comments, Picasa Photostream and Twitter Updates, and look forward to seeing the efforts of other Blogger developers in the future.

Developing Blogger Gadgets

The Blogger team have created extensive documentation for those hoping to develop gadgets for use with Blogger in addition to the extensive resources for creating Google gadgets.

I've also begun a three-part series for creating Blogger gadgets over at Blogging Tips to explain the basics including how to utilize Blogger feeds in our gadgets, use skinning parameters and user preferences for customizable gadget utilities.

Once you've created a Blogger gadget, you can add it to the Blogger Gadget directory using this link. Your gadget should appear in the public directory within about 30 minutes of successful submission and the best gadgets will be featured in the Featured Gadgets blog.

Gadgets I'm working on now

In addition to the four gadgets mentioned above, I have a further three gadgets which are almost ready for public release: a Flickr Photostream Gadget (install with your Flickr username, not the URL of your feed); a TwitPic gadget (to display your recent TwitPic updates) and a Juitter gadget, for real-time updates which mention your username or other search terms.

Over the next few days, I'll update with posts for all my gadgets with full details of functions and installation so you can add and enjoy these gadgets in your Blogger powered blogs.

Your thoughts?

I hope you will enjoy using Blogger gadgets which use this improved API and look forward to seeing gadgets which other developers create.

If you've created a gadget for Blogger or if there's a particular gadget you'd like me to create, please let me know by leaving your comments below.

Housekeeping - Updates, Issues and Forthcoming Features

I realize my posts have been rather scarce lately, mostly because I've been so busy with work and other commitments which have left me so little time to write posts for this blog.

So let me explain what's happening with Blogger Buster at the moment, along with a few hints about what you can expect in the forthcoming weeks.

Problems with my file hosts

Many of you have reported problems downloading templates and other files which are hosted on http://bloggerbuster.com.

This is because my hosting service has been completely overpowered by the sheer number of requests for files and has been temporarily suspended. I need to transfer all of my files over to a new (enhanced) hosting account which can cope with this level of bandwidth, but I'm afraid it's taking a little longer than expected due to some issues I'm having with FTP.

I may well need to move all these files to a completely different location, and if so, I will of course update with the new URLs you'll need to download these files. My main concern is to find a reliable file host for all our file-hosting needs, and which won't impact too much on the running of this site. Please bear with me while I make new arrangements for these files.

What I'm working on now

There have been several developments for Blogger (and perhaps more planned for coming months), so as you may imagine I've been working on these developments to create useful resources and tutorials for you all.

In particular, I've been learning a lot about the Gadget API for Blogger. This enables us to create interesting, useful and interactive gadgets for Blogger using a system which (I feel) is a great improvement to using widget installers.

I've created a few Gadgets for Blogger now which I'll post about over the coming days (though you may already be able to find some if you search for "Blogger Buster" when adding a gadget to your layout).

Update #1
I've just managed to get a new laptop, and have spent the past few days transferring over my files and settings. Finally, all is fixed so I'll have a new post (or two) up this weekend :)

Blogger is still looking for web designers and artists!

A couple of weeks ago, the Blogger team tweeted a request for web designers and artists who are interested in designing templates for Blogger.com.

If you're a web/blog designer or artist, this is something you may well want to check out. You can find out more and register your interest in participating on this page.

Requests for tutorials and gadgets

If you have any particular requests for tutorials or Blogger gadgets, please let me know about these by leaving your suggestions in the comments.

While I can't promise to fulfil every request, I'll try to do the most popular ones over the coming weeks.

There's so much happening at the moment and many more updates in progress which I really look forward to showing you in the future.


Thank you all for visiting, subscribing and sticking around!