Sunday, November 21, 2010

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

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

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

hello bar

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

03g Create - The Hello Bar - Feed And Save.jpg

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 “” 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

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


(By) Jeffry Thurana - an Indonesian writer who wants to make the world a better place one post at a time with his blog, SuperSubConscious.


View the original article here

No comments:

Post a Comment