July 31, 2007

Free animated email icons

I've collected a selection of animated email icons you may like to use in your blog. These images are all free to use, all I ask is that you don't link directly to the images on my server! Instead, you should download the images to your computer and upload them to your own image host instead.

To download an image, right click and choose "Save image as..."

Please note that you will need to host these images on your own server. If you try to upload them to Blogger, the images will not be animated! Here is an example of the HTML code you could use to link to the image on your own server:

<img src="http://yourimagehost.com/images/email1.gif" border="0">

Hope you enjoy these images!

Technorati Tags: | | | | |

Protect your email address from spam bots!

Bloggers often wish to offer their email address to provide a way for readers to communicate with them directly. however, in posting your email address on your blog, you will run the risk of your address being harvested by spam-bots, which scan the web in a similar fashion to search-engines, though specifically targeting email addresses to add to their databases.

Here are some of the best methods you can use to protect your email address from spam:

My favorite method, and the one I use currently, is to scramble your email address using javascript, which ensures your address is "broken" when read in the source code, thus protecting it from spam-bot discovery. I used the "email scrambler" tool from BlogFlux.com which automatically generates the required javascript using your email address, and also provides a <noscript> section for browsers which cannot read javascript. To use this tool, simply visit the BlogFlux email scramble page, and enter your email address in the box provided. Type in the text you would like to see for your email link (eg: "Send me an email"), and click on the "Scramble email link" button. You will be presented with a section of code which you can copy and paste into your template where you would like the link to be displayed.

Once you've saved your template, hover your mouse over the email link code: if you have enabled javascript on your browser, you will notice that the link points to "mailto:youremailaddress". If you don't have javascript enables, the link will look something like this: "youremail[AT]domain[DOT]com". Here the email tags are broken, so that a reader can easily deduce your email address, whereas spam-bots cannot.

Another foolproof method to protect your email address is to include your email on an image, such as this: This method ensures that your email address is only readable by humans, but adds the extra step that readers must type your email address, rather than simply click a link to their email client.

One final method is to break the html code of your email address by using spaces or alternative symbols, such as in the following examples:

youremail @ yourdomain . com
youremail[AT]yourdomain[DOT]com
These methods will all help to protect your email from malicious spammers when posting your email address on your blog. Do be aware that your email can also be harvested from comments, message boards and forums if you post your email address as normal, so be sure to disguise your email wherever you decide to post it!

Technorati Tags: | | | | | |

July 30, 2007

A search widget for your blog

Over at Beautiful Beta, I found a wonderfully simple search widget which operates in a similar way to the "Search this blog" feature found in the navbar. You can easily implement this widget into your blog by using the widget installer below:

Install Blog search widget

This form will take you to Blogger where you can choose to install the search widget into your sidebar (or other element of your template). However, if you prefer to install the search widget manually, you should take the following steps:
  1. Go to Template>Layout in your Blogger Dashboard.
  2. Create a new HTML/Javascript element in your sidebar.
  3. Insert the following code into the widget:
    <p align="center"><form id="searchthis" action="/search" style="display:inline;" method="get"> <input id="search-box" name="q" size="25" type="text"/> <input id="search-btn" value="Search" type="submit"/> </form></p>
  4. Give your widget a title if you like (eg: "Search this Blog"), and click save. You should now have a fully functional search box in your blog's sidebar!

So, if you prefer something simpler than the Google blog search I wrote about before, this is surely the widget for you.

Technorati Tags: | | | |

July 29, 2007

Use CSS styling to alter images in your blog

You can easily create filters for your text and images to alter them automatically using CSS styling, rather than alter each element individually. I've done this on a couple of the Blogger templates I've created: the "Sweet Dreams" template uses a greyscale image filter, while the "Sunset" theme uses transparency to create a halo effect around images. In this tutorial, I'll show you some of the most commonly used CSS styling filters which you may want to use to change the appearance of the images in your blog.

Here are some examples of filters and how they may be implemented:

Alpha Channel
Allows you to set the opacity of the element

For text:
<span style="width: 200; height: 50; font-size: 24pt; font-family: Verdana; color: red; Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=400, FinishY=0)">Alpha Channel</span>

For images:
Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)


Motion Blur
Blurs the element in a specified direction to the desired strength

For text:
<span style="width: 200; height: 50; font-size: 24pt; font-family: Verdana; color: red; Filter: Blur(Add = 1, Direction = 225, Strength = 10)">Motion Blur</span>

For images:
filter:blur(add=1, direction=225, strength=10)


Chroma
Removes the specified hexadecimal colour of an element

For images:
filter:chroma(color=#000000)


Flip Horizontal
Flips the element horizontally

For images and text:
filter:fliph


Flip Vertical
Flips the element vertically

For images and text:
Filter:flipv


Drop Shadow
Creates a drop shadow around the specified element

For text:
<span style="width: 200; height: 50; font-size: 24pt; font-family: Verdana; color: red; Filter: DropShadow(Color=#404040, OffX=2, OffY=2, Positive=1)">Drop Shadow</span>

For images:
style="Filter: Chroma(Color = #000000) DropShadow(Color=#404040, OffX=4, OffY=4, Positive=1)"


Shadow
Creates a shadow from the element in a specified direction

For text or images:
filter:shadow(color=#404040, direction=225")


Glow
Creates a glow in the specified colour around an element

For text:
<span style="width: 200; height: 50; font-size: 24pt; font-family: Verdana; color: red; filter:glow(color=#ffcc00, strength=5);">Glow</span>

For images:
style="filter:Chroma(Color=#ffffff) glow(color=#ffcc00, strength=5)"


Grayscale
Filters the element to be displayed in greyscale only

For images or text:
filter:gray


X-Ray
Converts the element to grayscale colours and inverts the brightness

For images or text:
filter:xray


Invert
Inverts the colours of an element

For images or text:
filter:invert


Wave
Creates a wave effect across the element to the specified variables

For text:
<span style="width: 200; height: 50; font-size: 24pt; font-family: Verdana; color: red; filter:Wave(Add=0, Freq=5, LightStrength=20, Phase=110, Strength=5)">Wave</span>

For images:
style="filter:Wave(Add=0, Freq=5, LightStrength=20, Phase=220, Strength=10)"


To implement a filter across all images or specified textual elements which appear in your blog, you should add appropriate styling to the style section of your template, between the <b:skin> and </b:skin> tags. Here are some examples:

For image filtering:
img {filter:chosenfilter;} To make sidebar titles glow:
.sidebar h2 {filter:glow(color=#ff0000, strength=5);}
To include filters individually in blog posts or in the sidebar, you will need to specify the filters in the image properties (for image filters) or within span tags (for textual filters. Here are some examples:
To make text have a drop shadow: <span style="width: 200; height: 50; font-size: 24pt; font-family: Verdana; color: red; filter:shadow(color=#404040, direction=225")>Shadow</span> To filter an image with X-ray: <img src=yourimage.jpg filter:xray>

For more information about CSS filters, visit W3Schools.com

Technorati Tags: | | | | | | | | |

July 28, 2007

Win a web design scholarship!

I've been contacted by CollegeScholarships.org to help promote their excellent web-design scholarship contest, which is open to all US citizens attending full-time, post-secondary education. The winner of this contest will win a scholarship to the value of $5,000!

Although BloggerBuster typically features help for Blogger, I thought it would be good to post about this competition for those familiar with WordPress templates to have their chance at winning this great prize!

Here's some more info from CollegeScolarships:

We are launching a cool new website, New Scholarships.org, and are in need of a fantastic design to replace the current default WordPress look. Since we are already experienced in handing out scholarship awards, this is a fun way for us to receive a great new website design...and a talented student to receive $5000! (collegescholarships.org)
The design needs to be a WordPress template, which should be uploaded to your webspace before submitting the URL and your details using the form found on the CollegeScholarships website.

The closing date for submissions is August 13th 2007, so act soon if you want to give the competition a try! Winners will be announced on the 20th of August on the site.

Technorati Tags: | | |

I'm back!

Hello everyone! I'm back from my holiday now, and unfortunately it seems that some of my pre-written posts haven't been posted (an error from my email service, I'm sure), so I do apologise for the lack of new material this week.

I do have quite a mountain of work and emails to wade through, but I will get back to everyone who's been in touch as soon as I can. Thanks to all those who have left comments, I do appreciate your input and suggestions. Please check back soon for new posts (more Blogger templates are in the pipeline too..)

Thanks,
Amanda

How to hide the Blogger Nav-Bar

At the top of most Blogger blogs you'll see a navigation bar, which enables you to flick from one blog to the next (plus additional options when you are signed in). Many bloggers have used CSS techniques to hide the nav-bar. At first, I thought it may be against Blogger's terms and conditions to do this, but after reading this post by Kawaljit, I now think it may be okay:
The Blogger's TOS page makes no reference to navbar while Google representatives in the Blogger support group (nickname: Blogger Employee) have always ignored discussion threads seeking an official stand on hiding navbar. 
There's some hope now. Google recently organized a road show in select Indian cities to promote their Blogger platform. Ankit attended the event and requested clarity on the navbar policy from the Googlers present at the roadshow. They immediately called up their team based in Google's Bangalore office and confirmed to Ankit that it's legal to hide the navbar.
If you want to hide the nav-bar in your blogger blog, here's what you should do (these instructions refer to the "new" Blogger layouts templates):
  • Go to Template>Edit HTML in your Blogger dashboard and first back-up your template to ensure you can restore it if you make unwanted mistakes!
  • Next, find this line in the template: </b:skin>
  • Just before this line, insert the following lines of code:
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
 
You can preview your template to see the effect in action, and then save your template to save the changes for good. (Thanks to Testing Blogger Beta for this hack!).
I don't include this hack in my blog since I actually find the navbar rather useful (especially when editing my blog) but I can understand why others would want to implement it. As yet, I haven't been able to find clear clarification about hiding the nav-bar from Google/Blogger, so if you do use this hack, please be aware of possible implications!

July 26, 2007

Special effects for "Peekaboo" posts

You've probably noticed the "expandable posts" feature in my blog. Well, the creator of this great hack has now come up with an even better alternative: Peekaboo posts" with a fade-in fade-out effect!
 
This really does look great on a blog: the post expands and retracts within the same window by fading in and out slowly. For full details and to get the script to install in your blog template, pop on over to Hackosphere's blog.

July 24, 2007

"Sweet Dreams" now available as a three column template

I've now modified the "Sweet Dreams" template to include a second sidebar to the left of the main column. You can preview this template in action here.
 
The features are pretty much the same as the original "Sweet Dreams" template, with the added functionality of a third column. I'm happy to see that even videos are filtered in black and white in the sidebar (though not when playing in the main column!), and that overall the design looks rather good.
 
You can download the "Sweet Dreams" three column template below:
 
 
Included in this download are the XML template file, a help file, all images used and widget templates for you to add your own music and search widgets. You are free to modify this template if you wish, but please leave the author credits present in the template. Please do not redistribute this template without a link to the author!
 
For more three column Blogger templates, take a look here.

July 22, 2007

Help! My new blog template/add-on/hack stopped working!

If you find that your third party template/images/script suddenly stops working on your blog, it may well be that the owner/author's hosting service has exceeded the allotted bandwidth, or perhaps that they have simply removed the file altogether!
 
Recently, Hackosphere suffered from bandwidth suspension after his host received far more traffic than was expected. Unfortunately for users of his scripts, this made their hacks and templates stop working!
 
In order to avoid this, it's always a good idea to download all images/CSS files/Scripts you use from third parties and upload them to your own hosting provider, then alter the link in your template to reflect the change.
 
While I try to ensure all template and image files used in my Blogger templates are hosted on a server which can accept a great amount of traffic, I do still appreciate it when users upload template images to their own image hosts.
 
Free image hosting is provided by
...amongst other free providers. Other files may be hosted for free at Google Pages.
 
 

July 20, 2007

"Sunset" three column template available for download

Here's another Blogger Buster designed 3 column themed template for you to download:
The "Sunset" template includes the following features:
  • Three column layout with two sidebars on the right.
  • Cross column section across the sidebars for AdSense, blog description, label cloud, etc.
  • Label cloud configured with themed colours
  • Unique layout style
  • User variables for font, colours, etc.
Updated 3/2/2010 to include support for Blogger's latest features

You can see the Sunset template in action here.

The download for this template features the XML template itself, plus a help file and all images which you can then upload to your own image host.

Download Sunset Template Here (zip format)

You are free to modify the template to suit your needs, but please leave the author credits intact. Please do not distribute this template without a link to the author.

You can find more three column Blogger templates here.

Technorati Tags: | | | | | |

July 19, 2007

How to schedule Blogger posts to a future date

One of the few things I'd hope to see in the new Blogger format was the ability to schedule posts to appear at a later date. Unfortunately, this hasn't (yet) been implemented in Blogger, so unlike Wordpress users, we can't schedule our posts.

Or can we..?

Well, actually, we can! There is a workaround which enables Bloggers to write posts in advance and schedule them to be sent by email at a specific date and time. Here's how it can be done:

Firstly, you should set up your "Mail-To-Blogger" address in your Blogger dashboard if you haven't already done so. To do this, go to Settings>Email in your dashboard, and create a unique email address to send your email posts to. Ensure you keep this address as secret as you would a password, since anyone could use this to post to your blog if discovered! Ensure you have checked the "Publish" box and then save your settings.

Next, you will need to create an email account which enables you to schedule emails to send at a future time. Many email clients have this feature already installed (I use GoDaddy's free webmail service, which was included with my domain). Here are two great free webmail services you can use to schedule email sending:

  • Letter me Later: Features the ability to write emails using your existing email address! Has an HTML editor, no advertisements, and a quick send client for ease of use. Free registration required for all features.
  • Email Scheduler: free service featuring unlimited storage, reminders and optional toolbar.

Once you have set-up an email scheduling service, you can write emails as you would your Blogger posts. The subject line will become the title of your blog posts, and if you use an html editor to compose your emails, you will have the same functionality as your Blogger "compose" function. Ensure you schedule the exact time and date you want to send the email before hitting send as this will be the exact time your post is published, and send to the email address you set up in your Mail-to-Blogger settings.

The only disadvantage of emailing your posts is that you cannot define labels for your posts before sending them. If anyone has discovered a way to do this, I would be very glad to hear from you! Of course, you could edit your posts at a later date from your Dashboard to add the labels.

This method of scheduling Blogger posts is something I will be using for the next week or so, since I'll be on holiday and unable to post as usual!

Please feel free to leave your comments below. If anyone knows of other free email scheduling services, please post them here and I will edit this post to include them.

Technorati Tags: | | |

July 18, 2007

Add background music to your blog

After uploading the "Sweet Dreams" template, I was asked how to embed background music in a blog. It's actually quite simple to do this, and there are various methods you can use.

In this post, I'll concentrate on actually embedding the music (rather than adding widgets such as Last.fm playlists). You can see an example of embedded background music here and also further down this page...

The easiest method of adding background sound is to include a line like this in your blog template, just after the opening <body> tag:

<bgsound src="http://yoursite.com/yoursound.mp3" loop=infinite>
where the URL is that of the background music you wish to use. This method works perfectly well, but visitors to your site will not be able to switch the music off if it becomes distracting.

So instead, you may prefer to use this method instead, which is compatible with all browsers (press the play icon to start music):

This is achieved by including the following code somewhere in your template (eg: the sidebar):
<embed width="200" src="http://yoursite.com/yourmusic.mp3" autostart="false" loop="false" height="50"></embed>
You can change some of the variables to suit your needs:
  • autostart: set to "true" to make the music begin as soon as the page is loaded, or "false" to ensure the user has to press the play icon
  • loop: set to "true" to have the music play over and over, or "false" so that it plays only once.
  • height: if this is set to "40", only the play options will be visible. You can make this larger if you prefer, in which case blank space will be visible.
Using either method, you can link to .mp3, .mid or .wav music files. However, you must be aware of copyright restrictions, and ensure you have the appropriate permission for use for the music you decide to use!

Here are some sites I've used for copyright-free music you could use in your blog:

Technorati Tags: | | | | | |

July 17, 2007

Create classic Blogger templates with ease!

For those of you still using classic Blogger templates, either because you publish by FTP or simply prefer the classic format, I've come across a wonderful tool: Psycho's template generator.

This template generator is a really simple and useful method of creating classic Blogger templates. You can completely customise colour schemes, choose from one, two or three columns, edit the header section and above all, ensure your new template is WC3 valid. Meta tags generated will also help your blog rank higher in search engines.

You will be able to see changes to your scheme as you change them, and are presented with the full HTML code to copy and paste into your template. I only wish I could find something so useful to generate templates for us "Blogger Layouts" lovers!

To generate your own Classic Blogger templates with PsycHo's free online tool, follow the link below:

PsycHo: Free Template Generator

Technorati Tags: | | | |

July 16, 2007

Create a three column Blogger template

In this tutorial, I'll explain how to create a three column template in Blogger layouts, using the Minima template as a starting point.

The Minima template is the easiest Blogger template to customise, as this is the simplest two column template, and has few parameters regarding margins, padding and the like. Once you have developed the third column, it will then be easier to alter font-size, colours and such so leave this until later on. We're going to concentrate on the actual layout first.

First of all, set your template to Minima (not the stretch template, but any colour will do!), then follow these instructions:

  1. Go to Template>Edit HTML, leaving the "Expand widget templates" box unchecked.
  2. Now, find this section in the HTML code:
    #sidebar-wrapper { width: 220px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }
    Copy this entire section, and paste it directly below. We're going to change the elements I've highlighted in red to the following:
    #left-sidebar-wrapper (this makes the css for this section unique) float: left (this will make the new sidebar float to the left of the main column)
    This will provide the styling for the new sidebar element which we will create next.
  3. Now, you need to find this section further down the page:
    <div id='main-wrapper'>
    . Immedietly before this section, you should paste the following piece of code:
    <div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>
    Let me explain the elements of this code to help you understand what we've just done:
    • <div id='left-sidebar-wrapper'> This section tells the browser that the left-sidebar element exists here, and to look in the css for the appropriate styling for this element.
    • <b:section class='sidebar' id='left-sidebar' preferred='yes'> This tells the browser the class of the sidebar element and all other elements (widgets) which may be included in this section. The ID of this element must be "left-sidebar" in order to make it unique, otherwie this would cause problems when viewing. It is preferred so that it will feature in the layout, even if no widgets are placed within it.
  4. If you preview your template, you will notice that the right sidebar will be beneath the main section at the moment. This is because the outer-wrapper is still only wide enough to accomodate one sidebar. So now we need to expand the oputer wrapper to accomodate this new sidebar. Find this section in the HTML code:
    /* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }
    We need to increase the width of the wrapper by the width of the left-sidebar-wrapper, in this case 220px. So, change the value in red to 880px.
  5. You may also want to change the width of the header-wrapper to 880px so that it spans the new width of your blog:
    #header-wrapper { width:880px; margin:0 auto 10px; border:1px solid $bordercolor; }
  6. At this point, you should save your template. At present, your new sidebar will not be seen as there are no widgets contained within it, though it will still be present in the markup of the page. Once you have saved your template, go to Template>Page elements in your Blogger dashboard.
  7. Your layouts section should now look something like this: You can now add a page element (or two) to your new left sidebar.
  8. But we aren't quite finished yet! If you add anything to this left sidebar, you will probably notice that it jams right up to the main section, like this: This is because there is no space defined between the left-sidebar and the main section. We need to create this space in the template's HTML. To do this, we will add a margin to the left hand side of the main posts section. Find the following code in your template's HTML and add the code defined in red:
    #main-wrapper { width: 410px; float: left; margin-left: 20px; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }
    This defines a margin space of 20px between the left-sidebar and the main column. You should also ensure you adjust thw width of the outer-wrapper from 880px to 900px to ensure the width of your blog is enough to accomodate this margin too. Either that, or you could reduce the width of your main column/a sidebar by 20px to serve the same purpose. Now, your previewed template should look more like this:
  9. Finally, save your template and enjoy your new sidebar!

The same principles described here can help you create a three column template from any Blogger template, though you may find that you'll need to adjust the width, margins and padding for your new sidebar in order for it to look the way you would like.

Also, you can configure your new sidebar to float to the right, and have two sidebars on the right of the main column if you prefer. Simply set the CSS of your new sidebar to float: right; instead.

Here is a download of the three column Minima template for reference (or if you prefer to use a preconfigured template instead!):

Download 3 column Minima template

For more Blogger templates to download, please have a look through the Templates section here at Blogger Buster.

Technorati Tags: | | | |

"Sweet Dreams" Blogger template available for download

After a week of hard work, I've finally completed a new template: "Sweet Dreams". Unlike other Blogger templates I've created, this is a two column template with the option of a wide or narrow sidebar. I'm really rather happy with how this one has turned out. Here's a screenshot for you:

...though I have to say that the screenshot doesn't do the template justice!

The "Sweet Dreams" template includes:

  • Option of wide or narrow sidebar two column layout, with three separate sidebar containers (separate XML files for wide and narrow contained in Zip download)
  • Animated header and sidebar title icons
  • Background music and search widgets included in zip file
  • Image "gray scale" filter for all posted images
  • Social bookmarking buttons on each post
  • Add page element to the header and post sections
  • Label cloud configured to match template colour scheme

Preview the Sweet Dreams templates here

For this template, I've included everything you need in a zip file, including XML files for the narrow and wide templates, all images, background music, widget templates and instructions. You can download the Sweet Dreams templates below:

Download Sweet Dreams Template

If you use this template, I would appreciate a link back to Blogger Buster somewhere in your blog. Please do not redistribute this template without including details of the author.

In the near future, I will also create a three-column template of this theme. In the meantime, please leave your comments and opinions below.

Technorati Tags: | | | | |

July 14, 2007

Create a favicon for your blog

A "favicon" is the icon which appears in the left of your address bar and in your "favorites" menu in your Internet program. I've just added a favicon to my blog, which you should be able to see in the address bar above (Internet explorer users must have Blogger Buster bookmarked before the icon can be seen, as I will explain later).

To have a favicon for your own blog, you'll first need to create an icon which is 16x16 pixels in size, and save this as a .ico file to your computer. I used Gimp to create my favicon (which is a free program with most of the functionality of Photoshop), though you could also use paint or any other graphics creation program.

Alternatively, you could visit one of these sites which have pre-made favicons available for free download:

Once you have your favicon, you'll need to upload this to a hosting account. If you already have a hosting account somewhere, you can upload it there. Free image hosting for ico files is available at Ripway (30gb space), and also at MyFavatar (registration required). Be sure to make a note of the exact URL of your favicon when you upload it!

Now, you'll need to add the following code to your Blogger template between the <head> and </head> tags (Change the code in red to reflect the URL of your favicon):

<link href='http://imagehost.com/yourfavicon.ico' rel='shortcut icon'/> <link href='http://imagehost.com/yourfavicon.ico' rel='icon'/>
The easiest way to do this is to search for </head> in your template HTML and insert the code just before this tag.

Now save your template and view your blog. You should now see your favicon appear in the address bar!

If you are using Internet Explorer, you will need to bookmark your blog before the icon will be seen. You may also need to refresh the page/close the window before your icon will appear (a rather unfortunate glitch in IE, and yet another reason to recommend Firefox!). But be assured that it will appear! Also, when you bookmark your blog (or indeed any other website featuring a favicon), the icon will appear in your favorites list beside the site title.

Having a favicon for your blog enhances your blog's branding and identity, and is also quite fun! If you have created a favicon which you would like to share, please let me know as I will shortly be posting a set of favicons here for free download.

Technorati Tags: | | | | | |

July 13, 2007

Create a table of contents for your blog

Today I discovered an excellent hack over at Beautiful Beta: a widget which enables you to automatically show a table of contents for all of your blog posts! I've now added this to my template so you can easily access all of the posts here, and sort them by title, post date or label. Simply click on the "Show table of contents" link near the top of my right sidebar.

Hans' hack is remarkably easy to implement into your blog, since he has provided the code ready for you to copy and paste into the relevant sections.

In order to use the Table of Contents widget, you will need to alter your template slightly so you can add a page element to the top of your blog posts. This is so the table of contents can expand into this area, leaving your posts in place beneath.

After this, it's a simple case of copying and pasting code into HTML page elements in this new section, and also in a sidebar widget.Use this link to read Hans' post featuring the code and implementation of this great Blogger hack.

This widget can also be customised using CSS to alter the styling, which you would insert between the <b:skin> and </b:skin> tags near the top of your blog template (I will be doing this to my own CSS section shortly!).

This hack really is a great way to organise your blog posts in order to make it easier for readers to find posts they are interested in.

Technorati Tags: | | | | |

July 12, 2007

Create an email subscription box with FeedBurner

Email subscriptions enable your readers to receive your posts by email, and can be a great tool for helping develop a regular readership to your blog.

In order to offer your blog posts by email, you will need to sign up with a feed management service who will then manage email subscriptions for you, and will send updates to your subscribers each time you update your blog. I use Feedburner's free service for email subscriptions. You can see my email subscription widget in the sidebar to the right. Here's how you can set up an email subscription box for your own blog:

  1. Visit Feedburner.com and insert your blog URL into the box, then click "next".
  2. On the next screen, select the feed you would like to offer subscriptions for. The default for Blogger is Atom, which you can customise to be long (full post), short (first paragraph) or simply headlines in your Blogger dashboard.
  3. Once you've chosen the feed you would like to publicise, you can then edit the title of the feed and the URL where it can be located.
  4. Then create your free account with Feedburner (or sign in if you already have an account) and click "Activate feed".
  5. Now, your feeds will also be publicised by Feedburner and you should be able to log in to your Feedburner dashboard. So let's create your email subscription box! Click on the feed title for your blog, and then the "Publicize" tab at the top of your dashboard.
  6. Look for the "Email subscriptions" link in the left column and click this. Choose the language you would like to use to publicise your feed.
  7. If you are using New Blogger (layouts templates), you can easily insert an email subscription widget into your blog sidebar. Find the "Use as a widget in..." section and choose "Blogger". You will then be directed to your Blogger dashboard to confirm insertion of this widget and rearrange its location in your layout.
  8. If you are using Classic Blogger templates, you should copy the code section and paste this where you would like the email subscription box to appear in your blog.

Once you have set up your email subscription box, you can customise the look by opening the widget in Layouts. You can alter the text, font and even the alignment to suit your tastes.

You can choose further options from Feedburner's service through your Feedburner dashboard, such as notification by email when someone subscribes/unsubscribes to your feed, track clickthroughs, etc. Feedburner also supply feed subscription buttons which you can use to publicise your blog feed for subscribers to read in a feed reader.

Technorati Tags: | | | | | | | |

July 11, 2007

"Recent comments" widget for Blogger

Blogger Templates have a great "recent comments" widget available which you can use to display recent comments in blog. You can see an example of this in my right sidebar.

To use this widget in your blog, head over to Blogger Templates and choose your options, including the Blog*Spot url of your blog. Click "apply" then "Add widget to my blog".

You will then be taken to your Blogger dashboard where you can automatically insert this widget into your Blogger layout.

If you have a custom domain, you can still use this widget! Simply go to Template>Page elements in your Blogger dashboard and open up the recent comments widget. The code should look like this:

<script style="text/javascript" src="http://giga.ovh.org/rc"></script><script style="text/javascript">var a_rc=3;var m_rc=true;var n_rc=true;var o_rc=100;</script><script src="http://yourblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
You need to change only the red section of the URL to your custom domain URL (eg: http://www.yourblog.com). Click save and you should then see your recent comments appear.

Technorati Tags: | | |

How much is your blog worth?

I found this great applet over on Dane Carlson's blog which gives an estimation of how much your blog is worth:


My blog is worth $11,290.80.
How much is your blog worth?

The applet was inspired by Tristan Louis's research into the value of each link to Weblogs Inc. Dane Carlson then created this little applet using Technorati's API which computes and displays your blog's worth using the same link to dollar ratio as the AOL-Weblogs Inc deal.

To find out how much your own blog is worth, head on over to Dane's Business Opportunities weblog and input your blog's URL. You'll then be presented with an image similar to the one above displaying the value of your blog, and the code which you could use to insert this into a post or even your blog sidebar. The applet will automatically change to ensure your blog's value is kept up to date.

Why not give it a try? You may be pleasantly surprised...

Technorati Tags: | | | | | |

July 10, 2007

"Blues" three column template download

I've now finished work on another 3 column Blogger template (XML format). This one's in a classic "Blues" colour scheme (hence the name), featuring two sidebars on the right of the main posts section. Here's a screenshot for you (click to enlarge):

This template features many customisations including:

  • Complete control of background colours for all sections
  • Social bookmarking buttons
  • Post calendar widget
  • Label cloud
  • Rounded corners
  • Add/remove page elements in blog header and posts section
Download Blues Template (XML)

For instructions on uploading this template to your blog, please read this post.

You can also preview the Blues template in action here.

I'm also developing a few more Blogger templates to download which I'll post as soon as they are ready. Please leave your comments and opinions below.

Technorati Tags: | | |

July 09, 2007

Set up your free GoDaddy hosting account

When you purchase a domain from GoDaddy, you will be entitled to a free ad-supported hosting account. This is great for bloggers who may need to set up a redirection page to their true blog address. I've been asked a few times now how to set up this free hosting account, so I thought it was about time I posted a walk through!

Assuming you have already purchased a domain name from GoDaddy, you should have your login details and be able to log in to your GoDaddy account. Once you have your login details to hand, this is what you should do:

  1. Log in to your GoDaddy account manager.
  2. Select "Hosting account list" from the "Hosting and email menu" in the navbar near the top of the page. This will open the "manage hosting page"
  3. On this page, you should see a link saying "Use credit" next to "Free Hosting Credits". Click on this link to open the next page.
  4. On the right, you should now see "set up free hosting". Select the domain you would like to associate your hosting account with, and choose either Windows or Linux hosting. The main difference between Windows and Linux hosting is the ability to use different programs and databases in your hosting account, so if you're only using this to host a redirect page for your blog, it wouldn't matter which you choose.
  5. Once you've made your choices, click continue, then go to the Hosting Account list. Click on "Set Up Account" next to the New Account (Free with Domain) that you want to set up.
  6. In the Hosting Control Center, click Accept to accept the End User License Agreement.
  7. Now, you'll need to set up your free hosting account with the following information:
    • Enter New User ID: Create a user name that you will use when you log in to this hosting account. This can be different to the login name you use when logging into your GoDaddy account.
    • Enter New Password: Create a password that you will use when you log in to this hosting account. Again, this can be different to the one you use to log into GoDaddy.
    • Confirm New Password: Re-enter the password that you just created.
    Make a note of these details so you can log into your hosting account later. Then click continue.
  8. Verify your Domain Name and User ID, click Submit, and then close the Hosting Control Center. It may take a day or two for your hosting account to become active; you will receive an email when the hosting is activated, including your FTP settings, so it's probably best to wait for this before attempting to log in to your new account.
Once your ad-supported hosting account is active, you can upload files by FTP. The easiest way to do this is to use an FTP client program such as FileZilla (a free, open source program) to connect to your hosting account. Alternatively, you could use GoDaddy's web based ftp client, which you can read about here.

Now that you've set up your GoDaddy ad-supported hosting account, you can easily upload your redirect page, or indeed any other files to your hosting account.

Related posts:

Technorati Tags: | | | |

July 08, 2007

Create a redirect page for your blog

If your blog's web address has changed, or if you are using Blogger's custom domain service, you may have need of a redirect page for your blog. A redirect page stays at the location of your old blog (or at the http://yourblog.com address if you are using a Blogger custom domain) and automatically redirects users to your blog's true address.

Here's how to create your own redirect page:

  1. Copy the whole text in the box below and paste into a simple text editor such as Notepad. Change the text in red to reflect your true blog address, and the text in blue to something which better suits your needs.
    <html> <head> <meta http-equiv="refresh" content="8; url=http://www.yoururlhere.com" /> </head> <body bgcolor="#cceedd"> <center> <p> <font color="#446666"><b>Your text and images here</p> <p>For example: My blog is located at www.mydomain.com. You will be redirected to my blog in about 8 seconds. Please update your bookmarks to reflect this new address. </p> </body> </html>
  2. Take note of this line:
    meta http-equiv="refresh" content="8;
    The "8" means that the browser will wait 8 seconds before redirecting to your true blog address, just enough time for the visitor to read the text and understand the reason for the redirection. You can change this to "0" instead, which means that the redirect would be immediate, and the visitor would be unaware of the change in web address unless they look at the address bar. However, it is good practice to have at least the URL of your true blog address in the body of the page as some older browsers do not recognise the redirect function and would be unaware that your blog is not hosted here.
  3. You should also change the font and background colours to suit your tastes and blog colour scheme/branding. Images can also be displayed in the body section of the page (between <body>> and </body>)
  4. Now, save this file to your computer with the file name "index.html". It is very important that you name it such, as this needs to be the page which loads when a visitor types http://yourblog.com into their web browser.You can preview this in your own browser to check the page looks okay, and you should be redirected to your true online blog address within the time you specified in the meta section.
  5. Now, you need to upload this to the root of the folder where visitors would visit your blog. If you have purchased a custom domain for your Blogger blog, for example, you would upload this to the root of your hosting account. If you are uploading to a previously used sub domain at http://blog.yoursite.com this may be the root of the folder named "/blog/".
  6. Go online to your redirect page address (eg: http://yourblog.com/index.html) and check that the redirection works. Then all you have to relax and know your visitors will be able to find you!

If you have purchased a custom domain for use with a Blogger blog, you should find that your domain provider will provide at least enough room for a single web page, which you can use to upload your redirect page. I use GoDaddy for domains, as this company provides free hosting, personal email address and other features of great use to Bloggers. (Just in case you're wondering, I don't get paid to recommend GoDaddy; but of all the domain providers I've ever used, this company is simply the best value I've found!).

If you have any problems setting up your redirect page, feel free to contact me directly for more detailed help.

Related posts:

Technorati Tags: | | | | |

July 07, 2007

Rounded corners for header and sidebars

Thanks to Beta Blogger for Dummies, I've discovered an easy way to create rounded headers and sidebar enclosures: Cornershop!

Using CSS and HTML code, you can create rounded corners for your header or sidebars in a variety of colours to blend seamlessly with your colour scheme. Simply visit the Cornershop website, specify the colours of the box and background and the roundness of the corners you require. Cornershop will then generate four corners and the CSS/HTML code to paste into your blog template.

Here's how to do it:

  1. Head over to the Cornershop website. Choose the colours of your background and foreground in the boxes provided. If you need the HEX values for your chosen colours, try Cedges Colour Calculator which will generate the values for you.
  2. Choose the roundness of your corners: as a guide I'd say that 10 is neatly rounded, while 20 is very rounded.
  3. If either your foreground or background is patterned or transparent, choose transparency for this element of your design.
  4. Click on "create graphics" to generate the corners and HTML/CSS code you will need to round your corners.
  5. Now, you will need to save the corner image files to your hard drive, then transfer then to an image hosting account as you will need to link to these images in order for them to appear in your blog template. Imageshack and Photobucket both offer free image hosting if you do not already have an account elsewhere. Make a note of the full web address of these images as you will need to use these soon.
  6. Copy both pieces of code (CSS and HTML) provided by Cornershop and paste these into a simple text editor (such as Notepad) for ease of use.
  7. In the CSS section, insert the full web address for all of the image files. For example, for the NE.gif file, the address would be something like: "http://www.imagehosting.com/images/ne.gif" .
  8. Copy and paste this section of modified code just before the closing </b:skin> tag in your template
If you want to round the corners of your header, you should follow these steps:
  • Log into your Blogger dashboard and go to Template>Edit HTML.
  • Now find this line in your template:
    <div id="header-wrapper>
  • Immedietly after this line, paste the following code:
    <div class='box'> <div class='boxtop'><div></div></div> <div class='boxcontent'>
  • Next, find these lines:
    </div> <div id='main-wrapper'>
    Immedietly before these lines, paste this section of code from the HTML provided by Cornershop:
    </div> <div class='boxbottom'><div></div></div> </div>
  • You can preview your blog first to ensure it looks the way you would like, then press save and enjoy the new look of your blog header!
To round the edges of your sidebar, use these steps instead:
  • Find this section in your HTML template:
    <div id='sidebar-wrapper'>
    Immedietly after this line, paste the following code:
    <div class='box'> <div class='boxtop'><div></div></div> <div class='boxcontent'>
  • Now find the closing </div> tag for the sidebar wrapper. Immedietly before this tag, paste the following code:
    </div> <div class='boxbottom'><div></div></div> </div>
  • Preview your template, and if all looks as you would like, save your template and enjoy your rounded corners!

You can use more than one set of corners in your template if you like (for example, one for the header and another for the sidebar). However, if you want to use different colours for these, you must make the image files, the CSS and the DIV elements unique. For example:

  • the image file, ne.gif when used for the sidebar could be renamed sidebar-ne.gif
  • In the CSS code, the elements named .box and .boxtop could be renamed as .sidebar-box and .sidebar-boxtop
  • In the HTML code in your template, you should write <div class="sidebar-box"> rather than the header's <div class="box">

Of course, you could create rounded corners by creating your own transparent gif's in Photoshop or something, but I find the cornershop method to be much simpler and easier! Just be sure to input the correct colours you would like to use when creating your corners as the code you are given for the CSS style will override any colours you use within Bloggers "fonts and colours" section in the dashboard.

Please feel free to leave your comments and suggestions below.

Technorati Tags: | | | |

July 06, 2007

Tell Blogger which features you would like to use!

If there is a feature you would particularly like to use in the Blogger platform, you can vote for it in the Blogger Wish List! Just select the feature you would most like to see and submit your vote. Alternatively, you can suggest a new feature of your own.

For me, Blogger enabled trackbacks would be a great feature to include. What's on your Blogger wish list?

July 05, 2007

Create a "tag cloud" for your blog

You may have seen "tag clouds" in other blogs which feature keywords from the blog posts in a cloud format. These are different to "label clouds" which are constructed of the labels you use for your Blogger posts. You can see an example of a "tag cloud" I constructed for Blogger Buster here:

I created this tag cloud for free over at ZoomClouds, which allows you to customise the size, colour scheme and included tags of your cloud. To create a tag cloud for your own blog, here's what you'll need to do:

  1. Head on over to ZoomClouds and create your free account. This will allow you to use the tag cloud service and store your designs on site.
  2. Now it's time to create your first tag cloud! Sign in to your ZoomClouds account and click on "create cloud|" near the top of the page.
  3. Give your cloud a name and description, and submit your RSS or Atom feed. For Bloggers this will either be "/feeds/posts/default?alt=rss" or /atom.xml" at the end of your blog address (eg: http://yourblog.blogspot.com/feeds/posts/default?alt=rss).
  4. Select how many days worth of content you want to include in your cloud. The maximum will depend on how many posts are included in your feed, so you may want to consider changing your feed settings if you want to include all of your posts in the tag cloud.
  5. Click "create cloud" to create your cloud based on these settings.
  6. You can then view your cloud with the default ZoomClouds design to see how it can look. To change the appearance of your cloud, click on "design" near the top of the screen and choose your settings, including border colour, fonts and more. You can save multiple templates of the same cloud here too.
  7. To get the code for your cloud, click on "design" and scroll down the page a little until you see the code box. Select all of the code (Ctrl+A) and copy to your clipboard. You can then insert this into your blog template where you would like it to be displayed.
  8. If there are tags in your cloud which you would prefer to be left out, you can choose this by clicking on "Filters" near the top of your ZoomClouds dashboard and adding each unwanted tag in the box supplied. Similarly, you can also add tags that you want to be included in the cloud which aren't yet featured.

Tag clouds could be used instead of label tags in your blog, or indeed as well as labels, since they are a reflection of your post content, rather than the labels you give to your posts. Example usage would be in a sidebar widget, though you may also want to consider featuring one at the top of your posts (see this post for a tutorial), or even in a blog post as I have done here!

Technorati Tags: | | | |

July 04, 2007

Create an animated advertising banner for your blog

Have you ever wondered how to create an animated banner to advertise your blog? Here's an example of one I created earlier:

You could use a banner like this to advertise your blog on other sites, or even to draw attention to pages on your blog.

I used AnimationOnline to create this banner for free. There are a variety of designs to choose from, including boxes such as these:

To create your animated banner, head over to AnimationOnline and choose your design. Key in your titles and text, and click "make banner". You can then right click your animated banner to save to your PC.

In order to display your banner properly in your blog, you'll need to link to host the image elsewhere and link to it using HTML code. Photobucket and Imageshack provide free image hosting if you don't already have a hosting account elsewhere. Don't try to host your animated gif at Blogger, as the image will be static! Make a note of the web address your image is hosted at as you'll need this soon.

Now, to make your image appear in your blog, you can insert this code into an HTML/Javascript widget, or insert into your template where you would like it to be displayed:

<img src="http://www.imagehost.com/yourimage.gif"/>
Don't forget to substitute the address with that of your hosted image!

If you want to link this image to your blog, you should also wrap link tags around the image tags like this:

<a href="http://yourblog.blogspot.com"><img src="http://www.imagehost.com/yourimage.gif"/></a>
Don't forget to substitute your own blog address!

Related posts:

I'd love to hear about any other free animated banner services, so if you know of any please leave your link (and comments, of course) below.

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:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy