Integrate Free Hello Bar On Wordpress Using Only HTML and CSS

A few months ago I wrote a CSS post on how to create a free Hello Bar alternative using only HTML and CSS. The post was mainly for those who were using the Blogger platform.
hello-bar

This post is about how to use that same piece of code to show a free hello bar alternative on your Wordpress blog. Since Hello Bar comes with a price and I really don't like spending money so I came up with a technique to use this free one on my Wordpress blog - LionBlogger.com

Wordpress and Blogger blogs and every other blogs basically work in the same way. All of them have a Head (code present between <head> and </head> ) section and a Body (code present between <body> and </body>) section.

The head section mostly contains the code which are needed on every page of your blog. For e.g. the Google Analytics code, is present in the head section because it is needed to track every page of your blog.

The body section mostly contains code in mixed format. The specific code which needs to run on specific pages are defined in the body section.

To use the free hello bar on your Wordpress blog, you need to paste the code in the head section of your blog. On most Wordpress blogs, there is always a place to add the Google Analytics Code.

To use this free hello bar, the best bet would be to place the following code along with the Google Analytics code like I did in my Genesis Framework.


<link href='http://blogtipscodes.googlecode.com/files/hello.css' rel='stylesheet'/>
<div id='btchello_bar'>
Thesis 2.0 Framework and Marketers Delight 3 Kolakube Skin Giveaway
<button onClick='window.location=&apos;http://www.lionblogger.com/giveaway-thesis-2-0-framework-marketers-delight-3-kolakube-skin/&apos;' style='width:50; height:15;'>Participate Now</button>
</div><br/>

You can also change the CSS code if you want. You can just download the code from this link and upload it to Dropbox, Google Drive or to your own hosting server using FTP and just change the link in HTML part.

You can also edit the Button Text and the Description Text to your likings.

If you have any problems or questions, just drop off a comment about your problems and your queries and I will look into it.

Last, but not the least, if you like this post, kindly take the time to share this on social media.

Top