Showing posts with label Free Blogger Templates. Show all posts
Showing posts with label Free Blogger Templates. Show all posts

March 24, 2008

Blogger XML Template: Blue Steel (Magazine Style)

Demo | Download

Here is a new 'magazine style' Blogger XML template for free download. This template is called "Blue Steel" and features a unique layout for the front page to include extra widgets beneath the main post section (though if you prefer you can use this theme as a regular three column template). Read on for full instructions and to download this unique Blogger template for use in your own blog.

There are many optional elements to this template. You may either use this as a magazine style theme (featuring more widgets than usual on the home page), or as a regular theme which contains only the main blog posts and two sidebars to the right.

Features of this template include:

  • An optional magazine style layout for the home page
  • Optional customized recent posts widget for the sidebar
  • Themed icons for sidebar widgets, post features and post options
  • Custom made favicon to match the blog theme
  • Integrated search function
  • Tabbed navigation with easy customization of links
  • Related articles beneath each post on post pages
  • Integrated (optional) post summary hack

Download the Blue Steel Blogger XML Template

You can download this template for free using the link below. This is a Zip file which includes the XML template and instructions to upload this template to your blog.

Download Blue Steel Blogger XML Template (Zip File)

Option 1: use Blue Steel as a Magazine Style Theme

If you would like to utilize the full potential of this theme, you will need to change a few settings and make some small changes to the way you usually post.

Display only one post on the home page

The ideal number of posts to display when using a magazine style theme is only one. Additional post excerpts will be visible from the "recent posts" widget which I will explain about soon.

To ensure only one post displays on the front page, go to Settings>Formatting in your Blogger dashboard, and choose "Show 1 Posts" on the front page.

Utilize the Post Excerpts Hack

This template includes code for you to show optional excerpts of posts on your front page. This customization was originally written by Ramani of Hackosphere, and is called "Selective Expandable Posts".

If you would like to utilize this facility, you will need to add a post template to your blog. To do this, go to Settings>Formatting in your Blogger dashboard. Near the bottom of the page you will see a box for you to add a "Post Template". In this box you will need to paste the following section of code:

Type your summary here
<span id="fullpost">
Type the rest of your post here
</span>
Then save this setting. Now when you create a new post, you will clearly see where you should write your excerpts and the remainder of the post.

For more detailed instructions about using this hack, please refer to this article.

Add the "Recent Posts" widget code to your sidebar

If you choose to use the magazine-style facilities for this template, you may also like to add the widget to display excerpts of your most recently written posts in the sidebar.

This widget was originally written by Hans of Beautiful Beta, though I have modified this slightly to make this more suitable for the Blue Steel Blogger template.

To add this widget to your sidebar, copy all of the code on this page and paste this into an HTML/JavaScript widget in the Page Elements section of your Blogger dashboard. Be sure to replace the section in red with the URL of your own blog!

Important Notes

The widgets which appear under the post on the main page will only be visible on the main page. On post pages, these widgets will not appear, so be sure to include important widgets in your sidebar instead.

Option 2: Using Blue Steel as a regular blog template

If you would prefer to use Blue Steel as a simple template (IE: not utilize the magazine style elements), all you need to do is delete any widgets beneath the Blog Posts section. The template does not require any additional settings or adjustments to work as a regular template (although you may like to add your links to the navigation bar in the header section. See below for details about this).

Other settings/widgets

Certain features of the Blue Steel Blogger template are applicable to both "magazine" and "regular" options.

Configure links in your navigation bar

This template comes with a pre-installed link list widget in the top right section of the header. When you upload this template to your blog, this link list will not contain any links at all.

To add links to the navigation bar, go to Layout>Page Elements in your Blogger dashboard and click on the "edit" link for this link list. You can then add links to the main pages of your blog and these will appear in the navigation section.

Links in the footer section

Right at the bottom of your blog template are some links which you can change to reflect the URLs of the main pages in your blog.

To change these links, find the following section of code in the Edit HTML section of your template:

<
<a href='http://yourblog.blogspot.com' title='Home Page'>Home</a>
| <a href='http://yourblog.blogspot.com' title='About the site'>About</a>
| <a href='http://yourblog.blogspot.com' title='Contact the author'>Contact</a></span>
Change the URLs highlighted in red to match those of your important post pages.

License and Credits

As mentioned earlier in this post, two of the scripts used in this template were written by different authors:

You may download, customize and use this template however you choose. However, I do ask that the credits within the template code remain in place and that you do not redistribute this template without my consent.

February 11, 2008

Blogger template releases for 2/11/08

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

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

Zen by SuckMyLolly

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

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

Demo | Download

Hot Hands by SuckMyLolly

Hot HandsA two column template featuring a header image and customizable backgrounds.

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

Demo | Download

Dear Diary by Blogger XML Skins

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

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

Download (there is no demonstration page for this template)

Modern Paper by TemplateGodown

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

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

Demo (temporary page!) | Download

The Erudite Template by Jashan of The Erudite Blog

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

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

Demo | Download


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

February 08, 2008

101 Excellent Blogger XML Templates

I love designing Blogger templates, and over the past few weeks I've been scouring the web to find the best, and most inspirational Blogger XML template designs. This post is a showcase of the best Blogger template designs available for free download, collected from some of the best sources on the web. With 101 excellent Blogger XML templates in total, you're sure to find something you like in this list!

February 04, 2008

"My Valentine" - A new Blogger template available for download

This is an XML based template for layouts blogs, and is fully widget ready.

In contrast to some of my previous templates, you do not need to edit the HTML at all to configure the template for your particular blog. There are a couple of optional widgets, most notably the stylized MyBlogLog Recent Readers widget and the Flickr Photostream widget. These are optional widgets, rather than built in to the template. The styling code is already present of you do choose to use them, but if you prefer not to, the template will still work absolutely fine!

You can preview the My Valentine template, or read on for download instructions.

Download the My Valentine template

You can download this template as a zipped folder, which contains the XML file, plus all related images and scripts for this template below: Download My Valentine Blogger Template (Zip File) Once you have downloaded this file, unzip the folder and save all files to your computer.

Installing the XML file

To install the XML template to your blog, you need to go to Template>Edit HTML in your Blogger dashboard. Click on the "Browse" button near the top of the page, and locate the my_valentine.xml file which you have saved to your computer. Then click on the "upload" button. This will upload your new theme to your blog.

Upload the HTML code (alternative upload method)

If you prefer, you can upload this template using only the HTML code. For this method, you should go to Template>Edit HTML in your Blogger dashboard. Highlight all of the code in the code box (key CTRL+A as a shortcut). Then copy all of the code from on this page to your clipboard (CTRL+C). HTML code for My Valentine Template Finally, go back to your Blogger dashboard, and paste this entire section of code into the Edit HTML box, replacing the code which is highlighted (CTRL+V). Now you can preview your template to see how the Valentine template will appear in your blog. If you like this, you can then save your template.

Features of this template:

Comment and labels icons beneath blog posts You can easily see how many comments each post has due to the comment icons and display directly beneath each post. This link will take you directly to the comment section of the post, even if you are reading on the home page. The label icon (a small folder) will display next to the labels you have used for each post. If you do not add a label to a particular post, this icon will not display. Calendar Widget To configure the calendar widget for your blog, you must change the date format in your settings. Simply go to Settings>Formatting in your Blogger dashboard and change the date format to YYYY-MM-DD. This enables your calendar widget to be properly displayed. Adsense/Description widget in header The pink rounded box in the header has been optimized to include an Adsense banner no wider than 234px, though you could just as easily add a description, link list or even an image of you prefer! Navigation bar To configure your own links, you need to add links to the Link List widget which is housed just under the header section. Your links will then display inline as in this demonstration template. Most users would like these links to include their Home, About and Contact pages, for example. Recent readers widget You can choose to include a stylized "MyBlogLog recent readers" widget in your sidebar. There are two methods you could use to do this:
  1. Copy the following section of code, changing the MyBlogLog id number (highlighted in red) to your own ID number instead. Then paste this into the content area for the widget:
    <script src="http://pub.mybloglog.com/comm2.php?mblID=2007110415055475&c_width=270&c_sn_opt=n&c_rows=4&c_img_size=f&c_heading_text=Recent+Readers&c_color_heading_bg=ffffff&c_color_heading=ffffff&c_color_link_bg=FFFFFF&c_color_link=cd0000&c_color_bottom_bg=ffffff" type="text/javascript"></script>
    You can find your MyBlogLog ID by logging into MyBlogLog. Choose to create a new widget (though you won't actually need to create one for this method), and scroll down to the "Top Links Code" section. YOu will see your MyBlogLog ID# in the code box, as highlighted in red below: Simply copy your own MyBlogLog ID number, and replace the code in red (above) with your own number.
  2. Alternatively, you can create your own Recent Readers widget by logging in to MyBlogLog, so you can simply copy and paste the relevent code into your HTML/Javascript widget. For the style of the widget featured here, I used white for all color options except for c_color_link which is red. For best results, choose your widget to be no wider than 280px, do not use image names, and choose for avatars to be "half size". Using these options will ensure your widget displays the same as it does in this demonstration template, though of course you are free to choose whichever color schemes you prefer!
Flickr Photostream Widget I finally figured out how to achieve this, which is a feature I've noticed in so many great Wordpress templates recently. Due to the DIV enclosure and the stylized background image, it would be better for you to simply modify the code I used than to create your own. Assuming you already have an account at Flickr, you will need to find your Flickr user ID. The easiest way is to use idGettr, a free service which extracts your user ID (or group ID) based on the URL of your photostream on the Flickr site. Once you have your Flickr user ID, copy the code below and change the ID in red to match that of your own user ID:
<div id="flickr_stream"><table id="flickr_badge_uber_wrapper" border="0" cellpadding="0" cellspacing="10"><tr><td><table border="0" id="flickr_badge_wrapper" cellpadding="0" cellspacing="10"> <tr> <script src="http://www.flickr.com/badge_code_v2.gne?count=9&display=latest&size=s&layout=h&source=user&user=8131003%40N03" type="text/javascript"></script> </tr> </table> </td></tr></table></div>
Then paste this entire section of code into an HTML/Javascript widget in your footer. The code is already configured to display 8 images as square thumbs with the background you see in this demonstration template. Image and Script hosting All images and scripts are hosted by Blogger Buster, so you do not need to upload or host them yourself. However if you do choose to do so, all images and scripts used in this template are contained in the Zip folder download. To host these yourself, you will need to upload these to your own server and change the URLs in the template to match those where the images and scripts are hosted on your servers. Copyright notice This theme is distributed under a Creative Commons Attribution license. This means you can download and use this template for free, for any purpose, and modify this however you choose. While you are free to remove the credit link in the footer, I would appreciate it if you would retain the author details which are contained in the source code. Please do not redistribute this template without providing a link to the original author!

Please do let me know your opinions of this new template by leaving your comments below.

October 29, 2007

Another spooky template for Halloween

Here's another "spooky" Blogger template for you to download: "Lament", which is inspired by the infamous puzzle box of the Hellraiser series...

This one wasn't strictly designed as a "seasonal" template, as I prefer to create templates which could be used year round. Instead, Lament features an elegant, yet sinister theme, and also includes many of the new features I've been working on lately, such as the calendar widget and footer columns.

The "Lament" template features:

  • Web 2.0 style layout, with divided sidebar column and three footer columns for extra content
  • Customized header background
  • Favicon to match theme
  • "Post-options" and "Related posts" on post pages
  • Stylized calendar widget

You can take a look at the Lament Template demonstration blog to see this template in action.Please do take a look at the post pages to see how the post footer sections work too.

Download this template

You can download the XML file for this template below:

Download the "Lament" Template (Zip folder)

This download contains the XML file for you to upload to your blog, plus a help file and all images that are used in the template.

All images for this template are hosted by Blogger Buster, though if you prefer to have control over these images you can upload these to your own image host and edit the template accordingly.

Template code

Alternatively, you can copy the template code below and paste this into the Edit HTML area in your Blogger dashboard:

The calendar widget
This widget parses your date header to display the calendar icon. To ensure this works properly, you will need to change the settings for your date-header format in the Settings>Formatting section of your Blogger dashboard. The date header needs to be in yyyy-mm-dd format, like the example below: It is only necessary to change this one setting, then everything else in this template should work just fine!

Using this template

This template is free to use, and you may customize the template in any way you wish. However, I do ask that the author details remain in the template itself, and that you do not redistribute this template without a link back to Blogger Buster. A link back to Blogger Buster is always appreciated!

October 27, 2007

"Halloween themed template" available

As it's Halloween just around the corner, I quickly whipped up a seasonal template for you to enjoy. The "Halloween Skulls" template (featured on the right) is the first of two spooky themed templates, which is available for download now. Read on for more information and to download this new template.

The "Halloween Skulls" template features:

  • Three column design
  • Sinister header and background image
  • Icons beside sidebar titles
  • Skull post dividers
  • Three columns in the post footer for extra content space (widget ready)
  • AddThis bookmarks at the end of each post, styled to match the theme of the template

This was quite a rushed template (as someone kindly reminded me that I ought to create a seasonal template), but I do have another in the pipeline which is based on Lemarchand's box (from the Hellraiser series of films) which will be a more colorful template if this is what you prefer.

You can preview this template in action on the .

Please use the link below to download this template in Zip file format. This file includes the XML file for you to upload to your blog, plus all of the images used in the blog in case you would like to host them on your own servers.

Download Halloween Skulls template here

All images used in this template are hosted by Blogger Buster in case you are unable (or prefer not) to upload these to your own hosting account.

Please let me know what you think of this template by leaving your comments and opinions below.

Technorati Tags: | | | |

October 23, 2007

How to install a new template using the HTML code

The Blogger templates offered here are now available in either XML or "template code" format in the Templates section of this site. To learn how to install the XML templates, take a look at this tutorial which explains the process in detail. For those who prefer to copy and paste the code for new templates, here are some tips to help make the process easier.

The template code for each template can be found on the download page in the "templates" section of this site inside a scrolling "iframe" section. To use this, you will need to paste the entire section of code into the Edit HTML section in your Blogger dashboard, instead of the code which is currently there.

Often readers contact me because they have experienced errors when installing new templates in this way. Usually such errors are caused because a part of the template code has been left out when copying, or because a part of the old template still remains.

The method I use to install the HTML code for new templates prevents the dreaded "your template could not be parsed" error code from appearing by ensuring all of the new template code is copied, and none of the old template remains in the Edit HTML window when the new template is installed. This method uses keyboard shortcuts, which simplifies the process, and is also much faster than other methods too!

How I install template code

  1. Fisrt, make a backup of your existing template in case you decide to revert back to this later on.
  2. When you have decided on the template you would like to install, put your cursor inside the scrolling iframe box which contains the template code (it doesn't matter where, as long as it's inside this box!). Then hold CTRL (or CMD for Mac users) and press A. This should highlight all of the text within the scrolling box. Then while this text is highlighted, key CTRL/CMD + C, which will copy all of the highlighted text to your cliploard
  3. Next, go to Template>Edit HTML in your blogger dashboard. Check the "expand widget templates box" and again, place your cursor inside the box containing your template code.
  4. Once again, key CTRL/CMD + A to highlight all of the text within this box. Then key CTRL/CMD + V. This function will paste the new template from your clipboard over the existing template, which ensures the old template is completely removed.
  5. You can now preview your new template to ensure you like the new appearance before saving it. Using this method, if you decide you don't like the new template, you can simply click the "clear edits" button, and your old template will still be in place.

I hope this method works well for you too. It certainly is worth giving this a try if you have experienced error messages when trying to paste the html code for a new template.

Please feel free to leave your comments and opinions below.

Technorati Tags: | |

October 22, 2007

"Cool Blue" Web 2.0 style template available for download

Here is a pale blue version of the recent Web 2.0 style templates I have created. This version is called "Cool Blue" and features muted blue tones for an eye-pleasing theme suitable for many types of blog. This template also includes many advanced features, such as the three footer columns and calendar widget. You can see the screenshot to the right (click for full-sized preview), or read on for further details and download information.

As the title suggests, this template has a pale blue theme. It features a clean and simple layout, and very few images. Combined with a small javascript, this ensures the blog loads very quickly, and is able to deliver powerful new features which are not available in other templates I have created.

These features include:

  • Fast page loading time
  • Themed favicon already in place (see top left of the address bar)
  • Integrated blog search form
  • Web 2.0 style logo
  • Navigation bar (which can be customized to suit your needs)
  • Calendar widget
  • Unique wide sidebar layout, featuring a combination of wide and dual narrow columns
  • Three widgets available in the footer section
  • Unique post footer sections, which include a "What next" section for email post links, social bookmarking and "add a comment"
  • Related posts section also in post footer, to link to posts of the same label
  • Author comment highlighting on post pages
  • Rounded corners achieved by CSS instead of images
Plus a few other features too!

You can see the template in action on the Cool Blue Web 2.0 Template demonstration blog. Please do take a look at the post pages to see how the post footer sections work too.

Download this template

You can either download the full zip file for this template, which includes the XML template, plus all images and a help file, or copy and paste the code further down this page into the "edit HTML" section of your Blogger dashboard.

Download Cool Blue Web 2.0 Template (Zip folder)

This download contains the XML file for you to upload to your blog, plus a help file and all images that are used in the template.

Template code to copy and paste into the Edit HTML section of your Blogger dashboard:

All images for this template are hosted by Blogger Buster, though if you prefer to have control over these images you can upload these to your own image host and edit the template accordingly.

How to set up this template

This template will work without much modification, though there are two things you may want to change:

  • The calendar widget
    This widget parses your date header to display the calendar icon. To ensure this works properly, you will need to change the settings for your date-header format in the Settings>Formatting section of your Blogger dashboard. The date header needs to be in yyyy-mm-dd format, like the example below: It is only necessary to change this one setting, then everything else in this template should work just fine!
  • The navigation bar
    This is set up to feature links to your blog's home page (Home), an "about" page (About) and a contact page or link (Contact). In the default installation, I have been able to set up the "Home" link which points to your blog's front page. However, you will need to set up links to your About and Contact pages manually. You can also choose to change these links or add more links as required.

    The navigation bar is highlighted with comments in the template, and looks like this:
    <!-- This is the navbar section which you can edit to include your own links -->

    <div style='height: 40px; padding: 10px 0 0 0; margin: 3px 0 0 0;'>

    <!-- Home Page Link -->
    <a class='nav-section' expr:href='data:blog.url' style='color: #fff; text-decoration: none;'>Home</a>

    <!-- About link add your link here -->
    <a class='nav-section' href='#' style='color: #fff; text-decoration: none;'>About</a>

    <!-- Contact link add your link here -->
    <a class='nav-section' href='#' style='color: #fff; text-decoration: none;'>Contact</a></div>

    <!-- End navbar section -->
    Simply change the "#" for the links to point to your own posts/web pages, or copy the link style to create new links instead.

Using this template

This template is free to use, and you may customize the template in any way you wish. However, I do ask that the author details remain in the template itself, and that you do not redistribute this template without a link back to Blogger Buster. A link back to Blogger Buster is always appreciated!

October 20, 2007

Red Web 2.0 style template available for download

Now there is a red-themed version of the "Girly Web 2.0" template available for download. This template also includes many advanced features, such as the three footer columns and calendar widget. You can see the screenshot to the right (click for full-sized preview), or read on for further details and download information.

As the title suggests, this template has a red and silver theme. It features a clean and simple layout, and very few images. Combined with a small javascript, this ensures the blog loads very quickly, and is able to deliver powerful new features which are not available in other templates I have created.

These features include:

  • Fast page loading time
  • Themed favicon already in place (see top left of the address bar)
  • Integrated blog search form
  • Web 2.0 style logo
  • Navigation bar (which can be customized to suit your needs)
  • Calendar widget
  • Unique wide sidebar layout, featuring a combination of wide and dual narrow columns
  • Three widgets available in the footer section
  • Unique post footer sections, which include a "What next" section for email post links, social bookmarking and "add a comment"
  • Related posts section also in post footer, to link to posts of the same label
  • Author comment highlighting on post pages
  • Rounded corners achieved by CSS instead of images
Plus a few other features too!

You can see the template in action on the Red/Silver Web 2.0 Template demonstration blog. Please do take a look at the post pages to see how the post footer sections work too.

Download this template

You can either download the full zip file for this template, which includes the XML template, plus all images and a help file, or copy and paste the code further down this page into the "edit HTML" section of your Blogger dashboard.

Download Red/Silver Web 2.0 Template (Zip folder)

This download contains the XML file for you to upload to your blog, plus a help file and all images that are used in the template.

Template code to copy and paste into the Edit HTML section of your Blogger dashboard:

All images for this template are hosted by Blogger Buster, though if you prefer to have control over these images you can upload these to your own image host and edit the template accordingly.

How to set up this template

This template will work without much modification, though there are two things you may want to change:

  • The calendar widget
    This widget parses your date header to display the calendar icon. To ensure this works properly, you will need to change the settings for your date-header format in the Settings>Formatting section of your Blogger dashboard. The date header needs to be in yyyy-mm-dd format, like the example below: It is only necessary to change this one setting, then everything else in this template should work just fine!
  • The navigation bar
    This is set up to feature links to your blog's home page (Home), an "about" page (About) and a contact page or link (Contact). In the default installation, I have been able to set up the "Home" link which points to your blog's front page. However, you will need to set up links to your About and Contact pages manually. You can also choose to change these links or add more links as required.

    The navigation bar is highlighted with comments in the template, and looks like this:
    <!-- This is the navbar section which you can edit to include your own links -->

    <div style='height: 40px; padding: 10px 0 0 0; margin: 3px 0 0 0;'>

    <!-- Home Page Link -->
    <a class='nav-section' expr:href='data:blog.url' style='color: #fff; text-decoration: none;'>Home</a>

    <!-- About link add your link here -->
    <a class='nav-section' href='#' style='color: #fff; text-decoration: none;'>About</a>

    <!-- Contact link add your link here -->
    <a class='nav-section' href='#' style='color: #fff; text-decoration: none;'>Contact</a></div>

    <!-- End navbar section -->
    Simply change the "#" for the links to point to your own posts/web pages, or copy the link style to create new links instead.

Using this template

This template is free to use, and you may customize the template in any way you wish. However, I do ask that the author details remain in the template itself, and that you do not redistribute this template without a link back to Blogger Buster. A link back to Blogger Buster is always appreciated!

October 13, 2007

"Girly Web 2.0 " style template available for download

I have just finished work on a new girly template which has a simple "Web 2.0" style, but also includes many advanced features you won't find on other Blogger templates. The screenshot of this template is on the right, and you can read on for full details and download information.

As the title suggests, this template has a feminine pink theme (don't worry guys, both a blue and dark version are in the pipeline and will be available soon). It features a clean and simple layout, and very few images. Combined with a small javascript, this ensures the blog loads very quickly, and is able to deliver powerful new features which are not available in other templates I have created.

These features include:

  • Fast page loading time
  • Themed favicon already in place (see top left of the address bar)
  • Integrated blog search form
  • Web 2.0 style logo
  • Navigation bar (which can be customized to suit your needs)
  • Calendar widget
  • Unique wide sidebar layout, featuring a combination of wide and dual narrow columns
  • Three widgets available in the footer section
  • Unique post footer sections, which include a "What next" section for email post links, social bookmarking and "add a comment"
  • Related posts section also in post footer, to link to posts of the same label
  • Author comment highlighting on post pages
  • Rounded corners achieved by CSS instead of images
Plus a few other features too!

You can see the template in action on the Girly Web 2.0 Template demonstration blog. Please do take a look at the post pages to see how the post footer sections work too.

Download this template

You can either download the full zip file for this template, which includes the XML template, plus all images and a help file, or copy and paste the code further down this page into the "edit HTML" section of your Blogger dashboard.

Download Girly Web 2.0 Template (Zip folder)

This download contains the XML file for you to upload to your blog, plus a help file and all images that are used in the template.

Template code to copy and paste into the Edit HTML section of your Blogger dashboard:

All images for this template are hosted by Blogger Buster, though if you prefer to have control over these images you can upload these to your own image host and edit the template accordingly.

How to set up this template

This template will work without much modification, though there are two things you may want to change:

  • The calendar widget
    This widget parses your date header to display the calendar icon. To ensure this works properly, you will need to change the settings for your date-header format in the Settings>Formatting section of your Blogger dashboard. The date header needs to be in yyyy-mm-dd format, like the example below: It is only necessary to change this one setting, then everything else in this template should work just fine!
  • The navigation bar
    This is set up to feature links to your blog's home page (Home), an "about" page (About) and a contact page or link (Contact). In the default installation, I have been able to set up the "Home" link which points to your blog's front page. However, you will need to set up links to your About and Contact pages manually. You can also choose to change these links or add more links as required.

    The navigation bar is highlighted with comments in the template, and looks like this:
    <!-- This is the navbar section which you can edit to include your own links -->

    <div style='height: 40px; padding: 10px 0 0 0; margin: 3px 0 0 0;'>

    <!-- Home Page Link -->
    <a class='nav-section' expr:href='data:blog.url' style='color: #fff; text-decoration: none;'>Home</a>

    <!-- About link add your link here -->
    <a class='nav-section' href='#' style='color: #fff; text-decoration: none;'>About</a>

    <!-- Contact link add your link here -->
    <a class='nav-section' href='#' style='color: #fff; text-decoration: none;'>Contact</a></div>

    <!-- End navbar section -->
    Simply change the "#" for the links to point to your own posts/web pages, or copy the link style to create new links instead.

Using this template

This template is free to use, and you may customize the template in any way you wish. However, I do ask that the author details remain in the template itself, and that you do not redistribute this template without a link back to Blogger Buster. A link back to Blogger Buster is always appreciated!

Technorati Tags: | | | | | |

September 28, 2007

Download the "Shinobi" template

Here is a new template I've been working on for a while now: the "Shinobi" (Ninja) template. This template features a unique "Web 2.0" style theme including inline comments. Take a look at the screenshot or preview the blog in action on the Shinobi Template demonstration blog. Read on for more details and to download the XML template.

The Shinobi template features:

  • Unique theme with rounded corners and ninja-style header.
  • Inline comments on post pages, so readers can leave their comments without having to leave the page.
  • Complementary label cloud.
You can download the XML template using the link below:

Download the Shinobi Blogger Template (Zip File)

Included in the zip file are both the XML template and a help file with details of how the template can be installed and configured. If you would also like to copy over your widgets from your existing template, please refer to this post which explains the whole process.

All images used in this template are hosted by Blogger Buster, so you do not need to upload them to your own servers. Feel free to modify this template as you wish. However, I do ask that the credits within the template itself remain intact. Please do not redistribute this template without a link back to the original author!

As always, your comments and opinions are much appreciated!

Technorati Tags: | | | |

September 21, 2007

How I copy widgets from one template to another

When you choose a new default Blogger template, all of your widgets are copied over to the new template. However, if you try to upload a customized template (such as the ones featured here), you will probably get a message asking if you want to delete most of your existing widgets. I am often asked "how can I copy my widgets over to a new template?", so in this tutorial I will share the method I use to do this quickly and painlessly.

Your blog widgets are saved in your Blogger account, rather than in the actual template of the blog. The widgets are called to your blog by anchors within the template which look like this:

<b:widget id='HTML1' locked='false' title='My Widget Title' type='HTML'/>
As you can see in this example, each widget in your blog is given a unique identity (in this case, "HTML1") and a title, which is the same as the title you provide when you create the widget.

If you upload a template to your blog which contains the same widget identifiers, then the widgets will be called from your account by the template, and will display in your blog as normal. On the other hand, if you upload a template which does not contain the same widget identifiers, you will be prompted to delete widgets from your account.

So to ensure you can maintain your widgets from your existing blog template in your new blog template, we must copy these widgets over to the new template before uploading this to your blog.

The method I use to accomplish this is by using a second "test blog". I have explained all about creating and using a test blog in this post. If you don't already have a test blog available to use, you will need to create one temporarily to help you copy your widget identifiers over to your new template. Once you have created your test blog, here is the method for copying over your widgets from your old template to your new one:

  1. Log in to your Blogger dashboard.
  2. You will need to be able to edit both your existing blog template and your test blog template, so it's advisable to have two browser windows (or tabs) open at the same time. You can easily do this by keying CTRL+N to bring up a new page. So for the moment your Blogger dashboard will be available in both browser windows.
  3. Now, in the first browser window, select your test blog and go to Template>Edit HTML. Click on the "Upload New Template" link near the top of the page and upload the new XML template you wish to adapt for your main blog. Once this template has uploaded, deselect the "expand widget templates" box.
  4. In the second browser window, select your existing blog template and again go to Template>Edit HTML. Do NOT check the "expand widget templates box", as this will make things much easier for you. Now, locate the widget content identifiers in your template sidebar. Most likely, the section will look something like this: The code featured inside the red box displays the identifying code for your widgets, which calls the widgets to appear in your blog. You need to copy all of these <b:widget...> sections to yout clipboard, or paste into Notepad for easy editing in a few moments.
  5. Once you have copied the widget identifiers from your old template, go back to the browser window in which you can edit your new template.
  6. Find this section in your blog template:
    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
    There may or may not be content here... </b:section>
    </div>
    If there are any widgets defined here, it is advisable to delete them. Otherwise you may end up with duplicated widgets. Then in their place, paste the widget codes from your old template:
    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
    Paste the widget identifiers here </b:section>
    </div>


    If there are no widgets present in the sidebar of your new template, the code may look like this instead:
    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'/>
    </div>
    In this case, you should delete the trailing slash from the end of the line (highlighted in red). Make a line break then paste your widget content as before. Then finally create another line break and add the following line:
    </b:section>
    The finished result should look something like this:
  7. IMPORTANT! Do not preview your template at all during this process! If you do, you run the risk of duplicating the widgets which will cause you many problems. This seems to be a glitch on Blogger's behalf rather than an error of this method. In any case, do not preview the template.
  8. At this point, you should save the test blog template, after which you can view your blog in the normal manner. You will notice that no widget content is actually showing, only the widget titles. This is perfectly normal: as I mentioned earlier, the widget content is stored in the settings for your original blog.
  9. Okay, now we have copied over the widgets, we can download the XML template ready to transfer over to the original blog. To do this, go to Template>Edit HTML and select "Download full template" near the top of the page. Save the template to your computer with a name you can easily identify.
  10. Now back to the other browser window where you should have the Edit HTML page for your original blog still on the page. Here you should look for the "upload new template" section near the top of the page. Browse for the template you just downloaded from your test blog and upload it. You should NOT receive any error messages, like this: If you do see such error messages, take note of the widgets the template wants to delete, then choose to cancel the process. You should then copy the appropriate widgets from the old template into the new template in your test blog (as before), save the template and attempt to upload it again.
  11. If you receive no error messages, your template will be saved, and you can now view your new blog template with all your old widgets still in place. You can then move the widgets around however you wish in the Layouts section of your dashboard.

I hope this tutorial helps you easily copy your widgets from your old template to your new one. Please leave your comments and opinions below, and feel free to contact me if you have any problems doing this in your own blogs.

Technorati Tags: | | | >

September 15, 2007

Tic Tac Green Three Column Template

Sorry for the delay in getting this template ready for download! Here is a screenshot of the modified Tic Tac green template for your perusal:

You can download the XML file for this template using the link below (this is contained within a zip file which you can save to your computer):

Download three column Tic Tac (green) template

All images are hosted by Blogger Buster so you do not need to upload them to your own servers. Feel free to modify this template as you wish; however I do ask that the author credits remain intact within the template. Please do not redistribute this template without a link back to Blogger Buster!

For loads more free Blogger template downloads, be sure to visit the Blogger Templates section.

Technorati Tags: | | | |

September 12, 2007

Tic Tac Three Column Template (Blue) available to download

As requested by a few people now, I have modified the Tic Tac Blue template to add a second sidebar. Here is a screenshot for you:

You can see a demonstration of this template in the Tic-Tac Three column demonstration blog.

You can download this template using the link below. This is a zip file which contains the XML file for this template.

Download Three Column Tic Tac template (blue)

To use this in your blog, you should extract the XML file from the zip folder and save it to your computer. Then go to your Blogger dashboard, and click on Template>Edit HTML. Near the top of this page you will see a link where you can upload a new template from a location on your computer. Browse for the saved template file and click "upload". This will then install your new template in place of the old one.

All the images used in this template are hosted by Blogger Buster. You do not need to upload them to your own hosting providers.

You are free to modify this template as you wish, however I do ask that the author credits within the template itself remain in place. Please do not redistribute this template without a link back to Blogger Buster!

Very soon I will also be uploading the "green" version of the Tic Tac template available for download, along with widened versions of both the blue and green templates (which feature more space for blog posts).

Please leave your comments and suggestions below.

Technorati Tags: | | |

September 04, 2007

"Gourmet Menu" themed template available for download

I have just finished work on a rather interesting template called "Gourmet Menu", which you can see as a screenshot below:

This is a food themed template, featuring a complementary label cloud and customizable fonts. You can preview this template in action on the Gourmet Menu Demonstration Blog. All images are hosted by Blogger Buster, so you only need to install the XML template.

You can download the Gourmet Menu template using the link below. This download is a zip file, which also includes a help file to assist in customizing the template.

Download Gourmet Menu Template here

You are free to modify this template as you wish. However, I do ask that you leave the credits intact within the XML template. Please do not redistribute this template without credit to the original author. A link back to Blogger Buster is always appreciated!

For more free Blogger templates, be sure to visit the Blogger Templates section of this site.

Technorati Tags: | |

August 30, 2007

"Mobile" (tech-style) Blogger template available for download

This is the first "technology" style template I have created, which features a clean and simple layout with a mobile phone in the header background. here's a screenshot for you:

You can see a demonstration of this template on the Mobile Template demonstration blog.

This template also features:

  • Optional "expandable posts" (script provided by Ramani)
  • Hidden Blogger Nav-Bar
  • Complementary Label cloud
  • AddThis social bookmark buttons at the end of each post
  • Fully customizable (fonts, colors, etc)

To download this template, please use the link below. This is a zip file which also contains a help file and the template for use with the selective expandable posts.

All images featured in this template are hosted by Blogger Buster; you do not need to upload images to your own hosting provider.

You are free to modify this template as you wish; however, I do ask that you keep the authorship credits intact within the template. A link back to Blogger Buster is always appreciated!

For more free Blogger templates, be sure to check out the Blogger Templates section of this site.

Coming soon: a "templates" sub-site, where you can find a complete, searchable selection of Blogger templates all in one place. Further details will be posted as soon as this service becomes available.

Technorati Tags: | | |

August 29, 2007

Rounders 4 Three Column Template for download

I have now uploaded the Rounders 4 three column template for you to download. Additional features include a customized label cloud and Addthis social bookmarking buttons beneath each post. Here's a screenshot for you:

You can see a demonstration of this template in the Rounders 4 demonstration blog.

To download this template, right click on the link below and choose "Save As..."

Download Rounders 4 Three column template

For more free Blogger templates, please visit the Templates section

Technorati Tags: | |

August 27, 2007

"Rounders 3" three column template available for download

I've completed work on the Rounders 3 template to transform the original Blogger template into a three column design. Here's a screenshot for you:

This template also features a complementary label cloud and AddThis buttons at the end of each post for readers to bookmark using their favorite social bookmarking services.

You can see a demonstration of the Rounders 3 three column template here.

To download the Rounders 3 XML template, please use the link below (right click the link and choose "Save As"

Download Rounders 3 Three Column Blogger Template

Other Rounders three column templates are available to download too:

Be sure to check out the Blogger Templates section for loads more free Blogger layouts templates.

Technorati Tags: | | | |

August 23, 2007

"Rounders 2" three column template for download

I have modified the original Rounders 2 template to add a second sidebar. Here's a screen-shot for you:

This template also features a complementary Label Cloud and AddThis buttons at the end of each post to enable your readers to add your posts to their favorite social bookmarking sites. You can see the Rounders 2 template in action on the demonstration blog.

To download the XML file for this template, please right click the link below and choose "Save As". You can then save the file to your computer and upload this to your Blogger dashboard from the Edit HTML page.

Download Rounders 2 three column template

Related posts:

Technorati Tags: | |

August 22, 2007

"Rounders" three column template available for download

I've modified the classic "Rounders" template to become a three column design, complete with complementary Label Cloud and AddThis social bookmark buttons. Here's a screenshot for you (click to enlarge):

You can see this template in action on the Rounders demonstration blog.

To download this XML template, please use the link below (right click and choose "Save As)

Download Three Column Rounders Template

Related posts:

Technorati Tags: | | |

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy
两个人做人爱视频大全-两人做人爱费视频试看