animated notice box to blogger

• Buzz
• Twitter
• Facebook
• RSS
• Email

add as friend on facebook follow on twitter

This widget will add a notice box such that it flashes for certain number of times say three times and then, will stay static on the web page until the user wishes to close it. It is something like an alert message which you would have seen in many websites. But, this kind of alert message can be used to increase the subscribers for your blog. If you still haven't got an idea about what I am explaining here, then just look at the screen shot below.

I hope you got an idea about the widget now. If not just visit this blog "My Test Blog" to view the demo of this widget. I will initially explain you how to install this widget in your blog with a general message as shown in the screen shot above. Later, I will provide you the code which I installed in "My Test Blog" that displays a message to the visitor asking him/her to subscribe to the blog. Let us get to our work now.


1. Go to "Design->Edit HTML. Make a backup of your template before modifying the HTML by clicking on the "Download full template" link at the top of the page.
2. Search for the following line in your template. Use "CTRL+F" to fasten your search.

]]></b:skin>

3.Add the following piece of code just below the line mentioned in step 2.

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

4. Save your template. Next, you need to add the "div" section of the code any where in between the body tags of your template. The simplest way to add this code is to use the "HTML/Javascript" plug-in in blogger.
5. To do so, just navigate as follows: Design->Page Elements. Now, click on "Add a Gadget" and select "HTML/Javascript". Paste the following piece of code and hit the Save button. Leave the title section of the widget empty.

<div id="info">
<a class="close" href="#close" style="float: right;"><img border="0" src="http://i48.tinypic.com/3502jif.jpg" /></a>
This Is Your Message .You can change it to Your need. Click on close button on right to exit this box</div>

6. You may drag the widget any where you want. Once you finalize the place, click on save again and view your blog with the "Animated Notice Box" installed.