Famous Bloggers

How To Blog and Start a Business

Home » The Famous Blog » How to Create Your Own Hello Bar for Thesis Theme

How to Create Your Own Hello Bar for Thesis Theme

- by 4,283

Create Hello Bar for Thesis Theme

Hello bars are simple and powerful – such as been my experience with them. They are a hidden spot on your website that will never annoy any of your visitors, and I consider it a hot spot on the blog. It’s where visitors like to click and without being forced, hello bars simply work. Creating your own bar is not a big deal!

I’ve tried a few of those services and WordPress plugins that create a simple top bar at the very top of the blog and allow you to add links to it. Some plugins were very basic, and some had cool features like tracking clicks and page impressions, and even calculating the converting average of the link, but most of these are slowing down the page load.

The problem

Most of these services and plugins that allow you to create the Hello bar are available for use for free, but most of them add a link to the developer site, which is something I don’t want to have on my blog. Don’t get me wrong! I like to give back, but not a link at the very top of my blog. This link is worth more than these services and plugins can give. However, this is only my personal opinion. You don’t have to agree with me!

The solution

I thought to create my own Hello Bar and share it with Thesis Theme users, and I will let you know what I think about the bar best practices!

How to create Hello Bar for Thesis Theme

Easy.. beasy, here is the code you need to add to your custom_functions.php file, plus the CSS styles that you need to add to your custom.css file!

https://gist.github.com/3147527.js

Check out ThesisAwesome.com → Thesis Skins

[box type=”note”]You can change colors easily by editing the CSS above.[/box]

What about Tracking Clicks?

Not a problem. You can use something like Thirsty Affiliates plugin which allow you to track your links and show you how many times a visitor has clicked them. Or you can track your links using HootSuite or any other free alternative tools, for example use a trackable link shortening service like Bitly.

5 Best Practices for using the Hello Bar

  • Pronounce news or coming events
  • Sell your own product
  • Special offers
  • Grow your list subscribers
  • Affiliate marketing

There are many ways to actually use a link on that spot, so I am going to share a few cool ways with you.

1- Announcing News

Sometimes you will need a hot spot for announcing news or events on your blog. The top bar is very handy and simple. You can activate it occasionally depending on your needs. So, let’s say you have some upcoming event – you can then share it with your visitors in a very noticeable place at the very top of your blog.

2- Sell your own product

This is what I am doing right now. I’ve added a link to my Thesis Skins site. This way, I was able to let every visitor know about it with no doubt. Also, giving some quality backlink to my own product page is very useful.

3- Share a Special Offer

Have a special offer? Why not highlight it to your blog visitors?

4- Grow Email List subscribers

Another very useful way to use it is to actually create a landing page for your free e-book or product. Derek Halpern explains how to get more subscribers using the Hello bar, really nice stuff.

5- Affiliate Marketing

If you are into affiliate marketing, then why not use the Hello bar to recommend products and earn more commissions? It’s a cool way to increase your affiliate earnings.

You Try!

It’s only limited by your imagination. It’s all yours! Use it the way you like, and let me know what else the Hello bar can be useful for!

About

I create websites with WordPress, and I develop Schema Plugins to help SEOs. I am a social network lover. I am also the night creature who works hard to keep this project up. Owner and founder of the Famous Blog.

Reader Interactions

Related Posts

{ 27 Responses }

  1. Varinder says:
    WOW This is amazing tutorial, thanks a lot.I think Hello Bar is one of the best plugin for all.
  2. Cam says:
    Hey great tutorial Hesh! This is a nice alternative solution to the Hello Bar and much faster at that. I would imagine that you could use position: fixed; element within the css to keep it static when scolling down the page. : ) Cam
  3. Val Heisey says:
    Hesham! This is a great feature. I signed up for the Hello bar, but never installed it. Didn't really want the H logo promotion either. My questions... can you independently change the look/color/boldness of the static text. "Check out ThesisAwesome.com →", and can you add small images? What would be the code and where would it go? Thanks!
    • Hesham Zebida says:
      Hi Val, The text can easily be customized by a little CSS (There is css included in the post, not sure if you missed it) You can include anything you like as images, simple change the "Check out ThesisAwesome.com →" and insert an image using a simple HTML < img > tag. I hope this help you start out!
      • Val Heisey says:
        Thanks Hesham, missed the part of the css that controls that area, but all is well now! Looking forward to seeing what kind of results I can generate from my top-bar!
  4. Hashim Warren says:
    Thank you! I am using this on my site right now!
  5. Binoy Xavier says:
    Can this be made to float on top of the blog always. Would be fine if you can share the code for that. Thanks in advance.
    • Hesham says:
      Hi Binoy, I apologize, I really don't have enough time to develop this code.
      • Franklin Manuel says:
        Hi Hesham, I created something similar to the Hello Bar and I named it Mintbar. Using Mintbar you can either display notifications or embed your feedburner ID. http://www.bloggermint.com/2011/06/mintbar-an-opensource-notificationsubscription-bar/ Thanks
        • Hesham Zebida says:
          Good job, I like that you've managed to explain it for WordPress and Blogger!
          • Franklin Manuel says:
            I am glad you liked it. I will be soon releasing an update to add even more customizations.
            • Hesham Zebida says:
              That's would be nice! mmm..if you have a minute, please take a look into my new plugin, I see that you do reviews on your blog, maybe you could make use of it, this plugin integrate Google's rich snippets for reviews and ratings into your blog posts, I call it Author hReview, and it's free. Thanks!
            • Franklin Manuel says:
              Sure. Will do...let me talk to you via email.
  6. Imran says:
    Hi, Hesham This is awesome tutorials I have never thought of it.. However I did place hellobar on my blog and removed it since it was gain slowing my blog a bit slow... This will use this method of add a hellobar on my blog where I will use adrotate plugin where I can place the link dynamically with the help of ninja affiliate plugin for tracking. Thanks for sharing Imran
  7. Jonathan Dunsky says:
    This is a fantastic tutorial. One of the easiest I've seen. I placed the link on my site. We'll see how it works.
  8. Sorin says:
    Hello, I add this code on web browser look ok but on the iphone is not full width. what i need to do ? thank you
    • Hesham says:
      Hi Sorin, Sorry for the late reply, try to add this code to the head of your blog 
      <meta name="viewport" content="width=1080, maximum-scale=1.5" />
      Note: Check your blog on the iPhone then change the width of 1080 to something that fits your blog!
  9. Jane says:
    Hesham, you're the bomb. I was just thinking if I should go for pro Hello Bar and you've made it super easy and free for me. Of course tracking shouldn't be a problem, coz anyone can use bit.ly :) Thanks again.
  10. Adam James says:
    That hello bar looks really smart! One of my friends is using thesis theme and has been asking me about doing this, I wasn't sure at all, don't know why he asked me because i'm not technical in the slightest but i'll send him the link to this tutorial, cheers!
  11. Nasif says:
    Okay got rid of another JavaScript code ! Page loads faster now. Thanks for the tutorial
  12. Tinh says:
    Great tips but I am not using thesis now :-) Anyway, I just quit using hello bar and started loving the ViperBar which I have my ownership and independence too. Thanks
  13. Danny says:
    I agree having the outbound link at the top of your page is not worth installing the plugin on your site. This is a much better option.
  14. Dheeraj says:
    By putting more efforts to the given code, Anyone can make Hello bar not only for thesis. but for any wordpress compatible themes. Thanks for sharing code.
  15. Karan says:
    Thanks for the great tutorial Hesham... Keep em coming..:P
  16. Argie Monroy says:
    I didn't thought about it - that installing Hello Bar on a Thesis theme is much more complicated than the other. Actually I've had my Hello bar before and I've only installed the code on my header tag and it only makes use of an HTML code. By the way, Hello Bar really is great in the way that if provides a great CTR more especially if you are planning to promote something.
  17. Tikyd says:
    I did not know that it was possible to create one's own bar. thanks for the tutorial.