Pure CSS Hello Bar Clone for Blogger

Posted On // 19 comments

Hello Bar Clone Blogger
You all may be knowing about Hello Bar.  If not Hello Bar is a plugin for WordPress which comes at the top of your blog with your desired text. This plugins helps you to get a lot of visitors to one desired page. If you are hosting any contest or giveaway, this bar will help you get a lot of traffic on that particular page.

We have created a clone of this plugin but without using any JavaScript it is purely based on HTML and CSS. The plugin has many features such as Beautiful Design, Shadow effect, Compressed size to get faster load time etc. In case the bar irritates any of your visitor, it can be closed just by clicking on a single button.

The demo of this widget can be seen by clicking the below button.

Once you have seen the Demo follow the below step for adding this bar on your blog.

Adding the Widget

Go to Blog Title → Layout → Add Widget → HTML/JavaScript. Paste the below code in the box

<style type="text/css">
/* Hello Bar Clone For Blogger by AllBloggerTricks.com */
#abt-hots{background-color:#EB593C;border-bottom:2px solid #FFF;height:30px;left:0;position:fixed;top:0;width:100%;box-shadow:3px 3px 3px 3px;z-index:10000}
#abt-hotsshow{background-color:#EB593C;border-bottom:3px solid #000;border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-left:3px solid #000;border-right:3px solid #000;cursor:pointer;height:25px;padding-top:5px;position:absolute;right:5px;top:0;width:30px}
.abt-hotsdownarrow{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #CC5200;height:0;width:0}
.abt-hotsuparrow{border-bottom:10px solid #CC5200;border-left:10px solid transparent;border-right:10px solid transparent;height:0;width:0}
<div id="abt-hotsmain" >
<center id="abt-hotsshow" onmouseup="document.getElementById('abt-hots').style.display='block'"><div class="abt-hotsblock"></div><div class="abt-hotsdownarrow"></div></center>
<div id="abt-hots" >
<center id="abt-hotshide" onmouseup="document.getElementById('abt-hots').style.display='none'"><div class="abt-hotsuparrow"></div><div class="abt-hotsblock"></div></center>
<center id="abt-hotsdata" >
Add your Text/Links here in HTML Format

Settings for the widget

Change Add your Text/Links here in HTML Format with your desired text/link and remember that you should add it in HTML format. You may also add buttons and other things as per your convenience.
Now save the widget and finally save the template.

You are done now. Now you and your visitors can see this cool Hello Bar Clone on your Blogger blog and you will get more and more visitors to your specified link.


Parallel Blog Author
14 May 2013 at 23:28

nice one dude. pls just check my blog design once pls.

Dhiraj Author
15 May 2013 at 07:58

@Parallel Blog You have a good blog but needs some Touch Up. Some CSS errors are there fix them.

16 May 2013 at 19:35

This thing is great. Thanks!

Anonymous Author
12 August 2013 at 01:31

Hi Shiraj.Can you please tell me how to add this only for particular pages.I don't need this for all pages.

Dhiraj Author
12 August 2013 at 15:04

For that you need to use blogger conditional tags. Refer to this page

Anonymous Author
12 August 2013 at 19:21

Thanks...it is really useful!

Yasith Gamage Author
6 October 2013 at 19:32

Thanks.. Its working success

Nitish Author
10 November 2013 at 10:13

Great widget.!! but it's not working in mozilla as good as it does in chrome.In chrome this widget appears only after scrolling down which is perfect for me as i have my nav. bars on top of my page and it disappears on reaching the top of the page displaying my nav bars. But in mozilla it appears right at top (before scrolling down) thus hiding all my nav bars.:( What should i do please guide me. Is it possible to make it disappear in certain pages.?!

Unknown Author
10 November 2013 at 11:49

Or is there a way to make it appear at the bottom of my page(for all pages)?!

Tito Dutta Author
19 December 2013 at 21:20

That's the best suggestion I have seen. I used another site's notification bar but that added an annoying link in the notification bar. This is the easiest and the best suggestion. Thank you.

Miftah Habibi Author
21 December 2013 at 16:50

Wow!! This is awesome.

Niraj lathiya Author
23 January 2014 at 18:44

100 % working.....

Alexandra M. Author
10 May 2014 at 20:01


Great topic ! But how add button with link on the same line ?

I tried to put a code <form action="our-url " method="get"...

It works fine but the button will automatically to line below !

How do you insert your link buttons ?

Thanks for your answer

ajay Author
6 September 2014 at 12:26

atlast found a genuine site, thank god

Unknown Author
13 June 2015 at 16:25

Nice Thank You
Its Working

Unknown Author
16 June 2015 at 16:14

Nice post ! Check out this blog : www.love2blogging.blogspot.com

Bayano Author
26 June 2015 at 23:54

Nice one... it really healped! Check my blog nd let me know what you think

Unknown Author
30 September 2017 at 11:48

can you please tell me how to add this to bottom of the page, or top of taskbar ?

MM Nauman Author
30 September 2017 at 21:11

We are sharing Footer Bar Similar to this with social Follow Buttons So Subscribe Us And Get Latest Updates.


Post a comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Pure CSS Hello Bar Clone for Blogger |