2008-02-04

My Valentine


My Valentine is an XML based layouts templates which will work almost right out of the box! Designed as a themed template for Valentine's Day, this template is feminine and pretty enough to be used all year round.

Featuring many new features, including an easily configurable navigation bar, optional MyBlogLog recent readers widget, Flickr photostream, and calendar widget, this template would be ideal for any feminine themed blog, or as a special recognition for Valentine's day.

You can preview the My Valentine template here, or read on for installation instructions and download options.

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!

Continue reading

2007-10-29

"Lament": a sinister yet elegant template

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!


Continue reading

2007-10-22

"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!



Continue reading

2007-10-20

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!



Continue reading

2007-10-13

Girly Web 2.0 style template

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: | | | | | |



Continue reading

2007-10-05

"Shinobi" two column Web 2.0 style 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 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.

Alternatively you can copy the template code below and paste this in the Edit HTML section of your Blogger dashboard.

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!


Continue reading

"Tic-Tac Green" three column customized template

Here is another three column version of a classic Blogger template: Tic Tac Green.




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

Alternatively you can copy the template code below and paste this in the Edit HTML section of your Blogger dashboard (ensure you have checked the "Expand widget templates" box):

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!


Continue reading