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.
<!-- 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 https://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.
hey really interesting post with awesome gadget…i like it..just going to give it try…thanks
You Are Welcome…
I tried but it is not working.Please help me.It looks like this:-
http://ratcat.weebly.com/
@Anonymous
Does Your Server Support CSS…???
Yes…
It’s Pure CSS And Also Working Everywhere…
not working bro :'( background not comming 🙁
Can I See The Link Where…???
Yeah,same thing,no background. 🙁
@Anonymous
Oh, Same Reply…
Can I See The Link Where…???
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.
Feel Free To Share But With A Back Link.
(Also Provide Me Your Tutorial Link So I Can Share It With My Visitors Also.)
i liked your way of writing … especially that pakistani quote ..
keep writing .. 🙂 …
get me at :-
http://gathertoknow.blogspot.com/
Thanks…:-)
Proud To Be A Pakistani…
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
Did You Use Over Code With All Steps…???
I added it to my testing blog- sebinthomaslab . But it doesn’t shows background. Pls help me..
Code Is Updated, Pleas Try Again…
Now its working.. Thanks man.. 🙂
You Are Welcome…
Great update bro, I added to my site http://www.muandroidapk.com. I want to cusmize color of the links in Hulo bar. How can I do it without changing all link color of my site?
I added it to my css, but it still showing default link color (green). What can I do now?
No. Just Add Below CSS And Change Its Color According To Your Desire…
#exehullbar a {color:#ff0000 !important;}
I already posted my blog address in above post. Anyway here is it – http://www.muandroidapk.com
Leave Your Blog URL Here Please…???
Still No Luck Bro 🙁 It showing default link colour (Green) after adding new css.
Add The Below CSS In Your Blog And Change Its Colour…
#exehullobardata a {color: #000 !important;}
Code Is Ok But You Added It Wrong… 😛
Have A Look Again And Add The Above Code Properly.
I figured out my mistake, thanks 😀 Now it’s working perfectly fine.
Welcome Here And Thanks For Using…
thank you for sharing nice code. it will help me to install hellobar in my blog. i appreciate your contribution.
You Are Welcome To Visiting Us…
Interesting ideas… while I do not agree with everything you spoke, I can understand your thought process.
Thanks For Visiting Us And Leaving Your Review About Me…
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
Can You Figure Out The Type Of Problem To Be Cleared And Not To Show It Again…
Look great on my page. Thanks for instructions
Take a look http://gasesti-de-toate.blogspot.ro/
Looking Cute, Thanks For Using…
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?!
For This Features, I Have To Add JQuery That Will Make It Heavy And It’s CSS Also.
Ok,we are w8 for you!
Thanks for reply!
You Are Welcome…
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!
Ok, Don’t Worry. We Will Add As Time Allows. Be With Us To Get This.
Thanks very-much!
You Are Welcome…
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
Thanks For Your Positive Views, We Will Try To Keep Our Future More Bright Than This…
I cant select or copy the code
It’s Working Fine… Which Browser You Are Using?