Add a Announcement Widget in Your Blog

If you want to give any announcement to your readers on regular time or time by time then you can use this kind of widget this is today we are going to launch with you all, as you know that these kinds of widgets is very useful for our blog so you can easily install it in your blog and easily can access.

Why to use this Widget?

If you want to give any important information to your readers on the home page or on the special post then you can easily use this announcement widget.

Which kinds of Codes we use in it?

This widget is purely made with HTML and CSS so there is no harm to use it i your blog. We also use some line of codes of Javascript and jQuery, but it will not harmful to your blog.

Codes of this Widget

<style>
#announcement{
width: auto;
font:bold 15px Trebuchet MS;
border: 2px solid #FF0000;
border-radius: 20px;
margin: 0 40px 5px 40px;
text-align: center;
padding:15px 10px 15px 70px;
background-repeat: no-repeat;
background-position: 10px center;
position:relative;
color: #FF0000;
background-color: #F9EAD4;
background-image: url('http://cdn3.iconfinder.com/data/icons/humano2/48x48/apps/kblogger.png');
}
</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(){
$("#announcement").remove();
});
$("#announcement").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400)
.fadeOut(400).fadeIn(400);
});
</script>

<div id='announcement'>
<a class='close' href='#close' style='float: right;'><img border='0' src='http://cdn1.iconfinder.com/data/icons/nuvola2/16x16/actions/button_cancel.png'/></a>
<center>
It's a Announcement for All Bloggers that We are Launching a New Giveaway which is worth Rs. 10,000
</center></div>

Make Changes...!

Make some changes according to yourself.

• Write Your message to replace it red color text.
• Change these color codes according to your choice.
• You can also change image by replace this link.