Add A Fixed Floating Happy New Year Image To Your Blog

As we close in on the new year we will look at an easy trick to add a fixed new year banner to your blog.Once the tip is added the image will be situated in the very top corner of your blog as a Great New Year greeting to your visitors.I have included four different images to try accommodate different templates and adding the image to your blog is quick and easy.

Here's a preview of the images you can choose from:

Image 1:



Image 2:



Image 3:



Image 4:



You can see a live demo of the float image working click here..

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;left: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 :left
Change them to make the image appear were you like :

top left
top right
bottom left
bottom right

(left is usually the best way to go)
4.Now find this code in your html :

</body>

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

For Image 1 Add This Code :

<div id="float_corner">
<a href="http://www.spiceupyourblog.com/">
<img style="167px; height: 161px;" src="http://i941.photobucket.com/albums/ad259/spiceupyourblog/nyc0110.gif" alt="Happy New Year" border="0" /></a>
</div>

For Image 2 Add This Code :

<div id="float_corner">
<a href="http://www.spiceupyourblog.com">
<img src="http://i941.photobucket.com/albums/ad259/spiceupyourblog/764570s1ywfpdanr.gif" alt="Happy New Year" border="0" /></a>
</div>

For Image 3 Add This Code :

<div id="float_corner">
<a href="http://www.spiceupyourblog.com">
<img src="http://i941.photobucket.com/albums/ad259/spiceupyourblog/newyearsmall.gif" alt="Happy New Year" border="0" /></a>
</div>

For Image 4 Add This Code :

<div id="float_corner">
<a href="http://www.spiceupyourblog.com">
<img src="http://i941.photobucket.com/albums/ad259/spiceupyourblog/Animated-Happy-New-Year-2010-Dancin.gif" alt="Happy New Year" border="0" /></a>
</div>

---