Godaddy Cheap Hosting

Friday, 4 April 2008

54 Inspiring and Original Blogger Designs

When I begin devising a new Blogger template design, the first thing I do is look for inspiration. CSS galleries and design showcases are among the first places I visit to be inspired, but one thing I have noticed is that there are rarely any Blogger powered designs on show!

So over the past few weeks, I've been searching for the best Blogger powered web designs to provide a source of inspiration particularly for those who use Google's Blogger platform.

In this article you will see 54 unique and inspiring Blogger powered designs: some of these seem based on generic/free templates, while others are so far from the generic norm that it was difficult to believe these are powered by Blogger at all!

For your visual pleasure, here are these 54 excellent Blogger powered designs, organized by category. I hope you enjoy looking through these designs as much as I did finding them!

My Favorite Five

These designs are my absolute favorites of the bunch, whose designers should be particularly proud of the excellent overall appearance and functionality of their blogs:

Woork

Can you believe this site is powered by Blogger? Woork is a magnificent design, and the content is truly awesome! I was glad to have found this site to be able to subscribe and read these great posts, not to mention the inspirational design this is packaged in...

La Blogueria

This monochrome design is truly stunning in every way. SO much work has gone into making every aspect of this design fit with the main theme. Just take a look at the animations and mouseover effects. And don't forget to take a look at the camera-phone in the top left of the screen...

Lawrie Malen

This mere screenshot cannot possibly give justice to Lawrie's fabulous design. This one really takes my breath away...

Powered by Flash (yes, I did say flash!), this unique Blogger design is truly inspirational. I have never seen a blog quite like this before, much less one which utilizes Google Blogger!

Uptime Studio

This site is a fabulous example of how Blogger may be used as a CMS (content management system).

This charitable photography site has been featured in many CSS galleries and uses W3C valid HTML markup. The slideshows are truly stunning and contribute to the overall make up of this beautifully designed site.

Kokogiak

Kokogiak's design uses so many different functions, including show/hide div animations, Google maps integration, site search... It's wonderfully laid out and one of my favorite ever designs in terms of functionality and a joy to navigate.

Clean/Simple Layouts

This section features designs which are clean, simple and well laid out.

Reddit All

RedditAll

This is the personal blog of Alexis Ohanian (who designed the Reddit alien logo).

Metamorf

I love the rounded corners and subtle color scheme at play here. It's such a pity the author decided not to continue using this blog...

Why Don't You Blog

Simple, yet so effective.

Twitter Blog

Never underestimate the power of a simple header image combined with striking images in posts!

Infinite Thinking Machine

This clean layout perfectly enhances the educational content of this resource site.

Meta Microcosmos

For me, this design sums up the process of "blogging as journalling". Despite the clean simplicity, there is still excellent attention to detail. Look in the top right hand corner while the page is loading for an example...

Gem @ Blog

It's so easy to find your way around this clean design. The label cloud at the top of the page makes it easy to understand what this blog is all about, while the static link to the top of the page (bottom right) is a touch of classy usability.

Dev Blog Zone

A clean and professional layout which fits perfectly with the theme of code and development explored through the articles presented here.

ChaseJarvis

Chase Jarvis' blog was recently featured in Blogger's Blogs of Note. I love how the pale design perfectly sets off the photography and images in the posts. It's well integrated into Chase's complete website, so you can barely tell you are leaving Blogger hosting when clicking on the tabs in the navigation section.

Ficcionalista!

I adore the beautiful simplicity of this design. It's so clean and uncluttered, and the placement of every element seems so well thought out.

Dark Designs

In contrast to the previous set, these designs use darker color schemes to great stylistic effect.

Iran Graffiti and Urban Art Report

This is a really unusual design, utilizing expandable DIV sections for different areas of the blog. Iran Graffiti showcases urban art caught on camera in Tehran. It really is worth a visit to see some of the stunning designs featured in this blog.

Fonsite

This striking design makes great use of PNG transparency and even renders correctly in Internet Explorer.

Black Zedd Basic Literature

A cynically corporate design (you'd need to read this blog to discover why...) which is pulled off beautifully! The drop down menu and scrolling news ticker really add to the depth of this design.

Second Life First Person

I always love to see how people use the Blogger templates I provide here at Blogger Buster, and this customization is truly an excellent example of what can be achieved with a little imagination!

Feminine Designs

This set of Blogger powered designs are feminine, girly and inspired by women's interests (candy colored inspiration for all the lady bloggers!)

Flair in the City

I've always admired Angel's Blogger powered design which was originally based on one of Jackbook's Wordpress conversions (though you really can't tell at all which one this was!). Every element of this blog is styled to pretty perfection with an excellent choice of color scheme which really sets of the great content. If only all fashion blogs were so well designed...

Xiaxue's Blog

Xiaxue

Xiaxue's blog is beautifully designed and is such a great presentation of her personality!

I'm Just A Blogger

I'm Just a Blogger

This is such a unique and feminine design. The styling in the header is reflected throughout the template, and the bright colors complement the author's personality in vivid technicolor.

Homeschool Diaries

A lighthearted design makes this homeschooling blog a fabulous place to learn of this mommy's experiences.

Hip Mama's Place

This "Mommy Blog" is dedicated to fashionable mummies and their trendy offspring.

Girly Up The Web

A couture designers guide to business, life and all things girly.

A Woman In Full

This design is truly a work of art. It seems inspired by 1950's style movie posters and is very eye-catching!

A Mere Trifle, My Dear!

Although this is quite a busy design, I love the overall theme of nostalgia: everything is drawn together, from the flock style wallpaper to post images and sidebar icons.

Immoral Matriach

An eclectic combination of old meets new in this striking personal blog design.

Musicians/Artists/Photographers

This section showcases some of the best Blogger powered designs written by musicians, artists and photographers.

Throw The Fight

This blog utilizes flash, YouTube and other stylish elements in such a great way! Blog posts provide news to fans of the band, another great example of how Blogger may be utilized as a CMS.

Jupiter One

Here again, flash is used in the header section to provide fast loading background music.

Dangerous Muse

I love the effectiveness of this simple design, especially the huge "dates" which overlay the actual posting date.

Project 100 Animals

The simple backdrop is the perfect canvas to highlight the beautiful artwork showcased here.

Tehran Walls

A striking design showcasing urban street art in Iran.

Mid East Collective

A striking, graffiti style header combined with ultra bright colors in the sidebar creates an eclectic mix.

Il Disegno

A Manga-inspired blog about design, with intricate attention to detail.

Fabrizio Fareze

An excellent showcase of photography is perfectly enhanced by the Polaroid styling of each individual post.

Alberto Montt

Here again we see how a simple clean layout can perfectly set off such beautiful artwork. Each post is so well designed with each image framed and styled so well.

Miscellaneous Designs

A final collection of Blogger powered designs which were difficult to categorize. All are excellent and inspiring in some way.

ts0

Thom Shannon's blog screams simplicity, yet is so aesthetically pleasing in structure and form.

Obviously (The Obvious Blog)

Obviously

This is the official blog of Obvious, the company behind Twitter. I love the parchment style background combined with the striking red logo.

Odeo Blog

Slick and usable, this blog is branded with Odeo's striking logo and fits perfectly with the main site's theme.

CrazyBob.org

This design is so sleek and modern, it seems to ooze professionalism.

Grape Digging Sharon Fruits

This design really breaks convention! It's almost as though the blog posts are printed as a label on the jam-jar!

Spoiler-TV

Spoiler TV

This is just one in a series of interlinked "Spoiler TV" blogs written by Dark UFO. It's really hard to tell that these blogs are hosted by Blogger, especially with the attention to detail, the use of DOM tabs in the sidebar (which change to display recent posts, feeds, stats, translations and so on) and the slick menu bars.

Mi-Microcosmos

Another stunning design by Yo Misma which encompasses the personality of this creative blogger in both background and attention to detail.

World United Bloggers

A collaboration of bloggers from all corners of the world whose message is clearly employed in the striking header. Navigation is simple and well styled, while the sidebar sections are well organized and easily distinguished from the main content.

Ask The Admin

This blog has so much personality! Throughout the design and blog posts are funny illustrations, cartoons and such which perfectly enhance the theme of "geeky humor".

Los Malditos Samurias de Gallaecia

For me, this Blogger powered design is Eastern inspired bliss! I love the way even each post title is styled according to the theme; blog authors have their portraits framed in the sidebar and the header is just... amazing!

Mike Durrett Confidential

The style of this humor blog reminds me of Presidential campaigns, though everything on this site feeld as though it's been placed in the correct area. Even the images and quotes in posts are positioned well.

Inzitan Blog

This blog is based on the Magic Paper template, but with a little adaptation this becomes so much more beautiful. By adding the image of the little girl and the flash functionality to the header section, the author has really made this template come alive.

Tech In-Law

Here is another Blogger powered design based on an existing template. The unique header design goes a long way to explain for the casual visitor exactly what this blog is all about, while the clean content section is easy to navigate.

Fresh

The title of this blog sums up the design completely. Featuring a cool color scheme and no clutter whatsoever, this is a breath of fresh air.

Awful Announcing

One of the things I love most about this design is that even the ads complement the general theme! The over-sized navigation buttons near the header set this apart from others of a similar design.

Basic Instructions

Scott Meyer's cartoons are brought to life online in this hilarious blog! Each post is a self-contained and perfectly crafted piece of art which will have you rolling on the floor in laughter! This design is mostly monochrome, with the only elements of color appearing in the footer section as links to Meyer's other sites.

The iseen blog. unsaturated!

the iseen blog

Vahagn Mkrtchyan's blog is a creative visual resource about art, design, architecture, photography and more. Each post is almost a work of art in itself, stylized perfectly to match the overall theme of rounded corners, use of color and general style.

Final Thoughts...

While writing this post, I came across even more excellent designs and had to delay publishing so I could include these too! I know there are many more excellent Blogger powered designs to be discovered and would love to follow up this article with another in the near future. So if you are especially proud of your own Blogger powered design (or know of another blogger's work you would like to see showcased here), feel free to drop me a line or leave a comment below.

If you have enjoyed this post please consider adding this to your favorite social bookmarking service, or subscribe to the feed and receive free updates of new Blogger related articles as they are posted. As always, I would really appreciate your comments and opinions, so feel free to let me know what you think by leaving your comments below.

Thursday, 3 April 2008

Blogger's New Directory of Gadgets and Widgets

Blogger will soon upgrade the widgets available for our blog layouts to include all available Google gadgets. An impressive library indeed!

You can currently see this in action in Blogger in Draft: rather than being prompted to "Add a new page element" to an area of your blog, you will see the link to "Add a Gadget" instead.

What's more, the pop-up box has been given a whole new makeover, with oversized icons to hint at the functionality of the gadgets on offer.

There are literally hundreds of Google Gadgets available to use in your Blogger layout. These are organized by category, though you can also use the integrated search function to easily locate the perfect widget for your needs.

The familiar "Page Elements" now feature in the "Basics" category, including the much used "HTML/JavaScript" widget and the new "Blog List" (which you can use to add an interactive blogroll of your most read blogs).

So what new gadgets are available?

There are literally hundreds of gadgets available in each category, so I'll outline a few to illustrate the vast range of new features on offer:

News

Digg 2.0: Feature top news stories from the Digg homepage which you can organize by category to suit your own blog's subject matter.

BBC News Feeds: This tabbed widget allows you to display between 3 and 15 headlines in different categories.

New York Times Home and Garden: Another tabbed widget to feature news headlines from this unusual news source.

Tools

Wikipedia: Adds a search function for your readers to search Wikipedia. Features different language options and the ability to open search results in the page.

Calorie Calculator: An easy way to monitor your daily calorific intake.

Bandwidth Speed Test: I like this one! This will offer statistics of your broadband speed to check how effective your ISP really is!

Communication

Google Talk: See your contacts and send instant messages to your friends.

TeleMessage SMS Sender: This is a great idea! Offer your readers a way to send SMS from your blog (including international numbers).

Messenger: MSN Live Hotmail, Messenger, Spaces and Search widget without ads.

Fun and Games

PostSecret Photo Slideshow: This is my favorite gadget in this section, which displays a slideshow of postcards from the popular PostSecret blog.

Pacman: Play the classic arcade game on your blog!

Simpsons Millionaire: Play a Simpsons themed version of the "Who wants to be a Millionaire game!

Finance

Google Finance Market Summary: 'The original' gadget view of Google Finance's Market Summary. With support for Google Finance Canada, and custom height control.

Stock Ticker: A live stock ticker with real time quotes from Yahoo! Finance.

Money Tip of the Day: Daily tips about finance and money matters.

Sports

Sports Photos of the Day: Unofficial sports news in photos from Reuters.

Top 10 Digg Sports Stories: The ten most popular stories about sports as voted by Digg's users.

NFL Cheerleaders: Saucy photo's of NFL's hottest cheerleaders...

EPSN Tabbed Sports Feeds: A tabbed news widget from EPSN.com which is completely customizable to suit your needs.

Lifestyle

Top 5 Movies at the Box Office: Get a list of top 5 Hollywood movies at the box office this week.

Free Coupons Finder: Find free coupons, promotional codes, printable coupons, grocery coupons, restaurant coupons, coupon codes, and supermarket coupons.

The Bart Board: This is a fun widget indeed! Features Daily Phrases, Quotes, and Sayings that have appeared on Bart's famous chalk board.

Technology

Google Trends: Google keeps track about what people are searching for, updated each hour. This gadget displays these Top-100 search queries and also displays its hotness factor in color.

Document to PDF: Easily convert documents to PDF.

How I Did - Weekly Video Tutorial: Explanatory videos of how to do stuff from experts.

Create your own Gadgets

You can even create your own Google Gadgets which will then be added to this directory for others to use. This would be a great way to attract some new readers to your blog with a useful gadget aimed at others in your niche subject.

You can learn more about creating your own Google Gadget on the main code page where you will find explanatory articles, examples and resources.

This is certainly something I will look into myself in the near future, with particular regard to useful applications for Bloggers. I would love to hear of any gadgets you create yourselves though and would consider a showcase of Blogger inspired gadgets here if enough people get involved in creating them.

Check out this new directory and gadgets for yourself!

At present, the unified gadget/widget directory is only available in Blogger in Draft, so if you're interested to try out some of these new features, log into your dashboard via http://draft.blogger.com, click on the Layouts tab and choose to add a new gadget.

I would imagine this new system will be fully incorporated into our main Blogger interfaces soon enough as I personally have found no problems or glitches with this new system.

Let me know what you think about the new gadgets directory (or particular gadgets you would like to use) by leaving your comments below.

Wednesday, 2 April 2008

Favicons Made Easy!

Favicons are a very useful method of branding your blog with your personal style, and are a useful recognition tool for your readers to identify your blog. If you are reading Blogger Buster in Firefox (or have bookmarked my site in IE) you will see an example of a favicon in the left hand corner of your address bar.

A while back, I wrote a post explaining how to replace the default Blogger favicon with your own. But since then, I've discovered an even easier method you could use to upload a favicon to your blog - you don't even need external image hosting to achieve this!

For general use, there are two different methods you could use to enable favicons for your blog:

Upload your favicon (favicon.ico) to the root of your web host

Call your favicon explicitly in the head section of your blog template.

However, those of us who host our blogs with Blogger do not have access to the root of our hosting account. So unless we enable a favicon by adding code to our blog template, the default orange Blogger icon will display instead.

In my previous post about favicons, I explained that you would need to upload your favicon image (with the .ico extension) to an external hosting account.

This method may have been problematic for those of you who don't have access to an external hosting account which supports the icon file type (Photobucket, Picassa and other free image hosts do not support this).

But guess what: you can use a different image file type (such as PNG, GIF or even JPG) for your favicon. What's more, you can even upload this to Blogger (for example, in the body of a post) which negates the need for any external hosting whatsoever!

To make it even easier for you to use a favicon ion your Blogger powered blog, I have reconfigured the Favicon Generator which you can find in the Tools section of this site to output favicons as PNG files rather than icons (with the .ico extension).

Here is how to enable a favicon for your Blogger powered blog in a few easy steps

Ensure you have a copy of your blog logo (or another image you would like to use as a favicon). This should be in JPG format for use with the Favicon generator.

Go to the Favicon Generator page, and upload your image, then click on "Create Favicon". After a second or so, the page will reload and you will see your newly generated icon appear in the box.

Right click on your icon and choose "Save Image As...". This icon will be in PNG format, and you can rename this anything you wish. Save the icon to a convenient location on your computer.

Next, go to your Blogger dashboard and create a new page. Upload your icon as an image in the post. If you do not already edit your posts in Edit HTML format, click on this tab and copy the URL of your image from the HTML code. The URL for your uploaded image will appear like this in your post's HTML code:

You need to save this post (albeit temporarily) so it would be advisable to backdate this post, then it will not be confusing for visitors who wonder why you are posting such a small image in your blog!

Finally, go to Layout>Edit HTML in your Blogger dashboard. Just before the closing </head> tag, paste the following section of code:
```
<link href='http://your-icon-url.png' rel='shortcut icon'/>

<link href='http://your-icon-url.png' rel='icon'/>
```
Be sure to replace the URLs in red with the URL you copied from your post.

Finally, save your template. Your new favicon will now appear in the address bar!

Note: if you use Internet Explorer, the favicon will not appear unless you have bookmarked your blog and refreshed your browser.

If you would prefer to upload your PNG icon to a different image host, you the method is almost exactly the same, except that the URL you will use to enable the favicon should match that where your PNG image is hosted.

Need Inspiration for your Favicon Design?

Here are some excellent showcases of favicons to inspire you in creating your own unique branded icon:

Favicon Gallery (By favicon.co.uk)

50 Remarkable Favicons (by Smashing Magazine)

The Favicon Gallery

MpP Favicon Gallery

Favicon Gallery (By HTML Kit)

Download Free Favicon Packs (from Clickfore.com)

I hope this post has helped you to enable your own customized favicon on your Blogger powered blog.

If you've enjoyed this article, please subscribe for updates of future Blogger related articles.

Tuesday, 1 April 2008

Add Stylized Captions to Images in your Blog Posts Using CSS

Photo by Jurvetson

In recent weeks, you may have noticed the captions I add to images in my blog posts. Where I am showcasing the work of another author, I prefer to add a caption explaining where this image has come from, whether this be Flickr or a screenshot of another blog/website.

I've tried a few different methods to display captions beneath images, and the best solution I have found so far is to use CSS. This allows me to align images (and their relevant captions) to the left, right or center of the post with ease.

So in this post, I will explain how I achieve stylized captions beneath my images in Blogger posts using only CSS and HTML tags.

Some examples of images with captions

Left Image

Right Image

Here are some images aligned to the left, right and center with their relevant captions beneath. The caption appears below the image with a border beneath which separates it from the main body of the post.

This is achieved by wrapping both the images and the captions in <span> tags which have a "class" depending on their alignment (left, right or center aligned).

Center aligned image (Photo by Montrasio International)

How these captions work

This image demonstrates the code I use to make the captions appear beneath each image:

In the body of my posts, the code for the images and captions will appear like this:

<span class="left-caption">

<img src="http://url-of-image.com/image.jpg" />

<p>Caption of this image</p>

</span>

This example would produce an image and caption which is aligned to the left of the text in my post.

To align an image to the right, I would replace "left-caption" with "right-caption", or to center the image I would use "center-caption".

The CSS code used to produce these images and captions

If you would like to use captions which are styled like those I use in my posts, you will need to use the following styling code:

.left-caption { float: left; margin: 0 1.5em 1em 0; padding: 0.5em; text-align: center; }
.right-caption { float: right; margin: 0 0 1em 1.5em; padding: 0.5em; text-align: center; }
.center-caption { margin: 0 0 1em 0; padding: 0; text-align: center; }
.left-caption img, .right-caption img, .center-caption img { margin: 0 auto; display: block; }
.left-caption p, .right-caption p, .center-caption p { background: #eee; margin: 0; line-height: 1.6em; padding: 0.5em; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; font-size: 0.9em; color: #333; }

Copy this entire section of code and paste this just before the closing </b:skin> tag in your blog's template code.

How to use these captions in your Blogger posts

Once you have added this style code to your blog's template, you can display captions beneath the images in your posts.

To achieve this, you will need to wrap both your image and your caption in span tags according to the alignment you prefer. Here are the three different formats you could use:

To align these to the left

<span class="left-caption">

<img src="http://image-host.com/yourimage.jpg" />

<p>Your Caption Here</p>

</span>

To align these to the right:

<span class="right-caption">

<img src="http://image-host.com/yourimage.jpg" />

<p>Your Caption Here</p>

</span>

To align these to the center of the page:

<span class="center-caption">

<img src="http://image-host.com/yourimage.jpg" />

<p>Your Caption Here</p>

</span>

Note that the captions are also wrapped in paragraph tags, like this:

<p>Your Caption Here</p>

This ensures the caption is properly styled, as the CSS code contains the styles for paragraphs which appear within this span class.

If you upload your image using Blogger's image upload function, you must make sure that you choose "None" in the layout choices.

It may be easier for you to use the HTML editor to create posts with image captions as this will allow you to see all of the code you are using.

Other methods of adding captions to your posts

As I explained at the beginning of this post, there are many different methods you could use to display captions beneath your images. The method I explained here is the one which works best for me, though you may prefer to use a different technique.

Here are some links to other articles which offer alternative methods to display captions beneath your post images:

JavaScript Image Captions from 1976 Design

This method automatically inserts a caption based on the title of the image.

Captions for Images in Blog Posts by Blogger Tips and Tricks

This is a much simpler method, using only HTML code in the body of the post.

Image Captions with CSS and JavaScript by Ask The CSS Guy

Similar to 1976 Design's post, this article uses a combination of styling code and scripting to add a partially transparent caption over the bottom section of the image.

I hope this tutorial has been useful in explaining how you could add captions to your post images in Blogger. If you have any questions or would like to suggest further uses for this, feel free to leave your comments and suggestions below.