from the blog.

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.

You may also like

New Blog Theme?

Here is what this blog used to look like: But I changed it. With this, I am breaking one of the golden rules of blogging – stick to one theme. Its not even five months since I last changed my blog theme. Oh well. You see, sticking to one theme creates a powerful brand image […]

4 Ways To Effectively State Your Source

No matter how brilliant a blogger is and how good he is at creating his own powerful content, there will always be a time when he will need to use something from a different source in the Web. This is ok as long as proper Copyright rules are observed. One of these rules is stating […]

55 Readers!

This will be a very short and joyful post. 🙂 Today, I get 55 feed readers! 🙂 This is the most that I have since I started blogging! Though Feedburner stats fluctuate, I’m still happy reaching 50+ readers today! Thanks, everyone! If you’re not a reader yet, hit the RSS link at my menu bar […]

11 Comments

  1. boss thank you akala ko nakalimutan mo na… 🙂

    How many clicks do you get from this object?

    More Power to you!

  2. I’m trying to do this but I nothing happens when i put the div id=”alertblock’. Sir, where is CSS declarations located? Where am I going to place the code above for wordpress?

  3. CSS declarations are at the style.css part of your editor. Put the “div id=alertblock” part at the bottom of the header.php. I haven’t actually tried that, but I think that’d work. If not, please tell me. 🙂

    Keep in mind that this will all go away if you change your theme.

  4. I won’t change my theme. It still won’t work sir. I already placed the #alertBlock {…code in my style.css. then put the div id=alertblock at the bottom in header.php.

  5. Sir Carlo. I got it nah! hehe. yun na lang color ang i momodify ko. Thanks a lot carlo for this post. You and Jehz are the MAN!! 🙂 Cheers!:-)

  6. wow thank you po for answering my question about it. thank you so much. ngayon ko lang nareceive sa mail. il definitely subscribe. more power!