Here are the steps you need to take in order to place the Hello Bar on your Tumblr blog:
1. Insert the following code in the header section of the page. It is a new CSS style script for the hello bar. These settings will be called by the hellobar script in the body.
<style type=”text/css”>#hellobar-wrapper{height:30px;margin:0;overflow:visible;padding:0;position:relative;width:100%;z-index:2}#hellobar-container{font-size:14px;font-weight:normal;height:30px;line-height:30px;margin:0;overflow:visible;padding:0;position:relative;text-align:center;width:100%;z-index:1000}#hellobar-container a,#hellobar-container a:link,#hellobar-container a:visited,#hellobar-container a:hover{font-size:14px;padding:0;border:none;text-decoration:underline}#hellobar-container a:hover{text-decoration:none}#hellobar-shadow{position:absolute;bottom:-8px;left:0;width:100%;height:8px;line-height:8px;overflow:hidden;background:url(//assets-hellobar-com.s3.amazonaws.com/system/modules/hellobar/lib/shadow.png)}a#hellobar-logo,a#hellobar-logo:link,a#hellobar-logo:visited{background:url(//assets-hellobar-com.s3.amazonaws.com/system/modules/hellobar/lib/logo.png);height:0;left:20px;overflow:hidden;padding:22px 0 0;position:absolute;top:3px;width:44px}#hellobar-wrapper.hellobar-left a#hellobar-logo,#hellobar-wrapper.hellobar-left a#hellobar-logo:link,#hellobar-wrapper.hellobar-left a#hellobar-logo:visited{left:auto;right:20px}a#hellobar-close,a#hellobar-close:link,a#hellobar-close:visited{background-image:url(//assets-hellobar-com.s3.amazonaws.com/system/modules/hellobar/lib/up.png);background-position:0 0;display:block;height:0;overflow:hidden;padding:19px 0 0 0;position:absolute;right:20px;top:6px;width:18px;z-index:10;border:none}#hellobar-wrapper.hellobar-left a#hellobar-close,#hellobar-wrapper.hellobar-left a#hellobar-close:link,#hellobar-wrapper.hellobar-left a#hellobar-close:visited{right:auto;left:20px}a#hellobar-close:hover{background-position:0 -19px;padding:20px 0 0;border:none}a#hellobar-open,a#hellobar-open:link,a#hellobar-open:visited{background-image:url(//assets-hellobar-com.s3.amazonaws.com/system/modules/hellobar/lib/down.png);background-repeat:no-repeat;background-position:center 53px;display:block;height:0;overflow:hidden;padding:80px 0 0;position:absolute;right:10px;top:-96px;width:35px;z-index:100;box-shadow:0 0 5px rgba(0,0,0,0.35);-moz-box-shadow:0 0 5px rgba(0,0,0,0.35);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.35);-ms-filter:”progid:DXImageTransform.Microsoft.Shadow(Color=#e5e5e5,direction=120,strength=3)”;filter:progid:DXImageTransform.Microsoft.Shadow(Color=#e5e5e5,direction=120,strength=3);-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomright:5px;-moz-border-radius-bottomleft:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;border-width:3px;border-style:solid}#hellobar-wrapper.hellobar-left a#hellobar-open,#hellobar-wrapper.hellobar-left a#hellobar-open:link,#hellobar-wrapper.hellobar-left a#hellobar-open:visited{right:auto;left:10px}a#hellobar-open:hover{padding:80px 0 0;border-width:3px;border-style:solid}#hellobar-container{font-family:Helvetica,Arial,sans-serif;background:#c20202;color:#fff}#hellobar-container a,#hellobar-container a:link,#hellobar-container a:visited{color:#fff982}a#hellobar-open,a#hellobar-open:link,a#hellobar-open:visited{background-color:#c20202;border-color: #ffffff}a#hellobar-open:hover{background-color:rgb(232,40,40)}</style>
2. Then, right after the <body> tag, insert the following code.
<div style=”display: block; height: 33px; ” id=”hellobar-wrapper” class=” hellobar-left”><div id=”hellobar-container” style=”top: 0px; “><span>Japan has been hit by a major 8.9 earthquake. Please donate to</span> <a href=”https://donate.doctorswithoutborders.org/SSLPage.aspx?pid=21... target=”_blank”>Doctors Without Borders</a><a href=”//www.hellobar.com/” title=”The HelloBar - a little bar that gets noticed!” target=”_blank” id=”hellobar-logo”>The HelloBar - a little bar that gets noticed!</a><a href=”#close” id=”hellobar-close”>Close</a><div id=”hellobar-shadow”></div></div><a href=”#close” id=”hellobar-open” style=”top: -96px; “>Open</a></div>
——-
That’s it! Let’s try to support Japan as much as we can! Place the hello bar on your Tumblr blog to support Japan today!