We Started A Facebook AutoLiker & AutoCommenter. Check Out Our EXELiker & EXECommenter...

100% Free Hulo Bar For Blogger And Website With CSS Only

Free Hulo Bar For Blogger And Website With CSS Only

First of all i want to say that this HOT code is only for those who love CSS and hate J-Query or Premium services.Here i want to tell you that when i was searching something, I just saw the HelloBar website and like there widget. But when i scroll down I just saw that it’s Premimum. I just get upset and you know that Bill Gates Say’s That ” I will always choose a lazy person to do a difficult job… because, he will find an easy way to do it.” But An Anonymous Said That ” I will always choose a Pakistani to do a premium job… because, he will find a FREE way to do it.” :-)

So Here I Just create the 99.99% same widget as HelloBar and also i did not use any single JQuery, JavaScript Or even Image as you know that i HATE them all.
This Bar is working same as official HelloBar is doing like it has a close/hide the Bar button with CSSed functioned and after the Bar will be hidden, There appear a small button to show again the Bar. Button Arrow are also CSSed. I Think you didnot understand, First have a look on official HelloBar and ther My Bar.

Free Hulo Bar For Blogger And Website With CSS Only

As you know that HelloBar is a CopyRight Name so i just named It “HULOBAR“…:-)

Without any more preface, First visit the below link to see the official HelloBar in working proceed and then visit my code. You will be confirmed what i am telling you…
HelloBar:  Web Toolbar – Get More Clicks with the Hello Bar Notification Bar…
HuloBar: See the demo above…

Features:

1.) 99.99% Same As Premium HelloBar.
2.) Only CSS, Not A Single JQuery-JavaScript-Image.
3.) Close And Hide Function Is CSSed Also.
4.) Drive More Attention To Your Most Important Text/Link With This Hullo Bar.
5.) Easy To Install.
6.) It Will Float All Over The Blog/Site Page/Post.
7.) It’s 100% Free.
8.) Not A Single Image Even Arrows Are CSS Designed.
9.)Quick, Quick, Quick To Load.
10.) You Can Add Any Type Of Date Like Text, Social Button Scripts, Links To Increase Clicks.
11.) The Text Will Remain Sliding/Scrolling.
12.) You Can Also Make It Static.
13.) Sliding Text Effect By MARQUEE Tag.
14.) Attractive Style With Small Code.
15.) 100% Free Code With HTML Comment.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Layout“.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.

How To Add In Website?

1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.

<!-- This Is A CopyRight Code.It Is Free To Use But With HTML Design Code.
If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->
<style type="text/css">
/***********************************************
* Hulo Bar With CSS Only- © EXEIdeas (www.exeideas.com)
* This notice must stay intact for use.
* Visit http://www.exeideas.com/ for full source code.
***********************************************/
#exehullobarmain {width:100%; height:100px; position:fixed; top:0%; left:0%;}
#exehullobar {border-bottom: 3px solid black; background-color: #FF6600; overflow:none; width:100%; height:30px; position:fixed; top:0%; left:0%;}
#exehullobardata {padding:5px;color:#fff;}
#exehullobarhide{position: absolute;top: 4px;right: 12px;width: 20px;height: 20px;cursor:pointer;}
#exehullobarshow{position: absolute;top: 0px;right: 5px;width: 30px;height: 25px;cursor:pointer;background-color: #FF6600;padding-top:5px;border-bottom: 3px solid black; border-left: 3px solid black; border-right: 3px solid black; border-bottom-right-radius:5px;border-bottom-left-radius:5px;}
.exehullobardownarrow {width: 0; height: 0; border-left: 10px solid transparent;border-right: 10px solid transparent; border-top: 10px solid #CC5200;}
.exehullobarblock {width: 8px; height: 10px; background-color: #CC5200;}
.exehullobaruparrow {width: 0; height: 0; border-left: 10px solid transparent;border-right: 10px solid transparent; border-bottom: 10px solid #CC5200;}
</style>
<div id="exehullobarmain" >
<center id="exehullobarshow" onmouseup="document.getElementById('exehullobar').style.display='block'"><div class="exehullobarblock"></div><div class="exehullobardownarrow"></div></center>
<div id="exehullobar" >
<center id="exehullobarhide" onmouseup="document.getElementById('exehullobar').style.display='none'"><div class="exehullobaruparrow"></div><div class="exehullobarblock"></div></center>
<center id="exehullobardata" ><marquee>Drive More Attention To Your Most Important Text/Link With Hulo Bar.</marquee></center>
</div>
</div>
<!-- This Is A CopyRight Code.It Is Free To Use But With HTML Design Code.
If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->



Customization:

1.) Just Change "Drive More Attention To Your Most Important Text/Link With Hullo Bar." With Your Text, Links Or Social Button Scripts etc.
2.) You Can Edit More Thing If You Know CSS.
3.) If Don't Know And Still Want Some Changing, Feel Free To Ask.

© CopyRight:

The "HelloBar" Is The CopyRight Of www.hellobar.com And "HuloBar" Is The DMCA CopyRight Of www.exeideas.com. We Did Not Have And Relationship With Him And He Has Also Nothing With Us.

You Like It, Please Share This Recipe With Your Friends Using...

50 Responses to “100% Free Hulo Bar For Blogger And Website With CSS Only”

  1. hey really interesting post with awesome gadget…i like it..just going to give it try…thanks

  2. not working bro :'( background not comming :(

  3. Anonymous says:

    Can I use this code to make a tutorial on my blog.
    You have to make a few changes to make it work on Weebly.

  4. i liked your way of writing … especially that pakistani quote ..

    keep writing .. :)
    get me at :-
    http://gathertoknow.blogspot.com/

  5. Sebin Thomas says:

    hi muhammad,
    i m a regular visitor of your site. I have a problem with this hello bar. i added this widget to my site (now its removed, because it doesn’t work), but it only shows a down arrow. Now i added a hello bar from hellobar.com, it working perfectly (it is limited version). so i really want to add this widget to my blog.. pls help me.. my site- freeandroidappshop.com

  6. Sebin Thomas says:

    I added it to my testing blog- sebinthomaslab . But it doesn’t shows background. Pls help me..

  7. Sebin Thomas says:

    Now its working.. Thanks man.. :)

  8. googma says:

    thank you for sharing nice code. it will help me to install hellobar in my blog. i appreciate your contribution.

  9. Steamer's Carpet Care says:

    Interesting ideas… while I do not agree with everything you spoke, I can understand your thought process.

  10. dentist in Katy says:

    hey there and thanks for your information ? I have definitely picked up something new from proper here. I did however experience a few technical points the usage of this website, since I skilled to reload the web site lots of times

  11. All You Need says:

    Look great on my page. Thanks for instructions
    Take a look http://gasesti-de-toate.blogspot.ro/

  12. File-24 says:

    Omg,this is very nice!!!
    Bro i have one question,this is very fast closing,can u show me how to add code slowly for closing?!

  13. File-24 says:

    Ok,we are w8 for you!
    Thanks for reply!

  14. File-24 says:

    Bro plz say me,u need how time to add JQ this widget,this is important for me,i can buy this widget by u!

  15. Leena Dasot says:

    Hello, I personally think that you have a nice way of words. Keep on writing because this is the kind of stuff we all need. Thanks

  16. Bukky Pietro says:

    I cant select or copy the code

Leave a Reply