Display your current location on your blog with Google Latitude

If you use Google Latitude, you can now display your current location on your blog using a Google Public Location Badge.



Google Latitude is a feature of Google Maps which, should you choose to enable this, allows selected friends and family members to see your location. You can also give permission for Latitude continuously update your location in the background.



The Public Location Badge is a gadget which you can easily add to your Blogger blog to provide readers with your current location. This feature may be especially useful for travel bloggers or personal bloggers who wish to share their location with friends and family members.

How to add a Public Location Badge to your Blogger blog

In order to add a Public location badge, you will need to use Google Latitude. If you have a compatible mobile phone, you can install the latest version of Google Maps on your handset and use this application to update Latitude with your current location. Those who do not have a compatible handset (or who choose not to use this option) can add Latitude to iGoogle and interact with this application from their desktop/browser.



Visit this page to choose which method you will use to update Latitude with your location.



Once you have set up your handset or iGoogle Latitude settings, you can visit the Latitude settings page to choose with whom your location is shared or add a Public Location Badge to your blog.

Choosing which settings to use for sharing your location

When you visit the Public Location Badge page, there are several options available to choose how your location will be shared:

• Disable Google Public Location Badge (default setting) - this means that no-one will be able to view your current location, except of course for Google and any friends with whom you have chosen to share your status.


• Enable and show city-level only - this setting enables anyone to view your location at city level only (not your actual, precise location). Even if you have not added the badge to your blog or website, your status may still be accessed through Latitude searches.


• Enable and show best available location - this setting enables anyone to view your location on a more precise level. Again, even if you have not added the badge to your blog or website, your status may still be accessed through Latitude searches.

Your choice will depend on your personal preferences. If you have set up Latitude but prefer your status to remain private, be sure to disable your public location badge. And if you do choose to share your location through a badge on your blog, be sure to take into account Google's privacy notice:

If enabled, your location will be publicly available to everyone. You will not be able to limit where and with whom you share your location through the badge.

Add the badge code to your Blogger blog

It is very easy to add your public location to your Blogger blog. Once you have chosen the settings and tweaked the width and height of your gadget according to your needs, you can simply press the "Add to Blogger" button which will transfer the code directly to an available widget location in your layout:

After adding your gadget to your blog, you can visit the Layout>Page Elements page to move the gadget to an appropriate location in your blog's layout.



Another option would be to paste the code for your location into a blog post. Simply copy the HTML code in the box to your clipboard, then paste into a blog post when editing using the "Edit HTML" tab. This will embed your gadget directly into your blog page.



Important note: once you create and publish this snippet on any web page, anyone with access to your web page could copy the code elsewhere so that your location is still accessible even after you remove the code from your page. If you want to stop broadcasting your location, you must disable this by visiting the Public Location Badge page.

Will you be using the Public Location Badge in your blog?

Personally I prefer not to use this gadget in my own blogs, since this has no relevance for the subjects I write about, but as I mentioned earlier, this new feature may be a useful gadget for travel bloggers or those who wish to update family and friends with their location.



Have you added this gadget to your own blog? Or would you consider using it? Please let us know your opinions and experiences of the Public Location Badge by leaving your comments below.

Display your current location on your blog with Google Latitude

If you use Google Latitude, you can now display your current location on your blog using a Google Public Location Badge.



Google Latitude is a feature of Google Maps which, should you choose to enable this, allows selected friends and family members to see your location. You can also give permission for Latitude continuously update your location in the background.



The Public Location Badge is a gadget which you can easily add to your Blogger blog to provide readers with your current location. This feature may be especially useful for travel bloggers or personal bloggers who wish to share their location with friends and family members.

How to add a Public Location Badge to your Blogger blog

In order to add a Public location badge, you will need to use Google Latitude. If you have a compatible mobile phone, you can install the latest version of Google Maps on your handset and use this application to update Latitude with your current location. Those who do not have a compatible handset (or who choose not to use this option) can add Latitude to iGoogle and interact with this application from their desktop/browser.



Visit this page to choose which method you will use to update Latitude with your location.



Once you have set up your handset or iGoogle Latitude settings, you can visit the Latitude settings page to choose with whom your location is shared or add a Public Location Badge to your blog.

Choosing which settings to use for sharing your location

When you visit the Public Location Badge page, there are several options available to choose how your location will be shared:

• Disable Google Public Location Badge (default setting) - this means that no-one will be able to view your current location, except of course for Google and any friends with whom you have chosen to share your status.


• Enable and show city-level only - this setting enables anyone to view your location at city level only (not your actual, precise location). Even if you have not added the badge to your blog or website, your status may still be accessed through Latitude searches.


• Enable and show best available location - this setting enables anyone to view your location on a more precise level. Again, even if you have not added the badge to your blog or website, your status may still be accessed through Latitude searches.

Your choice will depend on your personal preferences. If you have set up Latitude but prefer your status to remain private, be sure to disable your public location badge. And if you do choose to share your location through a badge on your blog, be sure to take into account Google's privacy notice:

If enabled, your location will be publicly available to everyone. You will not be able to limit where and with whom you share your location through the badge.

Add the badge code to your Blogger blog

It is very easy to add your public location to your Blogger blog. Once you have chosen the settings and tweaked the width and height of your gadget according to your needs, you can simply press the "Add to Blogger" button which will transfer the code directly to an available widget location in your layout:

After adding your gadget to your blog, you can visit the Layout>Page Elements page to move the gadget to an appropriate location in your blog's layout.



Another option would be to paste the code for your location into a blog post. Simply copy the HTML code in the box to your clipboard, then paste into a blog post when editing using the "Edit HTML" tab. This will embed your gadget directly into your blog page.



Important note: once you create and publish this snippet on any web page, anyone with access to your web page could copy the code elsewhere so that your location is still accessible even after you remove the code from your page. If you want to stop broadcasting your location, you must disable this by visiting the Public Location Badge page.

Will you be using the Public Location Badge in your blog?

Personally I prefer not to use this gadget in my own blogs, since this has no relevance for the subjects I write about, but as I mentioned earlier, this new feature may be a useful gadget for travel bloggers or those who wish to update family and friends with their location.



Have you added this gadget to your own blog? Or would you consider using it? Please let us know your opinions and experiences of the Public Location Badge by leaving your comments below.

Fixing Custom Favicons for Blogger Blogs

Many Blogger users have reported that their custom favicon has suddenly been replaced with the default orange Blogger favicon.



The reason for this is that the 'all-head-content' includable (the content generated for page headers when your blog is viewed in a browser) has been updated to include the following line:

Thankfully, there is an easy "fix" for this issue!





Simply locate the line(s) of code you have added to your Blogger template to reference your custom Favicon, and move these just before the closing tag in your template.



The reason this trick works is because the code to reference your custom favicon appears after the lines added by Blogger to reference the Blogger favicon. In all HTML documents, code which appears later in the mark-up takes precedence over any tags which appear earlier (unless of course, statements are attached to make the earlier tags preferential!).

How to link to a custom favicon in your Blogger blog

If you do not already use a custom favicon for your blog, you may be interested to learn how to create one, so here are some useful links to other articles and resources on site:

• Favicons made easy (newer version, using png or gif files)


• Create a favicon for your blog (older version, using .ico files)


• Generate your own favicon from a JPG image
  
  

Favicons and Internet Explorer

When using Internet Explorer 6, you will only see favicons appear in the address bar if you have bookmarked the site you are viewing.



The tern "favicon" is  short for "favorite icon", and as such Internet Explorer will only display the favicon of a site if the site is recognized as one of your favorites (ie: if you have bookmarked the site in your browser!).



Some people also report that the favicon will only display when viewing the particular page they have bookmarked, and not the entire site. In this case, you would need to restart your browser for the favicon to appear in the address bar of all pages.



Your internet security settings (both in Internet Explorer and any anti-virus/anti-spyware programs you use) may also affect whether or not favicons will be displayed in IE6.

Were you able to fix your broken favicon?

I hope this post has provided a useful overview of how to fix the link to your custom favicon in your Blogger blog. Please feel free to leave your comments and suggestions below.

Fixing Custom Favicons for Blogger Blogs

Many Blogger users have reported that their custom favicon has suddenly been replaced with the default orange Blogger favicon.



The reason for this is that the 'all-head-content' includable (the content generated for page headers when your blog is viewed in a browser) has been updated to include the following line:

Thankfully, there is an easy "fix" for this issue!





Simply locate the line(s) of code you have added to your Blogger template to reference your custom Favicon, and move these just before the closing tag in your template.



The reason this trick works is because the code to reference your custom favicon appears after the lines added by Blogger to reference the Blogger favicon. In all HTML documents, code which appears later in the mark-up takes precedence over any tags which appear earlier (unless of course, statements are attached to make the earlier tags preferential!).

How to link to a custom favicon in your Blogger blog

If you do not already use a custom favicon for your blog, you may be interested to learn how to create one, so here are some useful links to other articles and resources on site:

• Favicons made easy (newer version, using png or gif files)


• Create a favicon for your blog (older version, using .ico files)


• Generate your own favicon from a JPG image
  
  

Favicons and Internet Explorer

When using Internet Explorer 6, you will only see favicons appear in the address bar if you have bookmarked the site you are viewing.



The tern "favicon" is  short for "favorite icon", and as such Internet Explorer will only display the favicon of a site if the site is recognized as one of your favorites (ie: if you have bookmarked the site in your browser!).



Some people also report that the favicon will only display when viewing the particular page they have bookmarked, and not the entire site. In this case, you would need to restart your browser for the favicon to appear in the address bar of all pages.



Your internet security settings (both in Internet Explorer and any anti-virus/anti-spyware programs you use) may also affect whether or not favicons will be displayed in IE6.

Were you able to fix your broken favicon?

I hope this post has provided a useful overview of how to fix the link to your custom favicon in your Blogger blog. Please feel free to leave your comments and suggestions below.

How to add MyBlogLog comment avatars (author images) to your comments section

A great way to add a sense of community to your blog is by using comment avatars: an image (or icon) which is unique to the person who is making the comment. When using comment avatars in your blog, you will easily be able to recognize comment authors, especially those who regularly visit your blog. Also I feel this adds a greater sense of interaction between blog authors and their readers.

By default, Blogger only shows comment avatars on comment pages (either pop-up or full screen, depending on your comment settings). However, no comment avatars appear in the most visually important place: in your item pages where comments are displayed beneath your posts. Additionally, only the comment avatars of registered Blogger users may appear on these pages, so if your readers blog on a different blogging platform, their avatar cannot appear at all.

But there is a solution: add MyBlogLog comment avatars to your blog!

When you register your membership with MyBlogLog (a community website for bloggers) you will be able to upload a photo or avatar which will then be used to identify yourself in MyBlogLog's many services.

Thanks to Blog Bloke's post about MyBlogLog comment avatars, I am now using Merlinox's MyBlogLog Blogger Plugin to feature MyBlogLog comment avatars in this blog. This is based on MyAvatars, a Wordpress plugin designed by Napolux. This technique displays the comment authors MyBlogLog avatar beside their name and comment, and where no avatar is found (usually when the commenter has not registered with MyBlogLog), you will instead see a default image.

You can find Merlinox's original instructions for installing MyBlogLog avatars here (which also includes a tutorial for those using Classic Blogger templates). Here I have also provided full instructions for installation, which I hope will help clarify any issues which may be unclear in Merlinox's post.

How to install MyBlogLog comment avatars in your Blogger Layouts blog

1. First, make a full backup of your blog template by going to Template>Edit HTML in your Blogger dashboard, then clicking on the "Download full template" link near the top of the page. It is always good practice to do this before making any adjustments to your blog's template in case you make a mistake and need to revert back to a working template afterwards!


2. Next, go back to the Edit HTML section of your dashboard, and check the "expand widget templates" box. Then, just before the closing tag in your template, insert the following lines of code:
   

   
   
   

Problems uploading your images to Blogger? Here's a temporary solution

It seems that many Bloggers are currently unable to upload images to their blog posts. This problem is currently being investigated by the Blogger team, and while we are told that a solution is "imminent", this is still causing many problems.

Usually when this problem occurs, you will receive an error message and error code which you can report to the Blogger Team on this thread in the Blogger Help Forums.

Until the image upload problem is fixed, you may want to consider uploading your images to a free hosting site, and link to these from your blog posts. While this is hardly ideal, I have found this does bypass the problem and displays images correctly. Here's how you can link to externally hosted images in your blog posts.

Upload your images to a free image hosting service

There are dozens of free image hosts to which you can upload your images. Perhaps the most popular of these free services are Photobucket and Imageshack, though you may easily find other services by performing a Google search for Free Image Hosting.

You may need to set up an account with your choice of image host, and once you have done so, follow the instructions for your host to upload your images.

When you have uploaded the images you wish to use, make a note of the exact URL of your image. You will need to use this when linking to the image in your post, so it may be useful to copy this to your favorite text editor.

Create your post as normal

Write your Blogger post as normal, but without the usual image upload. In the place where you would like to feature your image, you can use this simple HTML tag to link to your image, which will make this display in your blog post:

yourimagehost.com/yourimage.jpg"/>

You will need to replace "http://yourimagehost.com/yourimage.jpg" with the exact URL of your image, where it is hosted on your image host.

This simple code will display the image you specify which by default is aligned to the left of any text which follows. You may prefer to customize the way the image displays in the post. In this case, here are alternatives to the three alignment methods used when uploading images through Blogger:

• Align your image to the left of all text:
  

  Align your image centrally (with no text on either side):
  

  



• Align your image to the right of all text:
  

  

Don't forget to replace all instances of "http://yourimagehost.com/yourimage.jpg" with the actual URL of your image!

Adding "Alt" to your image tags

"Alt" means "Alternative text", which is displayed instead of your image for browsers which do not display images (eg: Lynx), for accessibility reasons, and in case your image cannot be displayed for some reason. While it is not strictly nescessary to add alternative text to your image tags, you may prefer to do so. Here is an example of how to add alternative text to an image:

alt="My Image"/>

You can replace "My Image" with a more appropriate description for your image instead.

Alternative text can help your blog rank better in search engines, and is usually inserted by Blogger when you upload your images in the regular way.

Making your image into a link

When you insert an image using the image tags above, the image displayed will not link to the image location as it does when you upload an image through the Blogger upload system. If you would like the image to become a link to its' location online, you can use the following method:

Again, don't forget to change the URLs to match that of your image's online location!

You can also use this method to create an image link to any other website you prefer. Simply change the section to match the URL you wish to link to.

I hope this alternative method will enable you to post as normal until Blogger have solved the problems we've all experienced when trying to upload images to our posts! Which I hope will be very soon...

Technorati Tags: blogger+problems | uploading+images | blogger+posts | help

Create screenshots for your blog easily with this free tool!

Screen shots are an excellent way to illustrate a post, especially when explaining how to use a website, or to demonstrate a new template. All of the screen shots featured in this blog were created using ScreenHunter: a free program which allows you to take pictures of the screen you are working on, and save them directly to your computer. This works on all Windows operating systems, including Windows 98/NT4/ME/2000/2003, XP and Vista.

I've been using ScreenHunter for a few years now, and have found this to be the easiest screen capture facility to use. Best of all, it's free for unlimited personal and business use! There is no expiration date, nor is this trial software.

You can download your free copy of ScreenHunter 5.0 from the Wisdom Soft website using the link below (scroll down the page a little to find the correct download):

Download WisdomSoft ScreenHunter 5.0 Free

Installing ScreenHunter

Once you have downloaded the ScreenHunter program, you can easily install the software with one click. However, you will be presented with some options for the installation that you should be aware about:

• Install a desktop shortcut: You may want to check this box if you prefer to have all your programs accessible from the desktop


• Load on startup: This starts the ScreenHunter program as soon as you start up your PC. I personally don't use this option, as it only takes a couple of seconds to load anyway.


• Install ScreenHunter toolbar for your browser: This installs an optional toolbar which features the same screen capture facilities as the program, plus a few other tools. Not essential (and I don't use this function), though it may be useful for some.

Once you have finished the installation, you will need to restart your computer for the program to finalize installing. Then you will be able to use your new screen capture facility.

Using ScreenHunter

When you start ScreenHunter, you will see a screen which features the various options for capturing the images on screen. You can begin taking screenshots straight away, though there are a couple of options you may wish to change first in the "TO" section:

• Where the screen shots are saved to: In order to find and use your screenshots, you will probably want to specify the location where these images are saved. By default, this is your desktop, though I prefer to use a designated folder to ensure my desktop does not become cluttered.


• The file format of saved images: this latest version includes the ability to save in GIF, JPG or BMP format. If you have a preference, you can set this here.

When you are ready to take screenshots, there are three different options to choose from:

• Rectangular area: this enables you to specify a section of the page you are viewing to be copied to a file (or to your clipboard).


• Full screen: this copies the whole of the screen you are viewing on your computer.


• Active window: this will only copy the window you are viewing, and none of the background which may be visible also.

I hope you enjoy using ScreenHunter and find this to be a useful tool for your blogs!

Technorati Tags: screenshot | screenhunter | wisdomsoft | free+software | blogging | tools

How to use a background image for your blog

Instead of a simple background color, you could use a background image for your blog. This could be styled to look like wallpaper, it could repeat only vertically or horizontally, and can even be in a fixed position where it stays in place while the rest of the page scrolls down!

In this post, I will explain the how you can use background images for your blog using these different methods, with examples to demonstrate how the various effects can be achieved.

You can use virtually any image as a background for your blog. Usually background images are in JPEG format, though you could also use GIF's or BMP's. However, you must be able to host the image on an external server, as Blogger only hosts images which are contained in widgets or posts. If you're looking for free image hosting, take a look at this post.

Before you begin to add the image to your background, find the image you would like to use, and make a note of the url where it is hosted.

As I mentioned in the introduction, there are different ways you can use background images. Here I will explain:

• How to make an image repeat across the whole page (like wallpaper)


• How to make a background repeat vertically down the page


• How to make the background repeat horizontally across the page


• How to create a fixed image background (which does not scroll with the rest of the page

All of these methods are possible in Blogger Blogs, and are quite simple to achieve.

How to make make an image repeat across the whole page (like wallpaper)

This is the simplest of all background effects to achieve. Most people prefer to use a small image which tiles seamlessly. This ensures that the page loads faster, since the image has a small file size.

You can easily find such images for your background by doing a Google search for tileable backgrounds, or could even create your own.

I created this simple image to use as an example, though you could just as easily use any other image:

To make this image a tiled background for your blog, go to Template>edit html and look for the styling properties for the body of your blog, which should look something like the example below:

body {

background: $bgcolor;

margin:0;

color:$textcolor;

font:x-small Arial sans-serif;

font-size/* */:/**/small;

font-size: /**/small;

text-align: center;

}

We need to edit the line highlighted in bold, which is where we declare the background properties of the blog. To add a repeating image to the background, we simply add the following (highlighted in red) to the body properties:

body {

background:url(http://www.imagehost.com/yourimage.jpg);

margin:0;

color:$textcolor;

font:x-small Arial sans-serif;

font-size/* */:/**/small;

font-size: /**/small;

text-align: center;

}

Where the URL of the image matches the URL of your background image location.

This will make the background image repeat across the whole page, like the example below:

If you prefer, you can also view the whole demonstration page here which offers a better view of the overall effect then the iframe above.

How to make a background image repeat vertically down the page

This involves a slightly different addition of code to your template, but is essentially the same principle. Again you should find the "body" style declaration in your template and add the url for your background image. Also, you need to declare that the background will repeat on the "y" (vertical) axis, as in the example below:

body {

background:url(http://www.imagehost.com/yourimage.jpg) repeat-y;

margin:0;

color:$textcolor;

font:x-small Arial sans-serif;

font-size/* */:/**/small;

font-size: /**/small;

text-align: center;

}

Using the same example image as before, this will create the following effect (or look here for a full page preview):

How to make a background image repeat horizontally across the page

This is very similar to the method we used to tile the image vertically. However, this time we tell the browser to repeat the image on the "X" (horizontal) axis, like this:

body {

background:url(http://www.imagehost.com/yourimage.jpg) repeat-x;

margin:0;

color:$textcolor;

font:x-small Arial sans-serif;

font-size/* */:/**/small;

font-size: /**/small;

text-align: center;

}

This will produce an effect like the example below (use this link for a full page preview):

How to create a fixed image background

Usually a larger image is used for this method, so for this example we will use the following image from Pyzam.com):

To ensure this background image does not repeat, we need to add the "no-repeat" declaration to the background properties. Also, we need to add the statement that the background attachment is fixed, so that the background does not move with the page. Here again is an example of what your code should look like, with the changes highlighted in red:

body {

background:url(http://www.imagehost.com/yourimage.jpg) no-repeat;

margin:0;

color:$textcolor;

font:x-small Arial sans-serif;

font-size/* */:/**/small;

font-size: /**/small;

text-align: center;

background-attachment: fixed
}

And here is the example of what this property achieves (use this link for a full page preview):

You can add color too!

Unless you tile your background image across the whole page, you will be left with blank white areas. To fill these areas with the color of your choice, you should also add color to the background property.

If you already have a "$bgcolor" variable in your blog template, you can simply add this variable to the background properties, like this:

background: $bgcolor url(http://imagehost.com/yourimage.jpg) repeat-x;

However, if you do not have this variable in your template, or instead would prefer to declare the color yourself, you can do so using Hex values for the color you wish to display. There is a useful color calculator in the tools section which can generate the hex values require. Here is an example of how you can declare the hex values for the color in your background:

background: #ff0000 url(http://imagehost.com/yourimage.jpg) repeat-x;

Using the first image as an example, this would generate a background like this:

Positioning the background image

By default, the background image will begin in the top-left corner of the page, regardless of how you want the background image to repeat (or not) across the page. However, you can specify where you would like the image to be placed by adding some extra variables to the background specifications.

Here is an example of the bldy's background property to show where you can place the positioning variables:

background: #ffff00 url(http://imagehost.com/yourimage.jpg) positioning-variables-here no-repeat;

And here is a list of the positioning variables you can use:

• top left


• top center


• top right


• center left


• center center


• center right


• bottom left


• bottom center


• bottom right

If you wanted to position a fixed image at the top center of a page for example, you could use the following code:

background; url(http://imagehost.com/yourimage.jpg) no-repeat top center;

It is also possible to set the starting position of the background image using percentages on the X or Y axes, or by specifying the distance in pixels from the top or left of the page. However, this can be rather complicated, and since people use many different browsers and screen resolutions when browsing the internet, this can cause serious problems for blog design! If you would still like to know more about this, I would recommend reading the information on the CSS background page at W3 schools.

I hope this tutorial has helped you understand how to use background images in your blog, and covered all aspects of how these different effects may be achieved. As always, your comments and opinions are much appreciated!

If you would like to receive updates of new tutorials and posts from Blogger Buster, please consider subscribing to our feed.

Technorati Tags: background+image | blogger | template | backgrounds

Free Web 2.0 design tools for your blog

"Web 2.0" design has recently become very popular. Reflective logos, striped backgrounds, vivid badges and gradient buttons are among these new design features, and are fast being integrated into blog design. Here is a selection of free online Web 2.0 design tools to help you give your blog more of a Web 2.0 appeal.

Fresh Badge Generator

Creates great Web 2.0 style badges with many options for customization (I used this tool to create the logo at the top of this post in under 1 minute!

Stripe Generator 2.0

Generates striped backgrounds for your blog or website. Choose colors, styles and even gradients. Create this as a tiling image too!

Tabs Generator

This generates navigation tabs with choices for gradients, border, width and fonts. Easy to use, just create your tabs and right click the resulting image to download.

Web 2.0 Logo Creator

Create a reflective header for your blog! You can also choose to add a logo, change gradients, background color, etc.

Web 2.0 logo creator

Another free logo creator. Features an optional "Beta" badge, gradient text and reflection. Very easy to use.

My Cool Button

Creates beautiful reflective buttons (like the one on the right) which you can customize with different fonts, text and colors.

As I find more useful Web 2.0 design tools, I will update this page with links to new sites.

Please leave your comments and opinions below.

If you like this post, please consider subscribing for updates of new content.

Technorati Tags: web+2.0 | blog+design | web+design | free+online+tools | image+generators | backgrounds | buttons | custom+header