How To Put A Floating Object On The Top Of Your Blog

I got a question asking how I placed a floating object on top of my blog. Since I am a super nice guy, I will answer that question on this post.

Me using the word object might confuse some coders because the word object can mean a different thing in programming. But simply put, here is how to put a floating 'anything' on top of your blog.

The advantage of this is that since whatever you put up there is floating, it will always be on your reader's screen even if they scroll down.

So without more delay, here is how you do it:

1. Go to your blog's HTML editor. On the CSS declarations, add this:

#alertBlock {
z-index:1000;
position: fixed;
width: 100%;
background-color: #282828;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
top: 0;
text-align: center;
border-bottom-width: 0px;
border-bottom-style: solid;
border-bottom-color: #282828;
}


(Yes, you can edit those values to suit your needs.)

For Blogger, you can just put it on top of this code:

]]>


2. Now go find the opening <body> tag. It may look like this if you're using a new Blogger Template - <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>


Underneath that code, place this:

<div id='alertBlock'>

HTML CODE OR WHATEVER STUFF YOU WANT TO FLOAT ON TOP OF YOUR BLOG

</div>

Obviously, you need to replace what I have put in the middle.

Hope this helps. I believe that Jehz created this and this is also used by Rick.

Update: If you're having trouble getting this to work on your WP blog, check out this post from Nonoy of CebuAndDavao.com.