Friday, May 25, 2007

How to make blog gadgets position customizable

On the right hand side navigation bar, there is an example of a Google gadget for websites for missing persons. To move it to where you want it, move the mouse cursor over it near the edges. When you see the move cursor, you can drag the entire gadget to where you want it. To reset to the default position, double click when you see the move cursor to get rid of the gadget. The gadget will appear in the default position when the page reloads.

It is very simple to make anything draggable, including blogger widgets, and part of your blog, even YouTube embeds.

The simplest way is to enclose anything you want to be draggable by:

<div name="draggable">
... your super duper gadget/widget/embed/text here ...

The gadget can be dragged, but the position will be reset when the page resets. To remember the positions, you need an unique ID for each gadget:

<div name="draggable" id="missingchildren">
... your super duper gadget/widget/embed/text here ...

The gadgets will only move from the default position to the custom position after the whole page is loaded, so you can see the transitions. To make the transitions invisible, you need the display:none in the CSS style as follows.

<div name="draggable" id="missingchildren" style="display:none; border: solid thick #eeeeff;">

You do not need to see the move cursor to drag the gadgets. You can drag or double click as long as you are over the gadget. But since most gadgets has some functions associated with it, you may activate the gadget functions doing so. When you see the cross cursor near the edges, you can be sure that only the dragging functions are activated.

To make it easier to drag, you can add a thick border with or without color, so the move cursor appear in more areas. The example border is solid, thick with color code #eeeeff. You can find other borders here.

You don't need to wait for users to drag the gadgets to their desired positions. You can set the initial position to anywhere you want it. You need to add these into the style string:

position: absolute; left:10px; top:50px;

Your gadget will be initially at the top left corner of your browser.

Of course, you need code to make it all work. Copy the code between the script tags, including the tags, from the previous post, into any html/javascript page element in blogger. That's it. I put pure code or html as the first page elements as they need zero time to load. Anything containing external links and access I would put it near the last page elements, so you can start reading without waiting for everything to finish loading.

No comments: