Animated Notice Box Blogger and Blogspot Widget and Plugin - My Blogger Market

Breaking

Post Top Ad

Responsive Ads Here

Post Top Ad

Responsive Ads Here

5/14/2010

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/AVvXsEiWH-L1Hbnzw1DNji2JHJgvmk8yQidbBMpDbUf3zuK76w5a0ZAWJzRg84Ugc9I-6Qyu2J6c1EFpqGFJ7oRsDT27D8m4DwR5WmK_IcMBeRgG-TUTnk-Lwnr3nszYPyzKAhA1YuIyqUgXic8Z/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



No comments:

Post a Comment

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there.

Post Top Ad

Responsive Ads Here