iRadar: Add An Attention Grabbing Bar To Your Website With Hello Bar [100 Invites]

Tuesday, November 23, 2010

Add An Attention Grabbing Bar To Your Website With Hello Bar [100 Invites]

Add An Attention Grabbing Bar To Your Website With Hello Bar [100 Invites]: "

Each and every second, we are bombarded by lots of information from all different kinds of media around us. It’s so easy to get lost among the noise that our best way to survive is by learning how to ignore almost everything.

This is bad news for information publishers. Attention is now an expensive commodity. Today, a blog post has to compete for a reader’s attention not only with posts from other blogs but also with posts from within the same blog.

While fighting other websites and blogs requires ammunition of a different kind, stealing attention on your own site is much easier. One tool that enables you to do that is “The Hello Bar“.

Say Hello To The Bar

The Hello Bar is a web tool that will help you create a simple “attention grabbing” bar at the top of your site. It’s just a bar with one line of text and a link. But since normal humans have the tendency to read from the top to the bottom, the bar will be the first thing that they see.

You can write anything on the bar and make it as eye catching as possible (or not) with the use of color. If your line is interesting enough, you can be sure that your visitor will click on the link to follow through. It’s a simple but smart concept.

Hello Bar is currently in closed beta stage and only accepts invitation-based signups. But if you’d like to try it, we have good news for you. You can visit the site and use invitation code: “makeuseof” (sans quote, case sensitive) to sign up. The code is limited to 100 signups so you’d better hurry.

website bars

You can enter the beta key after signing up.

website bars

Each new user gets 5 invites to share, so maybe those who are able to grab one of the limited 100 seats can share their invitation codes to the less fortunate using the comments section below.

website bar graphics

Let’s Get Started

To start building your bar, click the “Create New” button.

website bar graphics

The first thing you should do is give a name to your bar. You could use your website name as the bar name or short description of its usage. Since you are allowed to create several bars, the names should be able to give you a hint which one is which.

website bar graphics

The next step is to choose whether you want to use your own sentence in the bar (Manual) or put an RSS Feed in it (Feed).

If you choose the Manual way, you can edit your line in the “Message” field, write down the “Link Text” and the “Link URL” that you want to use.

hello bar

Even though it’s possible to write more than one sentence, it’s advisable to keep your sentences short and effective – something like a Twitter‘s tweet. In fact, you could also use your tweets to update the content of your bar by checking the “Allow Twitter Updates” box.

Next, choose the color combination that you want to use: the Bar, Text, and Link color. You can also choose the Font Style that you prefer to use: Serif or Sans Serif.

hello bar

The result of your bar can be seen in real time in the “Preview” box. And if you choose “Feed“, all you have to do is to put the Feed URL of the RSS feed that you want to use (but you still can edit the “Appearance” box to your liking).

There are a few other things that you can adjust under the “Settings” button, such as the “Wiggle Effect“, “Positioning” and “Tab Display“.

05 The Hello Bar - Settings.jpeg

Don’t forget to click the “Save” button after you are done tinkering with the bar.

The Hello Bar will give you the code to embed in your site with the instruction to place the code after the “<body>” tag. When you hover your mouse over the code window, a “Copy” button will appear. Just click the button to copy the whole code.

04a The Hello Bar - Script.jpg

You can manage all the bars that you’ve created from the “Manage” tab in the main page. This includes the ability to turn an individual bar on and off, acquire the code again, and delete an unwanted bar.

06 Hello Bars - Manage.jpg

There’s also the “Stats” tab where you can check the “success rate” of your bar(s).

11 Stats - The Hello Bar-1.jpg

A Site With A Bar

The process of adding the bar to your site should be pretty straightforward. If you are capable enough to build a website, you should know how to insert code after the “<body>” tag. WordPress users can use the “Editor” on the sidebar menu under the “Appearance” tab.

07a WP Editor.jpg

But novice WordPress bloggers might be a little intimidated by the thought of editing HTML code. Moreover, different themes have different ways of organizing their elements. You have to look for the specific item where the “<body>” tag resides, and changing the theme means re-editing the code.

An easier and friendlier method to do this is by using a plugin called “Insert Codes“. You can search and install the plugin right from your WordPress Plugins menu. After installation, open the “Insert Codes” settings and paste the Hello Bar code into the “Blog Footer” field.

09 Insert Codes - WP Plugins.jpg

Even though the name is “Blog Footer“, the code will be inserted before the closing “</body>” tag, just like the doctor’s order.

And this is how the bar looks in my WordPress blog.

09c Hello Bar Result.jpg

If you set your bar to be auto-hidden in the “Settings” menu, it will turn into a small arrow lid on one corner of the page.

10 Hiding the bar.jpg

There are many possibilities of using the bar to get your visitors’ attention. It could serve as a simple announcement, featured post, or even as a marketing tool.

What do you think about this tool? Would you use it on your website? Do you know any other alternatives? Share your thoughts using the comments below.

Got Questions? Ask Them Now FREE on MakeUseOf Answers!