How to add custom notification bar in blogger.

Coppy your css

<style> #pratap-sticky{background:#333;color:#fff;text-align:center;margin:0 auto;height:50px;line-height:50px;font-size:14px;font-weight:700;text-transform:none;position:fixed;vertical-align:baseline;overflow:hidden;z-index:9999;width:100%;display:block;top:0} #pratap-sticky p a{color:#b791b6;text-decoration:none} #pratap-sticky p a:hover{color:#abc4c1} #pratap-sticky p a#pratap-button{background:#b791b6;color:#fff;padding:4px 8px;border-radius:5px;margin-left:6px;white-space:nowrap} #pratap-sticky p a#pratap-button:hover{background:#abc4c1;color:#fff} #pratap-sticky p{width:95%;float:left} .pratap-cross{display:block;position:relative;right:15px;float:right} .pratap-cross a{font-size:18px;font-weight:700;font-family:Arial;color:#fff;line-height:30px} .pratap-cross,a:hover{color:#abc4c1;text-decoration:none} @media only screen and (max-width:600px) { body{margin-top:30px} #pratap-sticky{height:auto;line-height:2.5} } </style>

Coppy your html

<div id='pratap-sticky'> <p>Add This Floating Notification Bar To Your Blog <a href=' #' id='pratap-button' target='_blank'>Click Here!</a></p> <div class='pratap-cross'><a href='javascript:hide_cross();'>X</a></div> </div> <script language='JavaScript'> function hide_cross() { crosstbox = document.getElementById("pratap-sticky"); crosstbox.style.visibility = 'hidden'; } </script>