Want to grab your visitors’ attention the moment they land on your Blogger site? A blinking notification bar is one simple way to highlight important announcements, featured posts, downloads, promo links, or other content you want readers to notice immediately.
This type of notification bar is popular among Blogger users because it stays visible at the top of the page without taking too much space. It can also help encourage visitors to explore more pages on your blog, which may help improve engagement and reduce bounce rates.
You can use it to promote blog posts, YouTube channels, affiliate products, downloadable resources, announcements, events, or special offers. The example below works mainly on desktop devices since the notification bar is hidden on smaller screens.
Follow the steps below to add the blinking notification bar to your Blogger template.
1. Log in to your Blogger Dashboard > Theme > Edit HTML
2. Click anywhere inside the theme editor then press Command + F on Mac or Ctrl + F on Windows.
3. Search for ]]></b:skin>
4. Paste the CSS code below directly 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. Find the <body> tag and paste the HTML code below directly underneath it.
If it does not work correctly, try placing the code below the </head> tag instead.
<div class='tybar'><span class='blink_me'>HOT!</span>Increase Your Conversion Rate<span class='bar-but'><a href='https://vandeweybalao.blogspot.com/2018/08/create-blinking-notification-bar-blog.html' target='_blank'>Read More</a></span><i class='fa fa-times'/></div>6. Paste the jQuery/JavaScript code below right above the </body> tag, then save your Blogger 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 alternative version below if you prefer a simpler notification bar using only HTML and CSS.
Paste the following HTML 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>Then paste the CSS below directly above ]]></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%)}}
Final Thoughts
A notification bar is a simple way to highlight important announcements, featured posts, downloads, affiliate offers, or other content you want visitors to notice immediately.
Hopefully, this tutorial helps you add a clean and attention-grabbing notification bar to your Blogger site without affecting your overall blog layout.
- 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.
