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




| 2 comments

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:

Merry Christmas

Here's a preview of the vertical image :

Merry Christmas

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>



    Do a background check on anyone !

    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 ...


    Join over 5000 Subscribers! Please sign up to receive Updates.

    SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

    No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


    If You Enjoyed This Post Please Take 5 Seconds To Share It.

    2 comments:

    1. does this work for wordpress blog too?

      ReplyDelete
    2. Hi,

      It may work on wordpress but i am not familiar with the wordpress design so unfortunately i couldnt tell you how its done.

      I had a quick look for similar tips for wordpress and came up blank.

      Paul.

      ReplyDelete



    Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


    Hire Us