Grab Attention on Your Blog with a Blinking Notification Bar
|
Want to make a great first impression and really capture your visitors' attention the moment they land on your Blogger blog? Imagine a simple, clean, and super fast-loading blinking notification bar right at the very top of your homepage!
This cool feature isn't just about looks. It includes a short text message and a clear "call to action" button, plus handy hide and show options. (You can see what it looks like in the image above!) It's actually one of the most popular tools for Blogger blogs because it can seriously help boost your traffic by getting more page views and encouraging visitors to stick around longer, which helps lower your bounce rate.
You can use this versatile bar for so many things! Highlight your upcoming events, encourage downloads of your ebooks or free resources, share promo codes or discounts, promote your YouTube channel to gain more subscribers, or even showcase your products, services, or any blog post you want to feature. The best part? It does all this without getting in the way of your visitors' Browse experience. (Just a heads-up, this specific bar won't appear on mobile devices.)
Ready to add this eye-catching feature to your own blog? Just follow the step-by-step instructions below to get started!
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://vandeweybalao.blogspot.com/2017/07/focus-on-livechat-to-get-more-business.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%)}}
- 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.
