Announcement:

  Hello, We Are Now Designing Blogger Awesome Template. Check Out At Netzspot.Blogspot.

Friday, March 22, 2013

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

This Article Was Live On: Friday, March 22, 2013 And Till Now Have50 comments.
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 Article Using...




Don't Forget To Read This Also...



50 comments :

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

    ReplyDelete
    Replies
    1. I tried but it is not working.Please help me.It looks like this:-

      http://ratcat.weebly.com/

      Delete
    2. @Anonymous
      Does Your Server Support CSS...???

      Delete
    3. It's Pure CSS And Also Working Everywhere...

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

    ReplyDelete
    Replies
    1. Yeah,same thing,no background. :(

      Delete
    2. @Anonymous
      Oh, Same Reply...
      Can I See The Link Where...???

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

    ReplyDelete
    Replies
    1. Feel Free To Share But With A Back Link.
      (Also Provide Me Your Tutorial Link So I Can Share It With My Visitors Also.)

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

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

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

    ReplyDelete
    Replies
    1. Did You Use Over Code With All Steps...???

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

    ReplyDelete
  7. Replies
    1. Great update bro, I added to my site 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?

      Delete
    2. No. Just Add Below CSS And Change Its Color According To Your Desire...
      #exehullbar a {color:#ff0000 !important;}

      Delete
    3. I added it to my css, but it still showing default link color (green). What can I do now?

      Delete
    4. Leave Your Blog URL Here Please...???

      Delete
    5. I already posted my blog address in above post. Anyway here is it - www.muandroidapk.com

      Delete
    6. Add The Below CSS In Your Blog And Change Its Colour...
      #exehullobardata a {color: #000 !important;}

      Delete
    7. Still No Luck Bro :( It showing default link colour (Green) after adding new css.

      Delete
    8. Code Is Ok But You Added It Wrong... :-P
      Have A Look Again And Add The Above Code Properly.

      Delete
    9. I figured out my mistake, thanks :D Now it's working perfectly fine.

      Delete
    10. Welcome Here And Thanks For Using...

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

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

    ReplyDelete
    Replies
    1. Thanks For Visiting Us And Leaving Your Review About Me...

      Delete
  10. 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

    ReplyDelete
    Replies
    1. Can You Figure Out The Type Of Problem To Be Cleared And Not To Show It Again...

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

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

    ReplyDelete
    Replies
    1. For This Features, I Have To Add JQuery That Will Make It Heavy And It's CSS Also.

      Delete
  13. Ok,we are w8 for you!
    Thanks for reply!

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

    ReplyDelete
    Replies
    1. Ok, Don't Worry. We Will Add As Time Allows. Be With Us To Get This.

      Delete
  15. 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

    ReplyDelete
    Replies
    1. Thanks For Your Positive Views, We Will Try To Keep Our Future More Bright Than This...

      Delete
  16. Replies
    1. It's Working Fine... Which Browser You Are Using?

      Delete

Speak Your Mind:



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 "Notify me" 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 quires 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.) Your 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 fulfil the requirements.