groovyblog - website and blog tips, hints and help

HTML - displaying code in websites and blogs using character entities

2008-04-06T18:48:00.000-07:00

To display code in a website or blog, special character such as "<" and for ">" need to be replaced by characters entities. For example <HTML> is display by typing in <HTML>. Here is a list of some of the common character entities used in blogs:

space
<	<
>	>
&	&
¢	¢
£	£
¥	¥
€	€
©	&copyright;
®	®
§	§
×	×
÷	÷

CSS - Cascading Style Sheets

2008-04-06T17:07:00.000-07:00

Definition: CSS is short for Cascading Style Sheets

Usage: to define how HTML elements should be displayed. There are many ways to utilize the power of CSS, however external style sheets allow the web developer to control the overall look and feel of a site from one central location, with edits being reflected across the entire website. To reference an external CSS file, place the following code with the the <HEAD> tag:

Examples:

Linking to an External CSS
<link rel="StyleSheet" href="style.css" type="text/css">

Inlining Style
<p style="color: blue; font-family: 'Arial'">

Here is an example of inline style

</p>

Create and add a favicon to your blog or web site

2007-10-25T21:55:00.000-07:00

What is a favicon?

A favicon is a small 16 pixel by 16 pixel icon that appears in the URL address bar of your web site or blog. Here are the steps to create and add your own favicon to your web site or blog with the details below:

1. Source or create an image
2. Convert image into an appropriate file format
3. Store favicon on a web service
4. Add code to your web site or blog template to point to favicon

1. Source or create an image
You can use any image editor like photoshop to edit the image or graphic you want as your favicon, or you can create the icon from scratch directly on a favicon creator web site. The favicon creators will produce a square icon, so ideally you should also start with a square icon. Don't worry about the dimensions so much because the favicon creator will resize the image that you submit, as long as it is not too monstrous.

2. Convert your image into an appropriate file format
There are a number of sites and software that can accomplish the task of converting you image or graphic into a favicon.ico file. Note: most browsers now support .gif, .jpg and .png formats, but if you don't have an image editor you can go to http://www.favicon.cc/ which gave the option of drawing your favicon right on their site with a little preview, or uploading an image or graphic and then downloading the converted (16 x 16 pixels) favicon file. If you decide to edit our own image or graphic, make sure that the dimensions are 16 x 16 pixels.

3. Store favicon on a web service
You will need to have your favicon hosted on a web service of some kind. If you are using it for your web site, you know doubt already have a domain host, but if you are blogging on free space you will need to setup a service if you don't already have one. http://flickr.com is a great spot to have free image hosting. Upload your icon. Copy the location, by right-clicking (apple-click on the mac) on the image and choose "copy image location".

4. Add code to your website or blog template to point to your favicon
In both cases, the code to insert the favicon needs to be placed somewhere between the head tags.

[link rel="shortcut icon" href="http://www.flickr.com/yourFavicon.gif"]
[link rel="icon" href="http://www.flickr.com/yourFavicon.gif"]

(replace the [] for <>, because blogger want to render them as html in this post)

-Groovy

Adding a free invisible stat counter to your blog

2007-10-21T15:54:00.001-07:00

It is really simple and convenient to add a free invisible statistic counter to your blog. Sign up for a free account with http://www.statcounter.com and follow the instructions on adding the code to your blog template. The key is to add the code to your template so that the counter is on every page that you post. Since I chose an invisible stat counter, I put automatically generated insertion code in a div tag at the end of the body of my template.

Then you can log in to statcounter to view your account.

To avoid skewed results, chose the create blocking cookie so that your own visits are not counted.

-Groovy