Add Fixed Animated Notice Banner Widget in Blogger

Rishabh Jain• August 16, 2013• 0 Min Read

blogger-logoAs you can see the widget live working on this post, well people really demand for widget's like these so that they can easily display some useful note, maybe some links or anything. So they something that is just catchy enough that visitor just gets attracted and view it thoroughly, well now you can add this awesome animated notice banner on your blog and change its announcement line according to your preference. Well its just a work of CSS so we are not using any kind of JavaScript for making your blog slow, so it will fire up instantly and looks awesome as I have used my personal website's styling to it.

So now if you were waiting to add some kind of widget like this then its your time, just check below steps and add it to your blog, enjoy.

  1. Open Blogger > Layout > Add Gadget.
  2. Now choose HTML/JavaScript gadget and add below code into it.

    <style type="text/css">div.notice-banner{_position:absolute;position:fixed;text-align:center;z-index:99000}div.notice-banner-inner{-moz-transform:rotate(-45deg);-moz-transform-origin:50% 0;-ms-transform:rotate(-45deg);-ms-transform-origin:50% 0;-o-transform:rotate(-45deg);-o-transform-origin:50% 0;-webkit-transform:rotate(-45deg);-webkit-transform-origin:50% 0;_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight-52+"px") );background: #f6f6f6;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));border:1px solid #aaa;color:#fff;font-family:'trebuchet ms',verdana,arial,sans-serif;font-size:16px;height:30px;left:-190px;opacity:0.9;padding:10px;text-align:center;top:110px;transform:rotate(-45deg);transform-origin:50% 0;width:600px;-moz-box-shadow: 0 5px 5px -5px #999;-webkit-box-shadow: 0 5px 5px -5px #999;box-shadow: 0 5px 5px -5px #999;}.notice-banner-text{-moz-border-radius:8px;-webkit-border-radius:8px;background-color:#fff;border:1px solid #aaa;border-radius:8px;height:28px;margin-right:15px;padding-left:10px;padding-right:10px;width:290px}</style><div class="notice-banner notice-banner-inner"><center><div class='notice-banner-text'><marquee onmouseover="this.stop();" onmouseout="this.start();" style="line-height:28px;color:#000;">Your Message Here :)</marquee></div></center></div>
  3. You will need to change the text according to your notice, so just change the line in Blue color above, and you can even add the link to it normally.
  4. That's it now just Save your gadget and refresh your blog to see it working.
  5. If you need to change some styling you need to have some basic CSS knowledge, so have fun and enjoy this widget.
Notice banner working live demo :)
Tags: