Wednesday, 30 April 2008

Google PageRank Update Soon?

As I looked in my feed reader this morning, I realized everyone's talking about the upcoming Google PageRank update.

At the time of writing this, it seems that Google is updating the toolbar PR ratings, and a full PR update is expected sometime in the next week or so.






I've wondered for a while if a PageRank update may be due soon. I've certainly noticed many changes in the way Blogger Buster is ranked in Google search results. Now you can see "sitelinks" appear in a search for Blogger Buster:

Hopefully the recent PR drops for sites using advertising methods Google disapproves of has come to an end, and we will finally see a true PR update in the next few days.

If you've noticed any changes in PageRank (or know of a reliable PR checking site which is currently operational) please let us know by leaving your comments below.
Posted by at No comments:
Labels:

Tuesday, 29 April 2008

How to Create an Animated Page Loading Icon (Ajax Style)

You've probably seen "ajax-style" loading icons before. These small animations appear on web-pages while page elements are loading, and disappear (or are replaced by content) when the page has fully loaded.

Inspired by the page loading feature I noticed in Meta-Microcosmos, I decided to find out how to add an animated ajax-style loading icon to Blogger templates.

After a little trial and error, I discovered a solution which is cross-browser compatible and can be added to your template in one easy step. So in this tutorial, I'll explain how you can add an ajax-style page loading icon to appear in the top corner of your Blogger template which disappears once the page has loaded.






The loading icon used for this tutorial is the same as that which appears in the top-right hand corner of this blog when you load the page:

This small, unobtrusive image has a minimal file size, and is easy on the eyes so it doesn't detract from other style elements of the page.

Of course, if you would prefer to use a different icon, you can change the URL of the image in the code used for this hack as I will explain shortly.

Adding the Loading Icon to your Template

Adding this page loading icon is as simple as copying and pasting a section of code!

Simply go to Layout>Edit HTML in your Blogger dashboard, and find the opening <body> tag.

Then replace this tag with the following section of code (copy to your clipboard, then paste this in place of the <body> tag):

<body onLoad='init()'>

<span id='loading' style='position:absolute; text-align: center; top:10px; right: 10px;'><img border='0' src='http://bloggerbuster.com/images/loading.gif'/></span>

<script>

var ld=(document.all);



var ns4=document.layers;

var ns6=document.getElementById&amp;&amp;!document.all;

var ie4=document.all;



if (ns4)
ld=document.loading;

else if (ns6)

ld=document.getElementById(&quot;loading&quot;).style;

else if (ie4)

ld=document.all.loading.style;



function init()
{

if(ns4){ld.visibility=&quot;hidden&quot;;}

else if (ns6||ie4) ld.display=&quot;none&quot;;

}

</script>

You can then preview your blog to see the page loading icon appear in the top right-hand corner of your blog template momentarily until the page has loaded.

Providing there were no errors received when you previewed the page, you can then proceed to save your template.

That was easy, wasn't it?

Changing the Animated Icon

Of course, some of you may prefer to use a different animation to the one featured here.

Any animated GIF image may be used as a page loading icon, and all you have to do to alter the image is change the URL in this line of the script to match the location of your preferred image instead:

<span id='loading' style='position:absolute; text-align:center; top:10px; right: 10px;'><img border='0' src='http://image-host.com/your-loading-image.gif'/></span>

Ajaxload is a really useful resource for generating your own color styles of image loading icons. Alternatively you can find a great selection over at Sanbaldo.com

Adding text to the loading icon

You can even add an explataroty "loading..." message to your icon by adding this just before the icons image tags, like this:

<span id='loading' style='position:absolute; text-align:center; top:10px; right: 10px;'>Loading...<img border='0' src='http://image-host.com/your-loading-image.gif'/></span>

A little info about this script

I had originally experimented with the script used in Meta-Microcosmos to feature the loading icon which is housed in the <head> section of the template.

However, this caused some problems when viewed in IE6 as this caused the icon to appear above the template, rather than in the corner (it occasionally caused the page to freeze too!).

So instead I adopted this version which uses the body onload function to cause the script to take action. This ensured that the icon appeared correctly in all browsers I have tested in, including IE6 and 7, Firefox and Flock.

If you notice any problems in other web browsers, please let me know about this!

Also you may have noticed the need to "escape" certain HTML characters within the script itself. This is because Blogger parses JavaScript differently when it is featured in the body (rather than the head) section of the template. However, when you look at the source code of your template, you will see the original script coded correctly.

Final Thoughts

While this Blogger hack may be mostly cosmetic, it is a fun and interesting feature which can add style and personality to your template design.

I hope this article has been useful for you! If you have enjoyed this tutorial, please consider subscribing to Blogger Buster for future tutorials and Blogger news.
Posted by at No comments:
Labels:

Monday, 28 April 2008

Blogger Updates: Bug Fixes, Finding Help and Other Interesting News

Blogger has recently updated some elements of the system. Blogger Buzz announced some bug fixes a few days ago (which should solve a few of the problems we've had managing our blogs) and also a couple of interesting updates. Furthermore, it should be a little easier for bloggers to find help when needed thanks to a dedicated page which explains how the support system works.






Recent Bug Fixes

The most significant bug fixes include:

  • The "Add another image" link in the image upload window now works even before you have specified an image to upload.

  • Better predictability for auto-completion of labels in the post-editor's label field.

  • URLs in the Name / URL part of the comment form are now validated (this is a fix I've been hoping to see for some time!)

  • The draft / published / scheduled filters on the Edit Posts list now work reliably in Internet Explorer (read more about Blogger's post schedule feature)

For the full list of bug fixes, pop over to read the post on Blogger Buzz.


Finding Help

If you take a look in Blogger's help section, you may notice a new link in the footer:

Now I have to say that the link text here is a little misleading. There is no new email system to contact the Blogger team directly. Instead this link will take you to Blogger's contact policy page which thoroughly explains how to find help and support for your Blogger related problems:

This page will surely be welcomed by new bloggers who previously were unaware of the process for getting help. Also, this makes clear the instances when email help may be offered:

  • For login and blog access issues

  • To report abuse of the Blogger system

  • To report a bug to the Blogger team

All other support queries should be directed towards the Blogger help group or resolved by reading through the official Blogger help center instead.

If only Blogger would offer some sort of dedicated email support though: I'm sure hundreds of Bloggers would be incredibly happy!

Other News of Interest

CATCHPA Problems? Blame the Spammers!

Many Blogger users have complained about the problems deciphering Blogger's CATCHPA (Completely Automated Public Turing test to Tell Computers and Humans Apart). From what I have read on other sites, I imagine this is linked to spammers having discovered a method of bypassing the earlier system in order to create spam blogs, many of which lead to sites which infect our computers with spyware.

Blogger have been trying hard to reduce spam in Blogger hosted blogs in recent months, and it seems the increased CATCHPA protection may be an effort to counteract the automated spammers invading this free service and giving Blogspot a bad name!

However, this increased CATCHPA security does have its downfalls. As ThatGrrl pointed out:

They're awful. I couldn't read them [...] If you are using word verification this is what you are inflicting upon your commenters (or those who choose not to translate the word verification and don't comment). (Source)

Because of this problem, many Bloggers may opt not to use comment verification. After a few complaints, I'm wondering if Blogger Buster should remove this too..

It seems that CATCHPA is no longer a viable tool for deterring spammers, but we can hardly blame Blogger for that! Any free service which can be manipulated by spam-bots will continue to be abused, whether this is Blogger or any other free hosting service. I only hope that the Blogger team may implement a solution soon which will be of benefit to us all.

Blogger adds XFN Support

If you've read through the recent bug fixes page, you would be forgiven for having overlooked this new feature.

XFN (XHTML Friends Network) is a way to demonstrate relationships between the authors of web pages by adding rel="me/friend/sibling/spouse/etc" to links in your blog or in the head section of your template.

Blogger now automatically adds a rel="me" statement in your blog's head section which links to your Blogger profile page. This demonstrates that your blog is owned and maintained by you, which is helpful for services such as LinkedIn, MyBlogLog and Ziki which use and understand these XFN relationships.

I'm going to write up a full post about XFN annotations and their uses in the near future which I hope will offer you a better understanding of how this works and how it XFN links may be implemented into your Blogger templates. In the meantime, you may want to take a look at the XHTML Friends Network site which offers an easy to understand introduction to XFN.

I hope you have enjoyed reading this summary of Blogger related news and updates. As always, your comments and opinions are much appreciated!
Posted by at No comments:
Labels:

Saturday, 26 April 2008

Create a Sprout to Promote your Blog!

Sprout Builder is a fabulous (and free) new service which you could use to create an interactive promotional widget for your blog.

To give you an idea of what can be achieved using Sprout, I've quickly created this promotional Blogger Buster widget. This only took around 20 minutes to create, but those who have more time and patience could easily create an incredible promotional tool for their blogs which (as you can see) can be easily emailed, embedded and shared by it's viewers.






If Sprout Builder seems like a tool you would be interested in using too, you can get started creating your own widget right away! You will need to register your name and email address in order to save and publish your widget, but the easy "greenhouse" building platform will offer you an idea of the possibilities until you're ready to sign up for your free account!

One of the best things about Sprout widgets is that they can be embedded in almost any web page. Even in MySpace! This means you could create a Sprout to promote your blog and include this in your online profiles, your web page, send it by email and ask your friends to share it too.

A great Sprout widget could easily become viral, and when used as a means of blog promotion this has the potential of gathering more readers (and potential subscribers) to your blog.

Sprout is rather easy to use. Building your widget is a case of "drag and drop", but I would advise using one of the pre-made templates to get an idea of how pages are constructed before trying to build one from scratch!

My only complaint so far is that the widget builder hogs my computer's memory; after using this for a while I noticed the interface became rather slow (but then my beloved laptop isn't quite as high-spec as I'd like...).

No doubt, Sprout will become an invaluable marketing tool as it's popularity develops. I'm definitely using this for some other projects I have lined up in the coming weeks!

Pop over to Sprout Builder to check it out for yourself and let me know what you think about using this as a promotional tool for your blogs. And if you create a great Sprout of your own, feel free to send this my way!
Posted by at No comments:
Labels:

Thursday, 24 April 2008

Creating an Archives Page in Blogger

An archives page can be a really useful place for your readers to locate posts of interest or simply browse through your previous posts at leisure.

Recently I've received some feedback from readers who suggested I create an easier method to browse previous posts. So I decided to create a dedicated "Archives Page" which I hope will help readers easily locate previous posts to suit their needs. My archives page features links to my monthly archives, an explanation for each category and also a simple search function for easy browsing.

In today's post, I'll explain how I created my Blogger archives page, and list some of the reasons why this method of archiving could be useful for you too.






Why you may want to create an "Archives" page

Most successful blogs feature a link to their archives pages for visitors who would like to read through previous posts.

Such archives pages need not be limited to temporal pages which contain links to a monthly or weekly list of posts though. You could also use an archives page to link to your labels/categories and provide an explanation of your filing system which can help your readers locate posts of interest.

Blogger does not offer us a template to create an archives page for our blogs. Instead, we have an "Archives" widget available which you can add to your sidebar (or indeed anywhere you are able to insert a new "Page Element" within your template). However, such widgets don't offer much of an explanation for your readers about your archiving system. Also, if you have been blogging for a long time (or use weekly/daily archives) this list can become quite long.

Creating a dedicated archives page for your blog allows you to offer your readers a better insight about your blog, offer an easy means of locating and browsing through previous posts, and may be styled in any way you like.


How to create an archives page in Blogger

When creating an archives page for your Blogger blog, you must understand that there is no magic script which will generate all necessary links for you. Instead, we have to manually create all links to our monthly/weekly archives pages, and also to any labels pages we may like to present.

While this may seem like a daunting task (especially if you have a huge backlog of posts or a large number of categories), the good news is that once you've compiled your page you can periodically update this with much less effort.

Deciding on a format for your archives page

For my own archives page, I decided to include:

  • Links to my monthly archives pages

  • Links to each label/category page with a brief explanation of what these posts are about

  • A simple search function which may help readers locate the content they are searching for

For your own archives page, you may prefer to include a slightly different set of links, such as a list of your most popular posts or important pages from your archives.

Once I had decided what I wanted to include, I set about designing the format I preferred to present these links in. While long lists of links was an option, I decided to make better use of the page and use a columns system so that each set would be divided into two columns on the page.

Here is a breakdown of the design of my archives page:

I used headings (<h3> and <h4>) for the section titles, and divided up the sections into two columns using DIV's which were styled like this:

<div style="width: 45%; float: left;">Left Column Content Here</div>

<div style="width: 45%; float: right;">Right Column Content Here</div>

<div style="clear: both;"></div>

The final DIV with the "clear: both" styling ensures that any content beneath the columns does not bunch up between the columns and disorganize the array.

This method of styling your post can only be achieved when editing your posts in Edit HTML mode, so if you usually use the Rich Text editor for your posts, you may need to switch temporarily in order to duplicate this process.

Adding links to the monthly archives and labels pages

As I mentioned earlier, it is necessary to add these links manually. The easiest method is to add both a label and archive widget to your sidebar (you can always remove these afterwards), then open up your blog in a new tab or browser window.

Then on your post editing page (in a different tab/window to your blog) write the link text for each archive/label. Copy the required links from your sidebar widgets (usually you can right click on a link and choose to copy the link location to your clipboard), then use the hyperlink function in your post editor to add these links to your post.

Adding a simple search function to the page

If you would also like to add a simple search box to your archives page, can simply add the following section of code where you would like the search box to appear in your post:

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

This simple search code is the same which is used in the Blogger nav-bar which searches through your posts to provide relevant search results for your readers queries (read more about this simple search function).

Saving and Linking to your archives page

Like other pages you may like to create for your Blogger blog, it is a good idea to backdate this post so that it doesn't appear to be a recent blog entry.

You can do this by changing the date in the "Post Options" link below your post editor.

Then once you have saved your post, locate the URL for this in the Edit Posts page of your Blogger dashboard and copy this link to your clipboard.

Finally, add a link to your archives page from somewhere in your blog template. If you have a navigation bar in your design, this would be an ideal place to feature your link so readers can easily locate this. Alternatively you may prefer to add a link in a sidebar widget, or in the footer section of your blog.

I placed a link to the Blogger Buster archives page beneath the search box in the header section, among other important links.

And there you have it: a custom-made archives page for your Blogger blog!

I hope you have found my explanation useful to help you create your own archives page using Blogger. I would love to see other examples of Blogger archives pages, so if you create one of your own, please let me know by leaving your comments below.
Posted by at No comments:
Labels:

Wednesday, 23 April 2008

Change your Blog Background According to the Time of Day

I've been working on a script which you can use to change the background color, or even any other background element of your blog, depending on the time of day.

You can see this script in action on the Time of Day test blog. Here I have used the script to change the main background color of the Minima template according to the time of day. Take a look at different times to see the changes take effect.

There are two versions of this script available for you to install instantly in your blog:

  • A pale color palette

  • A dark color palette


This means you can choose the color scheme which would work best for your existing fonts and color settings without having to also change the colors of existing elements in your blog.

If you would prefer to use your own color schemes, add images to the background, or change the background of other elements of your blog, I have also provided instructions for you to customize this script and adapt it to your own personal needs.






Here are the two different color schemes you could install in your blog:

Pale Scheme


Morning (6am-12pm)
Daytime (12pm-6pm)
Evening (6pm-12am)
Twilight (12am-6am)


Dark Scheme


Morning (6am-12pm)
Daytime (12pm-6pm)
Evening (6pm-12am)
Twilight (12am-6am)


Installing the Time of Day Background Color Script in your Blog

The script used to change the background color is really easy to install. Simply locate the closing </head> tag in your Blogger template, and add one of the following lines directly before it (choose the script according to the color scheme you would prefer to use):

For the pale color scheme:

<script src='http://bloggerbuster.com/scripts/time-of-day-pale.js' type='text/javascript'/>

For the dark color scheme:

<script src='http://bloggerbuster.com/scripts/time-of-day-dark.js' type='text/javascript'/>

Then locate this section of your Blogger template:


body {

background: $bgcolor;

This section may not appear exactly like this, or you may notice there is also a background image referenced in the background line. In either case, you need to delete the background statement which is highlighted in red text to ensure the JavaScript line you previously added is able to accurately declare the background color according to the time of day.

Now preview your blog. If all has gone to plan, you should see the background color of your blog has changed to the color specified for the time of day. You can then proceed to save your template.


Customizing the Time of Day Background Script

If you are able to edit and host the "Time of Day" JavaScript file yourself, you can use this as a basis for further customization including:

  • Using different background images for different times of day

  • Use different color schemes to those suggested above

  • Change the background color for a different section of your blog (for example, the header section)

  • Change the font colors depending on the time of day

First you should download a copy of the Time of Day Background script, then make your changes in your favorite editor (I use Notepad ++ though you could just as easily use Notepad or another simple text editor).

Once you have made your changes, you will need to upload your revised script to a hosting provider, and link to the script from the <head> section of your blog template as described above.


Here is a transcript of the JavaScript in its simplest form, which is used only to alter the background color:

var d = new Date()

var h = d.getHours()



//

if (h < 6) document.write('<style type="text/css">body{background: black; color: black}"></style>')

else if (h < 12) document.write('<style type="text/css">body{background: blue; color: black}"></style>')

else if (h < 18) document.write('<style type="text/css">body{background: yellow; color: black}"></style>')

else if (h < 24) document.write('<style type="text/css">body{background: red; color: black}"></style>')


Each time section features a JavaScript command, like this:


document.write('<style type="text/css">body{background: black; color: black}"></style>')

You can change the code highlighted in red to alter the effects of the script. For example, if you wanted to use a background image instead of a color, you could change the red section of code to something like this:

body {background:url(http://image-host.com/yourimage.jpg)}

To change the color of the header section (rather than the main body background), you would change this as follows:

#header {background: #ffff00;}

In fact, you can use this script to alter any CSS styled element of your blog template to suit the time of day! Just be sure to change the properties for each time slot in the JavaScript code to ensure your design will appear the way you prefer.

I'm currently working on a new template for Blogger blogs which uses a variation of this script in a rather elegant way. I will put this up for download as soon as it's ready, but in the meantime I would love to see how you have used this script to personalize your own blogs!
Posted by at No comments:
Labels:

Tuesday, 22 April 2008

Add a Customized Twitter Widget to your Blogger Blog

Twitter LogoTwitter has become one of the most useful social applications for bloggers. Many bloggers choose to feature their latest updates in a widget visible in their blogs. Here at Blogger Buster, for example, you can see a Twitter widget in the header section which features my latest "tweet".

Many readers have emailed me to ask how I customized this widget, so in this post I'll explain some methods you could use to create and customize your own Twitter updates widget, including a simple widget installer for you to add a widget similar to the one used here.






Twitter does offer a "Blogger" widget which can be installed using a one-click installer. This widget does not have any styling associated with it, ensuring your updates will appear in the same fonts and colors as other widgets in your blog.

If you have already added a Twitter widget to your blog, you can easily customize the appearance of this widget using some simple CSS techniques.

The widget code for your Twitter badge will most likely appear like this:

<div <--Add Style Here --> id="twitter_div"><ul id="twitter_update_list"></ul>

<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/amandafazani">follow me on Twitter</a>

</div>

<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>

<script src="http://twitter.com/statuses/user_timeline/amandafazani.json?callback=twitterCallback2&count=5" type="text/javascript"></script>

As you can see from the comments I added in red, you can add inline CSS styling to your widget code, in order to add borders, background color or even an easily recognizable icon.

Here are some examples of the code you can add in this section:

style="border: 3px solid #cccccc; padding: 5px;" <--This will add a wide grey border around the widget with some padding to ensure the text doesn't get too close to the edges.

style="background: #ffcc00;" <-- This will add a bright yellow background to the widget, ensuring this contrasts with other elements in the page.

style="background: url(http://imagehost.com/youricon.jpg) top left no-repeat; padding-left: 50px;" <--This will add an icon as a background image to your widget. The padding declaration ensures the text does not overlap the icon (this is the solution I use to feature the blue bird in my Twitter icon in the header section).

To add these style declarations into your Twitter widget, simply go to Layout>Page Elements in your Blogger dashboard and click on the "Edit" link for your Twitter widget. Then locate the section of code which begins like this:

<div id="twitter_div"

and add your styling code to this section.

Here is an example of the Twitter widget code with style declarations added in red:

<div style="background: url(http://bloggerbuster.com/images/twitter-icon.gif) top left no-repeat; padding-left: 50px;" id="twitter_div"><ul id="twitter_update_list"></ul>

<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/amandafazani">follow me on Twitter</a>

</div>

<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>

<script src="http://twitter.com/statuses/user_timeline/amandafazani.json?callback=twitterCallback2&count=5" type="text/javascript"></script>

Add a Twitter Widget using this Widget Installer

For those of you who would prefer a simple method of adding a stylized Twitter widget to your Blogger powered blog, here is a widget installer which will add a widget with an easily recognizable "Twitterific" icon, like this:

The colors and fonts of this widget will blend with other elements of your blog, while the Twitterific icon will be easily recognized and help your readers associate this widget with Twitter.

To add this widget to your blog, simply fill in the details in the form below. Your Twitter username is the one which you have chosen to represent you on Twitter. For example, my username us "amandafazani" and my Twitter URL is http://twitter.com/amandafazani. Add this username into the appropriate box, then change the title and number of tweets to display as suited to your needs.

I hope this post has been informative in explaining how you can add style to your Twitter badge/widget in your Blogger blog. Please let me know what you think by leaving your comments below.
Posted by at No comments:

Saturday, 19 April 2008

Complete List of Blogger Tutorials


Here is a complete list of all the tutorials posted on Blogger Buster, organized by category. So please, dive in and read the tutorials which are most useful to you!






Categories

Click on a category heading to skip to this section of the article.


Back to Top

Blogger News and Issues

This section features important news and tutorials relating to your use of Blogger.com.



Back to Top

Custom Domains

This section features tutorials in regard to using Blogger's "custom domains" service.



Back to Top

Customizing your Blogger Template

This section features all the articles I have written with regard to customizing your Blogger templates.

I have further divided this category to help you easily find a particular customization for your needs.


Overall Layout/General Customizations

Here you will find links to posts which discuss general/overall aspects of customizing your Blogger template.



Back to Top

Header/Navigation

These tutorials can help you develop the header and navigational areas of your Blogger template.



Back to Top

Posts

Here you can find links to articles which discuss styling of the main posts area, including the comments and post-footer sections.



Back to Top

Sidebar(s)

These articles have particular relevance to designing your sidebar(s)



Back to Top

Footer Section

This section focuses on customizations for the footer section of your blog.



Back to Top

Feeds and Syndication

These articles discuss your blog feeds and blog syndication.



Back to Top

General Tutorials

This section features general articles of interest



Back to Top

Images, Icons and Badges

Here you will find articles regarding the use if imagery in your Blogger template and posts.



Back to Top

Labels Categories and Tags

This section contains articles discussing the use of labels, categories and tags in Blogger blogs.



Back to Top

Monetize your Blog

These posts feature information about adding advertisements or using Google Adsense in regard to your Blogger blog.



Back to Top

Resources for Bloggers

Here are posts discussing useful resources for bloggers.



Back to Top

SEO and Blog Traffic

This category features posts which discuss search engine optimization (SEO) and generating blog traffic.



Back to Top

Widgets and Add-Ons

Here are articles featuring widgets and add-ons which you can use to add functionality to your Blogger blogs.



Back to Top

Updates

This list will be updated periodically with new articles as they are published on the site. You may also be interested in subscribing to Blogger Buster to receive updates and news articles as they are posted.

I'm always open to suggestions for future articles, so if you have an idea for an article you would like to see published here, feel free to drop me a line.
Posted by at No comments:
Labels:

Friday, 18 April 2008

Fixing PNG Image Transparency in IE6 (Including Background Images)

If you would like to use any transparency for images in your blog, you should be aware that Internet Explorer 6 (and below) does not render PNG transparencies. So if you use a PNG image with semi or full transparency, you would probably see this rendered against a white/grey background when viewed in IE6 (whereas Firefox and other browsers are able to render the transparency just fine).

One solution to this problem is to use GIF images instead, but this does lead to some compromises in design as the GIF format cannot render semi-transparency (where some of the background color is visible through the image).






Recently, Smashing Magazine posted a wonderful article discussing the use of transparency in modern web design. Many solutions for PNG transparency were referenced in this article, but there was one incredible fix which the author missed out: NaterKane's BgSleight script.

Unlike the PNGfix script (which many of us have used to render transparency for foreground images), this script can also display PNG transparency for background images too! It uses a transparent GIF image as a background to the PNG transparency, and although the effect does not render until the page has fully loaded, I'm sure you'll agree this is the best solution so far when using transparency in PNG images for your blog template design.

How to use the Bgsleight PNG Transparency Fix

I've modified NaterKane's original files to make them easier to download and use by bundling the bgsleight JavaScript file and the blank.gif file in a single download, which you can grab below:

Download bgsleight files for PNG transparency fix

Unzip this file and save the contents to a location on your computer. Then upload both bgsleight.js and blank.gif to the same folder location in your hosting account.

You can find a list of free hosting providers here if you do not already have a hosting account for your scripts.

Finally, link to the bgsleight javascript file in the head section of your blog template, like this:

<script src="http://yourhost.com/bgsleight.js" type="text/javascript"></script>

Don't forget to replace yourhost.com with the URL where you have hosted your bgsleight file!

Now when you upload any PNG image with transparency (full or semi-transparency) to your blog template, the page will be rendered correctly for IE6. As I mentioned before, the transparency will not take effect until the rest of the page has loaded, so for a second or so you may still see a border or pale background around your transparent PNG elements. Once the page has loaded, all of your images will appear just as they should, enabling you to create some great effects in your template design.

You may also want to check out Fonsite and Flair in the City to see how this script has been used in other Blogger powered blogs.

Credits and Usage Information

The bgsleight script was originally developed by NaterKane and is distributed under the Creative Commons 2.5 License.

Thank you also to Alfonso of Fonsite for telling me about this highly useful script!

If you have enjoyed this post, please consider subscribing to Blogger Buster for updates of future articles.
Posted by at No comments:
Labels:

Thursday, 17 April 2008

Blogger's bX-Codes Blog (and other useful resources)

I doubt there's anyone using Blogger who hasn't come across one of those dreaded bX-codes at some point or another. These codes are created by the Blogger system when an error occurs to help the Blogger team track down and solve any problems.

If you've ever poked around the source code of an error page, you'd have noticed a section of code which appears like this:

<script type="text/javascript" src="http://bx-codes.blogspot.com/feeds/posts/default/-/bX-gsx5n6?alt=json-in-script&callback=showErrorMessage"></script>
.

The code refers to a JSON-callback to the Blogger Error Codes blog. This is used a "database" of error codes which is used to display a message if the specific error code has been registered on this blog.






The Blogger Error Codes blog uses posts organized by labels attributed to a particular error code. When a particular error occurs, the error page references the bX-codes blog. If this matches an existing label, the body of the post attributed to this label is used to display a message to the user to inform them of the problem or explain that the Blogger team are aware of the problem.

Unfortunately, the error codes blog is not updated very often. This means we usually receive a default error message telling us to inform Blogger of the error code and a description of what was happening when this occurred.

Generally speaking such errors are resolved soon after they appear, especially when people report these error codes directly to Blogger to ensure Blogger employees are aware of the problem and it's scope more quickly.

But it can be quite frustrating to receive continual errors, so I've gathered a few resources which may offer some advice about the error codes you may receive and how these could be resolved:

  • Report your bX-Error code to Blogger: Use this form to report your bX-codes to Blogger directly.

  • The Real Blogger Status (BX codes Section): Chuck is doing a great job of documenting error codes and recent issues with Blogger. In this section of his blog, you'll find loads if useful information about bX-error codes, including their status and possible resolutions.

  • Blogger Known Issues: Here the Blogger team document known issues and error codes with status when these issues are resolved.

  • The Blogger Help Group: It may be helpful to search the official Blogger help group for the bX-code you have received. If this has been experienced before, others may have posted a solution. You may also want to report your error code here as Blogger employees do keep an eye on the help group.

As we can now report error codes directly to Blogger, I hope this will result help the Blogger team correlate and resolve specific codes more quickly. It would be reassuring to receive more messages on our error screens: "Engineers are aware of the problem and are working in a fix" is so much better than a default message telling us to report the problem!

If you know of other useful resources about Blogger's error codes, please let us know by leaving your comments below.
Posted by at No comments:
Labels:

Wednesday, 16 April 2008

Add a "Top of Page" Icon Link

While researching blog designs, I came across a really feature: an icon link to the top of the page which floats in the bottom right-hand corner. As a blog reader, I found this feature to be really useful as it enabled me to jump back to the top of the page after reading a long article or browsing through many posts on the home page. Take a look at the bottom right hand corner of this blog for an example of this in action.

This customization is surprisingly easy to install. You can simply add the code required into an HTML/JavaScript widget in your blog's layout or, if you use a Classic Blogger template, add this code directly into your template code.

So in this post, I'll explain how to add an icon link to the top of your blog with an example image and code for you to use this right away.






How this works

The icon is styled to appear in the bottom right-hand corner of the page (no matter what screen resolution a visitor uses to access your blog), and is linked to target the top of the page using the "#" symbol.

The icon link used in this blog is small and unobtrusive; to help new visitors understand how this can be used, I added title text to the image so the "Back to Top" prompt will appear when the visitor hovers their mouse over the link.

The code used to add a "Top of Page" icon link is constructed as follows (I have forced line breaks for clarity):

<a href="#"> <-- This link targets the top of the page

<img src="url-of-image" <-- The URL of your icon

alt="alternative text" <-- Alt text for accessibility

title="Back to Top" <-- This will produce the hover text

style="display: scroll; <-- This allows the image to scroll

position: fixed;<-- This fixes the image in place

bottom: 5px; <-- Makes the image appear 5px from the bottom

right: 5px;" /></a> <-- Makes the image appear 5px from the right, 
then closes all tags

How to install the "Top of Page" Icon Link

To use an icon link like the one used here at Blogger Buster, simply copy all of the code below and paste this into an HTML/JavaScript widget in your layout:

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://bloggerbuster.com/images/arrow-up.gif"/></a>

If you use a Classic Blogger template (with no drag and drop widgets), you can paste this code into your blog's HTML code, somewhere between the <body> and </body> tags instead.


Customizing the Icon Link

If you would prefer to use a different image than the one used here, simply replace the URL of the image with the URL of your preferred image instead.

You can also reposition the icon to suit your design needs. For example, if you wanted the icon to be flush with the bottom right corner (no space), change the code explained above to read this instead:

position: fixed;
bottom: 0px;
right: 0px;

To position the icon further away from the right or bottom sides, simply increase the pixel value to reflect this distance.


Some Examples of "Top of Page" Icon Links

You needn't be restricted to using an arrow for your top of page link! Some of the designs I showcased in this recent post used ingenious methods of linking to the top of the page:

Left: La Blogueria uses paperclips to link to the top (and other parts) of the blog.

Center: In Tuneando el Blog, the icon link is animated when the mouse hovers over it!

Right: This page curl at the bottom right of Mi-Microsmos is a cleverly disguised (and very stylish) link which features a prompt on mouseover.

I hope this tutorial has been useful and helped you create your own scrolling icon links to the top of your blog.

If you have found this post useful, please consider subscribing to Blogger Buster for updates of new articles as they are published.
Posted by at No comments:
Labels: ,

Tuesday, 15 April 2008

Blogger Tips at BloggingTips!

Blogging Tips is a group blog where regular writers offer articles and advice about blogging. For the past couple of months, I've been writing regular posts for this popular blog and am now a weekly (staff) writer!

Generally speaking, my posts at Blogging Tips are about using and working with Blogger, including:

Plus a few more too!

Blogging Tips features some really useful posts about blogging in general. My articles about Blogger are published regularly each Monday, so if you're looking for more resources and articles to help you blog more effectively, please check out my posts at Blogging Tips and let me know what you think!

Posted by at No comments:
Labels: ,

Sunday, 13 April 2008

Popular Posts (Most Commented) Widget for Blogger Blogs

Here is a Popular Posts widget for Blogger blogs which displays a list of the ten most commented posts. This works by parsing the last 5000 comments which have been made on your blog; the post titles and URL are extracted and displayed in descending order of popularity, followed by the comment count of this post.

Over the past few weeks, many of you have expressed an interest in such a widget, and I hope this will become a useful widget for you all.

You can see this widget in action and install this in your own Blogger powered blog using the widget installer below.






Please note: if you are reading this post in your feed reader, you will not see the widget installer and will need to visit this page in your browser instead!



Widget by Blogger Buster
On the right you can see an example of the Popular Posts widget, which displays the ten most popular posts from Blogger Buster (including their comment count). This widget uses Yahoo! Pipes to parse and display each item in the list using the last 5000 comments which have been made on this blog.

Update: I've just changed the mark-up of the widget to capitalize only the first letter of each word in the post titles (thanks to Angel's great advice!)

Installing this widget in your own Blogger blog is easy:

  1. Change the title of the widget if you prefer.

  2. Add your blog's URL in the input box (don't include the http:// part as this is already inserted by the script)

  3. Click the "Customize" button to make the changes take effect, then click on the "Add to Blog" button.

At this point, you will be taken to the widget installer page where you can choose which of your Blogger powered blogs you would like to install this widget.

O Ricardo traduziu este widget para Português que pode ser encontrado nesta página.

A bit more information about this widget

I have developed this widget using Yahoo Pipes, where I added variables to retrieve 5000 comments and extracted the titles and URLs using Regex (regular expressions).

If you would like to take a look at how this works, feel free to hop over to the Blogger Popular Posts/Most Commented Pipe page where you can also make a copy and edit to your own specifications.

Using This Widget in a Blogger Feed Widget (Alternative Installation)

If you would prefer to use Blogger's Feed Widget instead (which loads the items slightly faster), you modify the following feed link to include your own URL (eg: yourblog.blogspot.com or www.yourblog.com) and add insert this as the "Feed URL" on the widget configuration page:

http://pipes.yahoo.com/pipes/pipe.run?_id=1cf38ae68efbe859c4ba1ee239cec099&_render=rss&num=50&url=http%3A%2F%2FYOUR-URL-HERE

However, using Blogger's Feed Widget will limit the number of items you can display to 5 instead of 10, and you will not be able to number your items.

Troubleshooting the Popular Posts Widget

If you have installed this widget in your blog but the post links are not displayed, this may be due to one of the following issues:


You have added your blog's URL incorrectly

Double check your blog's URL when you add this to the widget installer, and remember not to add the "http://" part as this is already added by the script.

Your Comment Feed is Set to None

To remedy this, go to Settings>Site Feed in your Blogger dashboard and click on the "Advanced Settings link. Here you will see the option to switch your comments feed to Full or Short instead of None.

I have tested this widget extensively for both Blog*Spot and custom domain URLs in Internet Explorer and Firefox. So far, I haven't come across any problems, though if you do have a problem with this widget which I've not covered here, please do leave a comment or get in touch and I will try to help.

If you have found this widget to be a useful addition to your Blogger blog, please consider subscribing to the Blogger Buster feed and be updated of new articles about Blogger as they are posted.
Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)