Nov 14, 2012

Easy add Notice,announcement Banner with flashing

Hi all users today i am with very useful and beautiful Notice or announcement Banner code for blogger,you can try this Notice bar code with WordPress or with html sites also..

How to add Notice,announcement Banner to Blogger

Follow below steps to add this Notice bar.
  • Loing in to blogger >> then go to Layout
  • Click on  "Add a Gadget" button and Choose "HTML/JavaScript"
  • then leave the "Title" blank and put the below code in "content" box and Save it
<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>
YOUR MSG HERE
</center></div>

Replace YOUR MSG HERE with your Msg
Now done Comment if any problem or Question ..Enjoy..

Subscribe Updates, Its FREE!

2 comments:

  1. Thanks a lot....i have used it...very nice tutorial...check my blog www.paidgoogleplay.blogspot.com to see how i applied it!! :)

    ReplyDelete

 

Copyright @ 2013 EgyTricks.

Designed by Vikash | EgyTricks