Animated Notice Box Blogger and Blogspot Widget and Plugin



Ever wanted to greet your visitor with something important message or want to have your visitor a look at the most important content of your website. Than a Animated Notice Box blogger widget is the one you are looking for.

Log in To Blogger

Go To Layout --->Page elements

Click on Add Gadget and Select Html/Javascirpt

and Paste the bellow Code in it

<style>

#info{

border: 1px solid;

margin: 10px 0px;

padding:15px 10px 15px 50px;

background-repeat: no-repeat;

background-position: 10px center;

position:relative;

color: #00529B;

background-color: #BDE5F8;

background-image: url('http://i46.tinypic.com/jzf8tk.jpg');

}

</style><script src="http://code.jquery.com/jquery-1.2.3.min.js" type="text/javascript">

</script>



<script type="text/javascript">

$(document).ready(function(){

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

$("#info").animate({left:"+=10px"}).animate({left:"-5000px"});

});

$("#info").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400)

.fadeOut(400).fadeIn(400);

});



</script>

<div id="info">

<a class="close" href="#close" style="float: right;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi0C8_Q9Kdf_siDaYTF31-NlnaIVwz7XubisEmIBckIpDZ1j0-X0xnWapWtnEV_dufcYlksSsXOXzrc1AiJ8MC0ufh4vxk9IFH-rRxtUHOu6Lt5GaQKIGqTYSLqjzCNASl-XUPutBy3-iq/s1600/images.jpg" /></a>

This Is Your Message .You can change it to Your need. Click on close button on right to exit this box

Now click Save Template



7 comments:

  1. Really nice tip !

    Is it possible to customize the box ?

    For exemple to set a custom background image instead of a color ?

    Or a different location on the blog (on top, or left, or else...;)).

    Thanks for this useful blog !

    ReplyDelete
  2. Thanks very much for showing the how-tos for these much needed tools.

    Please consider the questions raised by V_Mambetov above. I was about asking something similar, when I saw his/her comment.

    Thanks for always being there.

    ReplyDelete