Create Animated Notification Bar With Jquery Effect

Socialize It →

Tweet

4

Advertisements

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.

MBL Notification Bar (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 Blogger.com >> 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.

]]></b:skin>

• 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZbYvBCqyg1x_kFWEAXmJuTS9adISJoENkT4NzLcCY0o6XdKlO1PKV0UdVDZo6BedDw9ALxXRtR7s_nwRIDfboCYjFsYph_1tw2Sy2MZW2Nu0UhYd8qDcfl-9mUEH4yG61IWtm46ga1NM/s1600/1.png') repeat-x; 

width:100%; 

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;}

.MBL_NOTICE_WRAPPER .MBL_NOTICE{color:#FF0F0F;

                                width:100%;

                                margin:auto; 

                                font-size:16px;

                                overflow: auto;

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

.MBL_NOTICE .MBL_NOTICE_NOTE { float:left;

                               width:945px; 

                               text-align: center;

                               overflow: auto;}

.MBL_NOTICE .MBL_NOTICE_CLOSE{ float:right;

                               position:relative; top:-5px;

                               width:16px;

                               background-color:#FF0F0F;

                               border:1px solid #FFBB00; 

                               padding:1px; text-align: center;

                               color:#ffcc00; 

                               cursor:pointer;}

.MBL_NOTICE .MBL_NOTICE_CLOSE:hover{ border:1px solid #ffffff;

                                     color:#ffee00;}

.N_HIDE { display:none; }

.MBL_NOTICE_LABEL { position: absolute;

                    float: right; 

                    width:95%;

                    z-index: 10;}

.MBL_NOTICE_LABEL label {padding: 1px 18px;

                         font-style:bold; 

                         margin-right:3px; 

                         background-color: #FF0F0F;

                         color:#ffffff; 

                         border:1px solid #845A1F; 

                         border-top:0;font-style:bold;

                         font-size: 15px;}

.MBL_NOTICE_LABEL label:hover{ background-color: #; 

                               cursor:pointer; 

                                color:#ffff00}

• Step#6: Now again with (Ctrl+S) search for </head> and just above it paste the following JavaScript code.

<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/jquery.js" ></script>

<script>

   $('document').ready(function () {

       $('.content-menu li')

.filter(":first").addClass("First")

.end()

.filter(":last").addClass("Last");

   });

</script>

<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/jquery.cookie.js" ></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") {

                $(".MBL_NOTICE_LABEL").slideDown(500);

            } else {

                $(".MBL_NOTICE_WRAPPER").slideDown(600);

            }

            $(".MBL_NOTICE_CLOSE").click(function () {

                $(".MBL_NOTICE_WRAPPER").slideUp(600);

                $(".MBL_NOTICE_LABEL").slideDown(500);

                $.cookie(notice_cookie_name, "off", { expires: 7 });

            });

            $(".MBL_NOTICE_LABEL label").click(function () {

                $(".MBL_NOTICE_WRAPPER").slideDown(600);

                $(".MBL_NOTICE_LABEL").slideUp(500);

                $.cookie(notice_cookie_name, "on", { expires: 7 });

            });

        }

    </script>    

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

<div class="MBL_NOTICE_WRAPPER N_HIDE">

        <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>

    </div>

    <div class="wrapper" style="text-align: right;">

        <div class="MBL_NOTICE_LABEL N_HIDE">

            <label style=""> Check Notice</label>

        </div>

    </div>

Customization:

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. 

Credits:

---

You are free to share our Notification Bar on your blog, forums and etc but it will be great if you link Mybloggerlab.com. 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.

Advertisements

About the Editorial Team

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