Wednesday, 18 September 2013

Tagged under: , , ,

How to Add Professional Notification Bar in Blogger Blog ?

Professional Notification Bar for Blogger
Today we are releasing a new fancy style black notification bar for your blogger blog. This notification bar will show your desire post which you want to show up at the top of the blog. However most of bloggers display the hot deals or popular post with the help of this blogger notification. The most big advantage of having notification message at the top of the blog will exist remain even if we grab the mouse down or scrolling up and down. This top righted bar will interact with every page or post. So if you have not yet added a notification bar into blogger then we would recommended to add this simple black color notification bar in your blogger blog. Most of the time i have seen bundles of comments posted by newbies in blogging forum, how could we add a notification message alert bar in blogspot blog. So in today article we will show you, How to add a professional like notification bar in blogger blog. ?

Blogger Notification Bar

This is one of the finest notification bar for all blogspot blogs. By adding this bar into your template, it would bring beauty and will change the design of your blog. It will not compel your blog on loading time because it has been created in Css and Html. So you can feel free to add without any hesitation. To add this bar in your blogger blog please follow the below method.

Blogger Notification bar

How to Add This In Blogger Blog

This is a very simple and two steps process. You can easily add this bar in your blogger blog by follow the below given steps. Remember this notification bar is only for designing, if you want to add links, then you can add your desire links inside the html coding.

Step: 1

  • Go to Blogger Dashboard:
  • Go to Template >> Edit Html:
  • Now find for ]]></b:skin>:
  • Past the below given 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: 

  • Again go to Template: 
  • Find for <body> tag:
  • Now past the below code just after <body> tag:

<div class='openbloggernotification' id='bloggernotificationWrap' style='display: block; margin-top: 0px;'>
<div id='bloggernotification'>
Your Message here
Now save your Template and you done almost:

This was all about how could we add the fancy notification bar in blogger. We hope you find this tutorial very helpful. If someone face any problem in implementation then kindly post your query in comment section, you will get instant solution from our editorial team. 
 If you want to know more PBT widget then follow our gadget inventory for more blogspot gadget. If you really like our job, then kindly share this work with your friends and relatives. Thanks and happy blogging.


  1. Very helpful thanks for this information

  2. Replies
    1. thanks Mohammad Fazle bro, these are really nice notification bar for blogger blog.

  3. Nice bro, Salahudin aubi by Mybloggertricks is already having this notification bar:)

    1. Wow i wanna see that blogger notification bar for my blog.

  4. Great widget. it give our blog some professional looks. Thanx for sharing this. I will try this widget on my blog.


    1. Thanks buddy, this really such a splendid notification bar for blogger blog.

  5. that's awesome explanation. Notification bar for blogger is always a professional look of thinking. Thanks for sharing.


  6. Very Nice sharing hafeez bro i just need that.
    keep providing these types of bar's.

  7. Hi Boss, I call you boss because reading through this post really sparked off something new in me, more deep passion to become creative in doing whatever i do. Your concept, your style are all born out of creativity. Coming to your blog is my daily delight and as a learner, i have been positively affected by you and your blog.

    I have recommended your blog to my friends, i am too sure they will be very happy to subscribe to your updates; on my part, i will always be here to support and promote your blog in every possible means.

    I deeply appreciate your influence on me to become more committed to to this industry, once again, thank you from my heart. remain blessed!

  8. tnkssssssssssssss

  9. tnkssssssssssssss

  10. nice info hafeez bro

  11. Hafeez bhai...a query related to your "top dofollow forums" post.
    I have a blog of study resources (ebooks, internships, iit and mit lecture notes videos and other things.) So these forums would be good to create back links or not. If not kindly cite some forums from where i can create backlinks. I have worked hard to make it fully helpful for students and engineers. To get an idea you can see my blog :

    Also tell me if there's any chances i can get google adsense on this blog.It gets around 300 daily pageviews.

    Kindly reply soon Hafeez bhai.
    Sorry to post comment on other post.

  12. One more thing hafeez bhai.. my blog has a floating menu . does this notification bar work above floating menu or not. Kindly see if it is feasible for my blog or not.
    Thanks and regards.

  13. Hey This is not working with me... i have quite little knowledge of html...

  14. I'm Going To Use This On My Blog

  15. It would be great to see a live demo. Thanks for the tutorial . going to add in my blogger

  16. Thank you anyways, didn't meet my need... I want to capture emails in my blog


About ProBloggerTricks

Founded in 2013, Pro Blogger Tricks is the ultimate resource for bloggers and marketers. Looking for ways to make money online? Need blogging tips, SEO tips and other business and marketing related content? Probably, the best source of information about monetizing a blog ....Read More

Copyrights @ 2014, Pro Blogger Tricks - Designed By Templateism