Add An Animated Notice Box To Blogger

Save on del.icio.us Add to Technorati Digg this article! Add it on Reddit! 19 Comments

Today, I would like to present you an interesting widget, "The Animated Notice Box". 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.

As I said earlier, you may download this text document "CODE I USED", which consists of the code I used in "My Test Blog"(Demo which you viewed). You may use the code in document for your blogs too. But, please do change the links and the title of your blog in the code (self-explanatory). Else, you will help me increase my subscribers count by displaying the box in your template:)

Enjoyed the article?

Subscribe to this Blog via Email:

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Save on del.icio.us
Add to Technorati
Digg this article!
Add it on Reddit!
Leave a comment

Other Recommended Posts

• Blogging Tips