|
Impress your blog visitors' attention with this simple, neat and clean, fast loading blinking notification bar for Blogger blogs. It has short text notification and call to action button with hide and show buttons that appear at the top of the home page (see above-featured image). It is one of the most popular blogger widgets that can help boost your blog’s traffic by increasing the number of page views and help reduce the bounce rate of your blog.
You can use it to highlight your upcoming events, download ebooks/swipe files, offer promo codes/discounts, promote your YouTube channel to increase your subscribers, promote your products, services, or any blog post you want to feature without impeding your users browsing experience. This does not appear on mobile devices though.
If you want to implement it on your blog then follow the step-by-step instructions below:
1. Log in to your Blogger Dashboard > Theme > Edit HTML
2. Click inside the theme editor and press Command + F (Mac) and Ctrl + F (Windows)
3. Type ]]></b:skin> in the search box and press Enter Key
4. Paste the below CSS just above it
.tybar{width: 100%;
margin: 0;
height: 50px;
display: table;
font-size: 17px;
line-height: 50px;
font-weight: 600;
-webkit-font-smoothing: antialiased;
color: rgb(255, 255, 255);
font-family: 'Montserrat',sans-serif;
border-color: rgb(255, 255, 255);
background-color: #0e1032;
box-shadow: 0 1px 3px 2px rgba(0,0,0,0.15);
text-align: center;}
.tybar .bar-but{font-size: 17px;
font-weight: bold;
margin-left: 25px;
background: #fff;
padding: 5px;
color: #fff;
background-color: #ff0000;
line-height: 1.05;
padding: 4px 15px;
cursor: pointer;
text-decoration: none;
border-radius: 3px;}
.tybar .bar-but a{color:#ffffff;text-decoration: none}
.tybar i {
float: right;
padding-right: 40px;
cursor: pointer;
line-height: 50px;
}
body{margin-top:-49.33px;}
body{margin-top:49.33px ;transition:600ms;-webkit-transition:600ms;-moz-transition:600ms;-o-transition:600ms;}
.toggleclose{top:-75px!important;}
.togglebody{margin-top:0!important;}
.fa-arrow-down {
position: fixed;
right: 30px;
top: -2px;
background:#ff3d00;
color: #FFFFFF;
width: 40px;
height: 30px;
border-radius: 3px;
line-height: 26px!important;
padding-top: 10px;
padding-right: 0!important;
}
.tybar{z-index:99999;top:0;transition:600ms;-webkit-transition:600ms;-moz-transition:600ms;-o-transition:600ms;position:fixed}
.blink_me {
color:#ff0000;
margin-right:10px;
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@media screen and (max-width:800px) {
.tybar{display:none;}
body {
margin-top: 0;
}
}5. Now find the <body> and paste the HTML just below it. If it doesn't work find the </head> and paste the below HTML just under it.
<div class='tybar'><span class='blink_me'>HOT!</span>Increase Your Conversion Rate<span class='bar-but'><a href='https://vdbzone.com/2017/07/want-a-thriving-business-focus-on-livechat.html' target='_blank'>Read More</a></span><i class='fa fa-times'/></div>6. Add the Jquery/JS code just above the </body> and click Save Theme
<script>
//<![CDATA[
jQuery(document).ready(function(){
jQuery( '.tybar i' ).click(function() {
jQuery( '.tybar' ).toggleClass( 'toggleclose' );
jQuery( 'body' ).toggleClass( 'togglebody' );
jQuery( '.tybar i' ).toggleClass( 'fa-times' );
jQuery( '.tybar i' ).toggleClass( 'fa-arrow-down' );
});
});
//]]>
</script>You can also try the below alternative if you want. It is pure CSS and HTML.
Paste the below code above </body>
<div class="at-banner" id='banner'><div class="at-banner__content"><div class="at-banner__text">Get your Social Media Masterplan including 903 Social Media Post Ideas.</div><a class="at-banner__button" onclick="document.getElementById('banner').style.display='none';" href="https://bit.ly/2Y7Axur">DOWNLOAD</a></div><div class="at-banner__close" onclick="this.parentElement.style.display='none';"></div></div>And copy and paste the below CSS code and paste it before ]]></b:skin>
.at-banner{z-index:999999;position:fixed;top:0;right:0;left:0;background:#ff3d00;width:100%;border-bottom:1px solid #EEEEEE;padding:10px;box-sizing:border-box;-webkit-transform:translateY(-150%);transform:translateY(-150%);color:#FFFFFF;font-family:"Open Sans", sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-animation:at-banner-slide-in 0.8s ease forwards;animation:at-banner-slide-in 0.8s ease forwards}.at-banner__content{display:flex;align-items:center;flex-direction:row;justify-content:center;width:90%;margin:0 auto;padding:10px 40px;box-sizing:border-box}.at-banner__title{font-size:18px}.at-banner__text{margin:0 20px 0 0}.at-banner__button{display:inline-block;background:#FFFFFF;height:40px;border:0;border-radius:3px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);padding:0 20px;color:#ff3d00;font-size:12px;font-weight:700;line-height:40px;text-decoration:none;white-space:nowrap}.at-banner__close{position:absolute;top:50%;right:20px;width:20px;height:20px;-webkit-transform:translateY(-50%);transform:translateY(-50%);cursor:pointer}.at-banner__close:before, .at-banner__close:after{content:"";position:absolute;top:50%;left:50%;display:block;background:#FFFFFF;width:100%;height:3px;border-radius:2px;-webkit-transform-origin:center;transform-origin:center}.at-banner__close:before{-webkit-transform:translate(-50%, -50%) rotate(-45deg);transform:translate(-50%, -50%) rotate(-45deg)}.at-banner__close:after{-webkit-transform:translate(-50%, -50%) rotate(45deg);transform:translate(-50%, -50%) rotate(45deg)}@-webkit-keyframes at-banner-slide-in{0%{-webkit-transform:translateY(-150%);transform:translateY(-150%)}100%{-webkit-transform:translateY(0%);transform:translateY(0%)}}@keyframes at-banner-slide-in{0%{-webkit-transform:translateY(-150%);transform:translateY(-150%)}100%{-webkit-transform:translateY(0%);transform:translateY(0%)}}
References:
- Nixmedia. (2017, June 28). 7 best notification bar widget for BlogSpot Blogger [Blog post]. Retrieved from https://nixmedia.blogspot.com/2017/06/7-best-notification-bar-widget-for.html.
- Muzammil, M. (2019, March 22). Top sticky notification bar - pure CSS + HTML [Blog post]. Retrieved from https://softwebtuts.blogspot.com/2019/03/top-sticky-notification-bar.html.
