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.
Share on Google Plus

About Unknown

My Name is Usman Ali and i am SEO Consultant, Online Mentor who has been working since 2012. Blogging is my pession. I can help you in Make Money Online, Blogging, Teachnology, Tips and Tricks, How to and Specially SEO Related issues.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment