deals, announcements or any story. It functions on pure jQuery light-weight functions
and the best thing is that it is compatible with every browser. No branding and any
hidden cost.
How To Add This in Your Site
1.Go to Blogger > Template
2. Click on edit HTML.
3. Paste the Below Code above, ]]></b:skin>
.mybar {
position: fixed;
top: -10px;
left: 0px;
width: 100%;
height: 24px; /* << set custom WOAHbar height */
z-index: 100; /* << DO NOT EDIT, KEEPS WOAHbar ON TOP OF PAGE CONTENT */
padding: 15px 0 5px 0;
text-align: center;
font-size: 13px;
font-weight: bold;
font-family: arial,sans-serif;
color: #cccccc; /* << set custom WOAHbar font color */
background: none repeat scroll #2E2F2E; /* << set custom bar color here */
border-bottom:2px solid #fff;
box-shadow:0px 1px 3px #666;
}
.mybar-stub {
position: fixed;
top: -10px;
left: 0px;
width: 100%;
height: 19px;
z-index: 200;
padding: 7px 0 5px 0;
text-align: center;
}
.mybar span {
float: left;
width: 95%;
text-align: center;
padding-top: 2px;
}
.down-arrow {
display: block;
position: absolute;
top: 11px;
right: 15px;
padding: 0 7px;
background: #2E2F2Eurl(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIc0U8t-LpkSjDoLkbhdmZjVG4pXEtp4iAw5cGaH81Z3eck-qF-HVEQdeCXUeXIH3iQiULXxV4Sw1lUa_0AGqmxwL4PtVsNRSr6X3vLLg2IcnUX0k73H_yLRbff-qVpQa3Y_XUpaxTDuI/s1600/xsvsc.png)no-repeat center;
border-left: 3px solid #fff;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
cursor: pointer;
z-index: 1;
-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;
box-shadow:0px 1px 3px #666;
}
.down-arrow:hover {
background: #2E2F2Eurl(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5NQGb1uxjcGVio3hdYnrafiA2qYD0PNGrT15C3nmZzIHxZaCrYevuoNyHTcODCfaqMr69ZUn-8NXRuw0bN8LZ3-Pk1-iVYw8f-Q9ci3Fzkuc816HgjuaYKnEyVJaSZtHxuu8pFbgz4lU/s1600/hgdhg.png)no-repeat center;
}
.mybar-up-arrow{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxSWhD_l7G71i7bkx-hlvwARVgl7IjafQyjYGM0mR_KdvS8U-hk4uyVMFd7g0UpBkwieDnT2HZ9dCd8dvmDB1QWLQBT-gmKttW26tcDxYXgayX7ZVvEJjFfkaRWd7ItLlvXY1xgRYHVm0/s1600/2ndarrow.png);
}
.mybar-up-arrow:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwMqLneQE7-IQ1UBgvhBmcVZAn-h0sqNw0E665b_ab_babWsnUETK-LO01jyUwkI0k-Uh2EFyr_6pKnz80PVBqhVIt40WiwCkmHMn_NJS2DC4dl8gjiHYW8C6sKlEEseSIeR4u8il7Brw/s1600/2ndarrow.z.png);
}
.mybar-link {
text-decoration: none;
color: #FFFC00;
padding: 1px 8px 3px 8px;
font-size: 13px;
font-weight: bold;
}
.mybar-link:hover {
text-decoration: underline;
}4. Add this code above </head>
<script src=’http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js’ type=’text/javascript’/> <script> var stub_showing = false; function mybar_show() {if(stub_showing) {$('.mybar-stub').slideUp('medium', function() { $('.mybar').show('bounce', { times:3, distance:15 }, 300); $('body').animate({"marginTop": "32px"}, 300);});} else {$('.mybar').show('bounce', { times:3, distance:15 }, 500); $('body').animate({"marginTop": "32px"}, 250);}} function mybar_hide() {$('.mybar').slideUp('medium', function() {$('.mybar-stub').show('bounce', { times:3, distance:15 }, 100);stub_showing = true; }); if( $(window).width() > 1024 ) {$('body').animate({"marginTop": "0px"}, 250);}} $().ready(function() {window.setTimeout(function() {mybar_show();}, 0);}); var mstub_showing = false; function mmybar_show() {if(mstub_showing) {$('.mmybar-stub').slideUp('fast', function() {$('.mmybar').show('bounce', { times:3, distance:15 }, 300);$('body').animate({"marginTop": "32px"}, 300);});} else {$('.mmybar').show('bounce', { times:3, distance:15 }, 500); $('body').animate({"marginTop": "32px"}, 250);}} function mmybar_hide() {$('.mmybar').slideUp('fast', function() { $('.mmybar-stub').show('bounce', { times:3, distance:15 }, 100); mstub_showing = true; }); if( $(window).width() > 1024 ) { $('body').animate({"marginTop": "0px"}, 250);}} $().ready(function() { window.setTimeout(function() {mmybar_show(); }, 0); }); </script>
5. Add this code below <body>
<div class=’mybar’ style=’display: none;’><span style=’font-family: 'Arial, Helvetica, sans-serif;’>PUT YOUR MESSAGE HERE:<a class=’mybar-link’ href=’#'>PUT YOUR LINK HERE |</a> PUT YOUR MESSAGE HERE:<a class=’mybar-link’ href=’#'>PUT YOUR LINK HERE |</a>PUT YOUR MESSAGE HERE:<a class=’mybar-link’ href=’#'>PUT YOUR LINK HERE |</a></span> <a class=’close-notify’ onclick=’mybar_hide();’><img class=’mybar-up-arrow’ src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTEOMAakzqK4gVfa2-tSrPs29R0YDUoxIKGV12Bx63ATFZkBISqk820JeB3FcwCCKmYQqBOPXkY-YHp_CvZYe3czNAWVbCqRYsJpuA4t9BKnDZqQm_bwSVF7CKRL1mXFAS31CHGcRQrr8/s1600/assddf.png’/></a></div> <div class=’mybar-stub’ style=’display: none;’><a class=’down-arrow’ onclick=’mybar_show();’><img class=’mybar-down-arrow’ src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTEOMAakzqK4gVfa2-tSrPs29R0YDUoxIKGV12Bx63ATFZkBISqk820JeB3FcwCCKmYQqBOPXkY-YHp_CvZYe3czNAWVbCqRYsJpuA4t9BKnDZqQm_bwSVF7CKRL1mXFAS31CHGcRQrr8/s1600/assddf.png’/></a></div>
Do the changes Put Your Message and link in the above Code which is in Red Color Text.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon