Create Animated Notification Bar With Jquery Effect

Designing our Blog with enthusiasm and self believe is the most vital point, being a Blogger we try our best to craft our Blog to perfection. However, to stylize a faultless design we more often use Widgets which not only improve our Blog’s appearance but also provide convenience to our readers. Few days ago, we launched a Scrolling-Bar with the close Button and luckily in real short time it became a massive Hit! This is the motive, today we thought to take our blog to the next level by designing a Notification Bar. To make our community more reliable, we have made it lot easier. Users can easily view or dismiss the notification bar any time they like. While I was searching the enormous world of internet, a spectacular idea clicked me, why not we create a notice bar? That would be capable of keeping our visitors updated. So I and my elder Brother accepted this challenge, and finally after a full day hard-hitting coding was able to win the challenge. So today we will learn How to Create a Notice Bar.

I know you would love to preview this Notification bar for blogger, so before we get started lets see the live demo.

Why to use Notification Bar:

To make our community more worthy, we need to maintain trust in the heart of our readers. To provide them with quality information regarding our organization, we can facilitate them with Notification bar. For instance, if a blogger is on a holiday he will find himself powerless to bring updates to his blog. However, his readers are still not aware of this fact that he is on a leave. Hence he looses his loyal readers. So to keep our readers updated we can facilitate them with Notice Bar where we can list our essential activities i.e. Blogger is on a Leave, Website is under maintenance and other crucial notifications.

Features of MBL Notification Bar:

  • Built with Fresh and new look,
  • Optimized with show and Dismissible buttons,
  • Smooth Jquery shutter up and down style included,
  • Ultra fast widget no compromise on site speed,
  • Support’s multiple browsers i.e. Firefox, chrome. Internet explores and etc.

Adding MBL Notification Bar in Blogger:

To insert Notice Bar in Blogger Blogspot blog, we don’t need to sense any kind of stress as these steps are uncomplicated. Do as follows. 
  • Step#1: Go to >> Your Blog
  • Step#2: Now select Template >> and take backup of your template
  • Step#3: Then press Edit HTML >> Proceed
  • Step#4: Now in your template search for the following code.
  • Step#5: Once you find it just place the following CSS Style code above it.
/* MBL Notification Bar */

* {margin: 0px; padding: 0px;}

.MBL_NOTICE{background:#FF0000 url('') repeat-x; 
border-bottom: 2px solid #845888; 
-moz-box-shadow: #066066 10px 5px 3px; 
-webkit-box-shadow: #666666 0px 1px 3px; 
 box-shadow: #666666 0px 3px 3px; 

.MBL_NOTICE_WRAPPER{ color:#ffffff; 
                     font-weight: bold;}

                                overflow: auto;
                                font-family: Tahoma, Arial, Helvetica, sans-serif;}

                               text-align: center;
                               overflow: auto;}

                               position:relative; top:-5px;
                               border:1px solid #FFBB00; 
                               padding:1px; text-align: center;

.MBL_NOTICE .MBL_NOTICE_CLOSE:hover{ border:1px solid #ffffff;
.N_HIDE { display:none; }

.MBL_NOTICE_LABEL { position: absolute;
                    float: right; 
                    z-index: 10;}

.MBL_NOTICE_LABEL label {padding: 1px 18px;
                         background-color: #FF0F0F;
                         border:1px solid #845A1F; 
                         font-size: 15px;}

.MBL_NOTICE_LABEL label:hover{ background-color: #; 
  • Step#6: Now again with (Ctrl+S) search for </head> and just above it paste the following JavaScript code.

<script type="text/javascript" src="" ></script>

   $('document').ready(function () {
       $('.content-menu li')
<script type="text/javascript" src="" ></script>

    <script type="text/javascript">

        var notice_cookie_name = "Notice71";
        $("document").ready(function () {
            var t = setTimeout("notice()", 1000);
        function notice() {
            if ($.cookie(notice_cookie_name) == "off") {
            } else {
            $(".MBL_NOTICE_CLOSE").click(function () {
                $.cookie(notice_cookie_name, "off", { expires: 7 });
            $(".MBL_NOTICE_LABEL label").click(function () {
                $.cookie(notice_cookie_name, "on", { expires: 7 });


  • Step#7: Now the last step search for <body> and just below it paste the following HTML code.


        <div class="MBL_NOTICE">

            <div class="MBL_NOTICE_NOTE"><br /><span style="color: #FDF6F6; font-size: 20px;">Your-Notice-Here<span style="font-weight: bold;">Your-Bold-Notice</span></span><br /><br /><br /></div>

            <div class="MBL_NOTICE_CLOSE">x</div>

    <div class="wrapper" style="text-align: right;">
        <div class="MBL_NOTICE_LABEL N_HIDE">
            <label style=""> Check Notice</label>


To change the color of your Notification Bar simply replace #FF0000
If you want to change the color of your Text simply replace #FDF6F6
To change the text of your Notice button replace  Check Notice  with your text
To change the Width of your Notice Button simply replace 18px
To change the notification text replace Your-Notice-Here with  your customized text
Replace Your-Bold-Notice with the most important text in your customized notice
Replace 20px to change the size of your notification text

  • Step#8 Now after customizing your Notification Bar press Save Now and view your blog it will give perfect results. 

You are free to share our Notification Bar on your blog, forums and etc but it will be great if you link This will be the best gift for our hard-work and determination.

So, guys I hope you have enjoyed the rollercoaster ride. Soon we will share more similar widgets. If you need any help feel free to ask, this is it for now. Till then peace, blessing and happy notifying.

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
Choose Wisely!


June 12, 2012 at 4:48 PM

i like it, thanks friend :D

June 12, 2012 at 5:57 PM

Well exellent Noti-bar

thanks Syed

June 14, 2012 at 9:12 AM

sir can you tell me how to make an index or list of movies and games on my blog...

for example see this >>> <<<

sir please tell me please

sunil bishnoi..

Editorial Team MOD
June 14, 2012 at 1:45 PM

@sunil bishnoi
Brother they are using simple Linking Anchor Text Technology with Optimized CSS Style. We are Working on This Widget soon we will Provide you Complete Step by Step Guidance on Creating Such Stunning List Like it. Stay Tuned Peace and Blessings.

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.