Pure CSS Hello Bar Clone for Blogger

Posted On // 17 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-hotsmain{height:100px;left:0;position:fixed;top:0;width:100%}
#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-hotsdata{color:#FFF;font-family:serif;font-size:15px;padding:5px}
#abt-hotshide{cursor:pointer;height:20px;position:absolute;right:12px;top:4px;width:20px}
#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-hotsblock{background-color:#CC5200;height:10px;width:8px}
.abt-hotsuparrow{border-bottom:10px solid #CC5200;border-left:10px solid transparent;border-right:10px solid transparent;height:0;width:0}
</style>
<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
</center>
</div>
</div>

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.

17 comments

Parallel Blog Author
14 May 2013 at 10:58

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

Reply
14 May 2013 at 19:28

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

Reply
16 May 2013 at 07:05

This thing is great. Thanks!

Reply
Siddiq Nx Author
11 August 2013 at 13:01

Hi Shiraj.Can you please tell me how to add this only for particular pages.I don't need this for all pages.
Thanks,
http://islaamthetruth.blogspot.in

Reply
12 August 2013 at 02:34

For that you need to use blogger conditional tags. Refer to this page
http://techbymak.com/blogger-conditional-tags.html

Reply
Siddiq Nx Author
12 August 2013 at 06:51

Thanks...it is really useful!

Reply
6 October 2013 at 07:02

Thanks.. Its working success

Reply
Nitish Author
9 November 2013 at 20:43

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.?!

Reply
Young Bhaarat Author
9 November 2013 at 22:19

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

Reply
Tito Dutta Author
19 December 2013 at 07:50

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.

Reply
Miftah Habibi Author
21 December 2013 at 03:20

Wow!! This is awesome.

Reply
niraj lathiya Author
23 January 2014 at 05:14

100 % working.....

Reply
10 May 2014 at 07:31

Hi,

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

Reply
ajay Author
5 September 2014 at 23:56

atlast found a genuine site, thank god

Reply
Focus Fica Author
13 June 2015 at 03:55

Nice Thank You
Its Working
http://knowithere.blogspot.in/

Reply
MAAZ khan Author
16 June 2015 at 03:44

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

Reply
Cyntia Morgan Author
26 June 2015 at 11:24

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

Reply

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 |