Follow these steps to put it on your website:
HTML part
1) Go to Design (on top of the page) >Edit HTML/CSS (bottom left) > Open one of the four html files (under Page layouts)
2) Search for the closing body tag </body> and paste this code just before this tag
<!-- 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. -->
/***********************************************
* 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.
***********************************************/
<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">"Your text.".</center>
</div>
</div>
(It's important to put the code before </body> otherwise the notification bar will interfere with your background)
Now you can change the text or you can put some images in it (e.g. social media buttons).
CSS part
3) Go to Design (on top of the page) >Edit HTML/CSS (bottom left) > Open main-style.css
4) Go to the end of the document and paste this code:
#exehullobarmain {width:100%; height:100px; position:fixed; top:0%; left:0%;}
#exehullobar {border-bottom: 3px solid white; background-color: #0493e5; 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: #0493e5;padding-top:5px;border-bottom: 3px solid white; border-left: 3px solid white; border-right: 3px solid white; 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 #0377B7;}
.exehullobarblock {width: 8px; height: 10px; background-color: #0377B7;}
.exehullobaruparrow {width: 0; height: 0; border-left: 10px solid transparent;border-right: 10px solid transparent; border-bottom: 10px solid #0377B7;}
If you want to change the colors:
- background-color
- border
- text
- arrow
Click here for an example on my site: http://dddproduktionen.weebly.com/ExampleBlog
Code from: http://www.exeideas.com
DDDproduktionen