More Blog Tools

I added PDF this page and Fax this page buttons to the right side bar. These utilities let you do exactly what they say, Create a PDF file of this site or fax the content of this page to a FAX machine.

At first I wondered why would anyone want to do one of this items, then a application presented itself. I had added Kanoodle ads to Blogatech and they weren't showing up. I contacted Kanoodle and advised them of the problem and their response was "We see them just fine". So I created a PDF file of the site which showed huge gapping holes in the side bar where the ads should display and sent it to them.

I didn't get my problem solved but I was able to determine that Kanoodle and its Brightads program are total bullshit. You would think they would at least respond to my e-mail. I know they visited the site, as their ISP shows on my stat tracking record. Apparently their problem solving flow chart starts with "Blame the problem on the customer" and ends with " Ignore the problem and it will go away". Phew, feels good to get that off my chest.

I haven't used the FAX this page utility but I'm sure I will run across a situation where someone's ISP has gone done and I can use it to fax a web site to them. Maybe I can proxy surf for someone during a hurricane.

Anyway, you can add these features to your blog or you can visit the sites and utilize the service to FAX or PDF any URL you want.

http://pdfthispage.com
http://faxthispage.com

Technorati Tags: blog tools, fax this page, pdf this page, blogger, blogatech

Custom Header Option

Here is another idea for you guys wanting something other that the stock blogger header. Go to fodey.com and create your Wizard Animation. Then resize the gif image, upload it to a host service and apply it as your header background.

You could adjust the size of the wizard image by copying the image to your hard drive and then use PIXresizer to change it's dimentions. For a typical Blogger header I would try a size of 720 x 200 for starters. Then you would upload the new gif image to a hosting service such as image shack. They would give you the new URL that you would place into your template. Here is the portion of the template where I set Blogatech's header background image. The area in red is where you would add the new URL of the Wizard Animation that you obtained from image shack.

#header {
width:100%;
margin:0 auto 0 auto;
padding-top:0px;
height: 200px;
background: url(http://address of the image) no-repeat;
border-bottom:0px dashed #ccc;
}

Technorati Tags: blogger, custom header, fodey.com, image shack. pixresizer

Image Mapping

You can create more than one link to a image with a process called "image mapping" The user will be directed to a different site or page depending on what portion of the image they click on.

For example, in the image below if you click in the white square with the Google name you will be taken to Google's site. Same with the square containing the yahoo name. The two black dead zone squares are not linked and as you hover your mouse over them you will see that the cursor's icon changes from a hand in a linked area, to an arrow in unlinked areas.

Here is the code used to produce the above image map:

<div style="text-align: center;"><img src="http://image address.jpg" usemap="#test" border="0" />
</div><map name="test">
<area shape="Rect" coords="0,0,89,89" href="http://www.google.com">
<area shape="Rect" coords="90,90,179,179" href="http://www.yahoo.com">
</map>

You can see by the areas highlighted in red that the linked areas are defined by X and Y coordinates starting from the top left corner of the image. These cordinates are measured in pixels. There are additional geometric shapes that can be used with the map command as well, here are some example areas and their corresponding coordinates"

area shape="rect" coords="0,0,0,0"
area shape="poly" coords="0,0,0,0,0,0,0,0"
area shape="circle" coords="0,0,0"

The cirlcle is defined with the X and Y of its center followed by its radius in pixels. The poly is defined by the X and Y of three or more points.

I typically use Corel Draw to determine the cordinates for creating my mapped images by setting the page scale to pixels. I then set the top left corner of the image to zero and as I cursor across the image the coordinates are displayed in the bottom left corner of the screen. Photo Paint also works for this in a similar fashion.

For those of you without access to these programs, there is a site online that will help you out. It's called the Poor Persons Mapper. Its free utility written by Chris Seidel that when you enter the URL of a jpg or gif image it will in turn create a web site of the image and as you mouse over and click, it gives you that points coordinates.

Image mapping is a great way to make custom menus for your side bar or even out of your header. Here is a more complex example. This should provide you with an introduction to mapping and for more detail tutorials just google "image mapping".

Technorati Tags: image mapping, blogger, custom menus, blogatech, corel draw