How to Add Professional Notification Bar in Blogger Blog

Today we are show another New style black notification bar for your blogger blog. This notification bar will demonstrate your desire post which you need to appear at the highest point of the blog. However the greater part of bloggers show the hot deals or most popular post with the help of this blogger notification. The most enormous point of interest of having notification message at the highest point of the blog will exist stay regardless of the possibility that we snatch the mouse down or scrolling all over. So this is a useful and many readers recommended to add this. In this Article, you learn How to Add Professional Notification Bar in Blogger Blog.


How to Add This In Blogger Blog

To Add this in two very easy step. Follow these steps

Step # 1: 
  • Log in to your blogger account and Go to Dashboard > Template > Edit HTML
  • Find out ]]></b:skin>:  in HTML 
  • Paste the following code 
/*-------------PBT Notification Bar ----------------*/
#bloggernotificationWrap {
    display: none;
    height: 41px;
    margin: -41px 0 0;
    padding: 0;
    position: fixed;
    width: 100%;
    z-index: 999999;
}
#bloggernotification {
    background: none repeat scroll 0 0 #000000;
    border-bottom: 3px dotted #FFFFFF;
    border-radius: 10px 13px 7px 5px;
    color: #FFFFFF;
    font-family: arial,sans-serif;
    font-size: 14px;
    font-weight: bold;
    height: 37px;
    margin: -30px 5px 5px -1200px;
    padding-top: 7px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000000;
    width: 500%;
    z-index: 9998;
}
#bloggernotification a {
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
    color: #000000;
    font-family: Calibri,sans-serif;
    font-size: 13.5px;
    padding: 1px 7px;
    text-decoration: none;
}
#bloggernotification a:hover {
    text-decoration: underline;
}
#bloggernotification img {
    display: none;
}
Step # 2:
  • Once again go to HTML Edit
  • Find out <body> tag
  • Paste the following code after <body> tag

<div class='openbloggernotification' id='bloggernotificationWrap' style='display: block; margin-top: 0px;'>
<div id='bloggernotification'>
Your Message here
</div>
</div>
Now Save Template and Enjoy.

0 comments:

Post a Comment

Blog Archive