Pure CSS Hello Bar Clone for Blogger



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.

19 comments:

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

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

    ReplyDelete
  3. 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

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

      Delete
    2. Thanks...it is really useful!

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

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

    ReplyDelete
  6. 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.

    ReplyDelete
  7. 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

    ReplyDelete
  8. atlast found a genuine site, thank god

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

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

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

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

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

      Delete