Getting an Unlimited HelloBar Account for Free.

….okay not really–but you’d have to, frankly, be pretty stupid to pay for this service. What they are offering can be completed, styled, and even tracked with a few simple steps. All you need to do this is basic HTML/CSS knowledge (VERY basic) and a Google/goo.gl/bit.ly or any other tracking service account. The process to setup a custom HelloBar takes about 20 mins and saves you a good chunk of change a month if you get a sizable amount of traffic. I promise by the end of this blog post you’ll be kicking yourself for paying $4.95 for every 100 clicks your hellobar gets.So let’s get started…

The first thing you’ll want to do is set the CSS the in your style.css file (or whatever you are using) and it should look something like the following:

In this instance I am using a green/white/grey color scheme, but you can adjust the styling of the background, color, and bottom border lines to match the design you are after, if you are not at all savvy with CSS use the following guide as a reference:

background: green; — This secetion controls the background color of the bar
bottom-border: grey 5px solid; — This section controls the height and color of the bottom border
color: white; — This section controls the font color

Once you’ve adjusted the style of your bar and saved your new CSS code in your style.css locate the template of the page you wish to add the HelloBar script on. You’ll want to locate the end of your head tag (which should be, < / head > so just look for that). Once you’ve located (PS — If you are using WordPress check the header.php file) add a few lines of space above it and paste in the following code:

Use the following guide to customize this area:

Awesome Stuff — Replace this area with the text you wish to be unlinked in your Hellobar.
URL — Replace the URL between the quotations with the URL you wish to link to.
Click Here for More Info — Replace this area with the text you wish to be linked in your Hellobar to the URL you set above.

Once you’ve completed this process simply save the HTML file (header.php usually on WordPress) where you added your new code

and take a look at the final results:

Now as far as tracking goes, that’s simple. I mentioned above you’d need a Google/Goo.gl/Bit.ly account if you recall. If you’d like to enable tracking on this link simply sign up for a URL tracking service and rather than inputting your direct URL into the URL area in the hellobar div put the bit.ly or goo.gl link. This will provide you with detailed tracking on goo.gl or bit.ly. As an added plus if you already are using one of these services you can consider this one less login you’ll have to keep track of–it integrates perfectly with the tracking systems you already use.