"Funny is money."

Want to get even more creative with your page header? 

Here's how:

First, create each frame of your header  (955 pixels wide X 195 high) in Photoshop or PhotoFiltre then use this great animated GIF maker to create your header: GIF MAKER

Once you've got your GIF created simply upload it in a new blog but save the blog as a draft only, do not publish.

Go to the new blog with the uploaded GIF on it, select Preview, click on the animated gif so that it goes to a new window and then copy the long URL, and paste it into this code between the ( ). Then simply copy, paste the code, click 'Customize My Page > Advanced' and then paste it directly below any existing code.  Press Save and you're done! Here's the code:  (be sure to substitute your URL between the () and you're ready to paste it into your CSS)

#xg_masthead /*Top Image*/

{margin: auto; display: block;height:195px; width:955px; background-color:transparent; background-image: url(http://api.ning.com/files/o2W2jISK9wd94EyUwBTsG1ZSMyMXaqHs*QFjJhF8i-uT7Rsus85uK*Fk731TGNREzynQ3HSOsmSr6h0sNBRM2zVxg18GUXxT/RudolphHeaderGIF.gif); background-repeat: no-repeat; background-position: top center}

Enjoy.

To Clarify (because only some of it is in red)  This is the part of the code that you replace with your own URL:…

Here's a quick way to have some fun:

(Go to: Appearance>Advanced>paste code)

If you would like to add an image to your hello box then add this code to the top of your CSS Box. You can also add it to the bottom of the Body Section in the code. This code is adjustable too.

1.) You can adjust the height of the hello box in the height line.

2.) You can also align the image left, center, or right in the background-position line.

3.)You can add a background top margin if you need to adjust the image within the box as well. Sometimes the picture starts under the module header and you can't see it. So you can move it down by adding a top-margin.

4.) If you have a small image and want it to repeat, Change the background repeat to: background-repeat:repeat;



Note: Your module backgrounds must be set to the color: transparent and not have a color or image link in order for the hello box image to show.







Code:





/* Hello Box: Adjusting height to see more of the background image) */ .account-links {

height:140px;

}

/* Hello Box Background */

#xg_module_account {

background:transparent url(image link);

background-repeat: no-repeat;

background-position: right !important;

background-margin-top: 0em !important;



} 

Simply substitute 'image link' with your GIF URL, which looks similar to this in size & content:  http://upload.wikimedia.org/wikipedia/commons/2/2b/Seven_segment_display-animated.gif

STAY TUNED  -  MORE TO COME SOON…

It's easier than ever to link images in your blog to URLS. (The pic above is linked to this blog for example) While still in 'Visual Mode on your editor, click on the image once and you'll see an 'edit' below it. Click on 'edit'

You can enter any URL you want in the Link. It works with Animated GIF images too. It also helps on the blog roll, making the picture as well as the title a direct link to the blog. Click on the GIF image below the diagram for an example.

click on this image>