Jazz Up Your Blog With Floating Attention-Grabers! Increase Your Subscribers With STYLE

6 Jan 2010

Jazz Up Your Blog With Floating Attention-Grabers! Boost Subscribers With STYLE

Author: Jim | Filed under: Market Research, Web Development

Recently I made an upgrade to the header on my blog, and it was a BIG update at that! Not only did I enhance the looks of the most-viewed area of my blog, but I added a newsletter opt-in box which could potentially boost my subscribers tremendously.

But was my excitement premature!?

One of my readers, Rob from myTTOOS.com, pointed out the following:

Rob: “Really cool, but i bet it will be overseen a lot = bad conversion. Let us know if i am right.”

Jim: “Could be true… but then again I am not trying to spam people like typical marketers, haha”

Rob: “at least put the focus on the chalk board, put a few blinking stars around it or something lol”

Though it sounded silly at first, I started thinking about just how right he was! While I was all concerned with making the new opt-in newsletter box look at good as possible… I made it flow TOO WELL! Therefore, I needed a little something to get people to notice it (though I won’t be putting blinking stars on my header anytime soon, haha). So what did I do? I added a big ol’ floating arrow!

Why Are Floating Objects A Smart Idea?

Just as Rob pointed out, you can have the best idea in the world… but if nobody notices it, than it’s worthless. Adding something to the top of your website that is a bit “out there” can really help to emphasize a particular region of your website, while not detracting from your overall “look” or crowding the rest of your text. When it comes to attention-grabbers, I’d much rather have something that just sits on top so I don’t waste any valuable real-estate.

This is very much like building a house: if you are trying to expand and you run out of acreage on your property… you can still make a bigger house by adding another floor!

How To Add Floating Objects to Your Website or Blog

So how do you actually do it yourself? Let’s walk through the steps that it takes to add a flashy layered/floating image to your website or blog.

1. Get a Transparent Image to Use
I made an image located here, that is just a basic arrow with a ton of photoshop effects laid on top to make it stand out. Remember that you CANNOT have your image be a .jpg, .bmp or any other non-transparent image (unless you want it to look “el horible“). Therefore, I would recommend that you use .png (better quality) or .gif (more of a “standard” format) for your image.

2. Put the Correct Coding Into Your Header (or wherever you want)
The coding works by building a reference off of a certain “div” table in your header. It will float the image relative to the div that you select, so be sure that you put a “div” table somewhere near where you want your image to be floating around.

As you can see by the code, there are 2 areas that we will also need CSS coding. Let’s first talk through the code! You need to first make a div table (as mentioned earlier) in the region of the website where you would like to add a floating image. Don’t worry, you can move the image around from there… but it always references the div as a “starting point” when you tell it to move “50 pixels to the right” (or whatever you choose). I have called that div table “floating_region.” Next, you need to style the image so that it knows it is floating (I called it id=”top_image”), and put it inside of a linking reference so that it works properly.

3. Update Your Theme’s CSS Styling (in wordpress, it’s “style.css”)
Your CSS should look like this:

#floating_region {
position:relative;
width:___px; }

#top_image {
position:absolute;
top:50px;
right:20px; }

For “floating region,” you simply need to change width to match the width of the div. In my case, the div was a part of the header, and it was the div that contained a cutout splice of my header “hdr_03.jpg” which is 87 pixels wide. Therefore, mine was “width: 87px;“! The “top image” layer is your graphic, and position should be set as “absolute.” Then, you can simply position it around (using top,right,left,bottom) and messing around with the number values to push/pull your image in different directions.

BOTTOM LINE: Thanks to Rob for recommending I don’t “settle” with what I had… because I believe that it is indeed even better now, and people will actually notice the area of my website when there is a giant red arrow with the word “FREE!” in it. Let me know if you are thinking of doing something similar, and if you are having problems I’ll try to help!

-Jimvesting