How To Add A Fixed Floating Merry Christmas Banner To Your Blog

In this post i will get a bit seasonal and show you how to add a floating Merry Christmas Image to your blog.Once added the image will be situated in the very top corner of your blog as a nice Christmas greeting to your visitors.I have included two different images to try accommodate different templates and adding the image to your blog is quick and easy.

Here's a preview of the horizontal image:



Here's a preview of the vertical image :



You could also find your own image and use that.

Lets add it to your blog :

1.Click Layout-->Edit html for your blog
(Tick the 'Expand widget templates' box)

2.Find the following piece of code in the html:
(Click 'CTRL & F' for a search box to find the code)

]]></b:skin>

3.Now Add the following piece of code Directly Above ]]></b:skin>

#float_corner {
position:fixed;_position:absolute;top:3px;right:3px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}

You can change the following attributes : top :right
Change them to make the image appear were you like :

top left
top right
bottom left
bottom right

4.Now find this code in your html :

</body>

5.And place this code Directly Above </body>:

For Vertical Image Add This Code :

<div id="float_corner">
<a href="http://www.spiceupyourblog.com/2009/12/how-to-add-fixed-floating-merry.html">
<img src="http://i941.photobucket.com/albums/ad259/spiceupyourblog/small_1950427.gif" border="0" /></a>
</div>

For Horizontal Image Add This Code :

<div id="float_corner">
<a href="http://www.spiceupyourblog.com/2009/12/how-to-add-fixed-floating-merry.html">
<img src="http://i941.photobucket.com/albums/ad259/spiceupyourblog/poinsettia_2_text.gif" border="0" /></a>
</div>

To add a second floating image just repeat the steps making sure to add the image to a different corner,to use your own image replace the image URL with your own image URL.

We Are Nearly Finished - First A Quick Reminder: If you need more help or have an opinion or suggestion Please leave a comment Below.It also really helps me to get feedback. This is a Do-Follow Blog so leaving a comment will also help Your blogs Google rank. OK Back to business....

Of course after christmas you could change the image to a differant welcome image...

And that's it save your template and check out your new image...

Another Christmas trick for your blog is adding the snow fall effect Snow Fall Effect Click Here to see how.

How does it look on your blog?

While we are on the subject i would like to say Merry Christmas to all my Blog visitors ...