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.
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.
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.
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.
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" >Drive More Attention To Your Most Important Text/Link With Hulo Bar.</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. -->
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" >Drive More Attention To Your Most Important Text/Link With Hulo Bar.</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. -->
Hi there, I enjoy reading all of your article post. I like to write a little comment
ReplyDeleteto support you.Thanks for sharing your great post.
website design