100% 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.

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.

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

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.

40 comments:

probloggerstricksJuly 2, 2012 at 1:25 PM
hey really interesting post with awesome gadget...i like it..just going to give it try...thanks
Rikk's Heart SpeaksJuly 13, 2012 at 10:31 PM
not working bro :'( background not comming :(
AnonymousJuly 22, 2012 at 7:00 PM
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.
Akhil PulotilJuly 23, 2012 at 10:21 PM
i liked your way of writing ... especially that pakistani quote ..

keep writing .. :) ...
get me at :-
http://gathertoknow.blogspot.com/
Sebin ThomasAugust 24, 2012 at 10:28 PM
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
Sebin ThomasSeptember 24, 2012 at 10:50 PM
I added it to my testing blog- sebinthomaslab . But it doesn't shows background. Pls help me..
Sebin ThomasSeptember 25, 2012 at 9:46 AM
Now its working.. Thanks man.. :)
googmaNovember 27, 2012 at 11:09 AM
thank you for sharing nice code. it will help me to install hellobar in my blog. i appreciate your contribution.
Steamer's Carpet CareDecember 16, 2012 at 4:37 AM
Interesting ideas… while I do not agree with everything you spoke, I can understand your thought process.
dentist in KatyDecember 16, 2012 at 5:00 AM
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
All You NeedDecember 24, 2012 at 4:37 PM
Look great on my page. Thanks for instructions
Take a look http://gasesti-de-toate.blogspot.ro/
File-24January 9, 2013 at 5:51 AM
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?!
File-24January 10, 2013 at 11:59 AM
Ok,we are w8 for you!
Thanks for reply!
File-24January 10, 2013 at 10:23 PM
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!
File-24January 11, 2013 at 5:18 PM
Thanks very-much!
Leena DasotMarch 25, 2013 at 8:05 PM
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
Bukky PietroMay 27, 2013 at 7:32 PM
I cant select or copy the code

Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Subscribe by email" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quiries contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) You comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfill the requirements.

Let's Your Mind Rock...!!!