stylish notification bar at the top of blogger site

stylish notification bar at the top of blogger site

make a stylish notification bar at top or bottom at your blogger site

steps:

1. open your blogger deshbord
2. click on theme
3. 
   
4. edit html
5. click anywhere in coding area and press 'ctrl+f' 
6. find </body>
7. just above </body> copy and paste this code

1. save template
2. your notification bar is ready

demo

<!-- http://bloggershindihelp.blogspot.com Notification Bar start -->
<style type="text/css">
blink {
        animation: blinker 1s linear infinite;
       color: red;margin-right:10px;font-size:20px;
       }
      @keyframes blinker {  
        50% { opacity: 0; }
       }
.hbsclose{display:block; position:absolute; right:15px;top:4px; float:right;}
.hbsclose a{font-size:48px; font-weight:bold;color:red; line-height:30px;text-decoration: none;}
.hbsclose a:hover{color:white;}
#hbsticky{
background-color:black;
color:#ffffff;
text-align: center;
margin:0px;
height:auto;
font-size:13px;
position:fixed;
top:0px;
z-index:999;
width:100%;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
display:block;
font-size:20px;
font-family: serif;text-decoration: none;}
.hbsbtn{ background-color: white;
  color: green;
  padding: 2px 8px;
  text-align: center;font-size:20px;margin:5px;border-radius:5px;
  text-decoration: none;
  display: inline-block;}

</style>
<div id="hbsticky">
<blink>HOT!
</blink>New Notification bar
<span class="hbsbtn"><a href="https://bloggershindihelp.blogspot.com/2019/06/httpbloggershindihelp.html" style="color: #ff5527; text-decoration: none;">click here</a></span>


<br />
<div class="hbsclose">
<a href="javascript:hide_cross();">&amp;times;</a></div>
</div>
<script language="JavaScript">
function hide_cross() {
crosstbox = document.getElementById('hbsticky');
crosstbox.style.visibility = 'hidden'
}
</script>
<!-- End of Notification Bar by- http://bloggershindihelp.blogspot.com --> 
(code-box)

change red colored  word as you want
change your desigerd page link from green colored link
if you watnt notification bar at bottom than change  top into bottom & bottom into top in this code

if you like this post than don't forgot subscribe us