How To Use Custom Hello Bar in Your Website Or Blog?

Yes Of course !

A Hello bar with any credit link to other website showing the possession over it spoil the overall designing work done by the blogger or web designer.

But A website having credit Links of the author's website or no credit link on that hello bar looks really rich.

You Got It !

This is another Blogger Widget.

But this is not limited to blogger only.

You can use it in your own self hosted website or a single webpage as well.

As this widget is made with simple CSS and HTML coding, I am saying this as (HTCHelloBar).

So, without wasting time let's start putting your own hello bar on your website or blog.

First You need to Put the CSS Code in the Head section of your template file. In Blogger Dashboard, Goto Template and then In EDIT HTML section find </head>

and copy and paste the code snippet given below just above </head>

<style>
#myhellobar {
position :fixed;
bottom: 0px;
height: 35px;
text-align-center;
background: red;
background-visibility: 0.5;
color: black;
border: 3px solid red;
}
</style>

The Above Code is to define the styling for your hello bar.

Now it is the time for your Hello bar Text....................

The code below is to be put before the body tag ends. So, copy that code in your template file before </body>

<div id="myhellobar">
Hello! Welcome to Website Title. <a href="#">View Updates and Announcements</a>
</div>

Now

Save The Template and you are all done.

To use multiple links in hello bar , you can do it with simple HTML knowledge.

By default, the background of your hello bar will be 50% red. To change the color replace red with your selected color. To change opacity replace 0.5 with any value between 0.1 to 1 while 1 is 100% opacity.

Hope this Hello bar widget interested you. Happy Blogging! and Take care Bloggers........