Pure CSS Hello Bar Clone for Blogger

Dhiraj Barnwal Tuesday, 14 May 2013 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-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.
Labels:
Google+ Pinterest

19 Comments to Pure CSS Hello Bar Clone for Blogger Post Yours! Read Comment Policy ▼

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

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

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

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

Thanks...it is really useful!

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

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

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.

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

atlast found a genuine site, thank god

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

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

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

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

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