Monday, June 14, 2010
Insert Animated (close-able) Notice Box in Blogger Widget
Posted by Faheem Mustafa
|
Hello Readers:
Have you 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 an Animated Notice Box (close-able) blogger widget is the solution for your problem.
Adding Animated (close-able) Notice Blogger Widget
To Show The Notice Box Above/Below Blogger Post
1: Log-in to your Blogger Account
2: Go to Design > dit HTML
3: Check the check-box "Expand Widget Templates"
4: Press CTRL + F to find <p><data:post.body/></p>
5: Copy the following Code and paste above/below the code to show the notice box above/below the post (Step 4)<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(&39;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="http://i48.tinypic.com/3502jif.jpg" /></a>
This Is Your Message .You can change it to Your need.
</div>
6: Change the Red color Text with your desired Message you want to show your viewers
If you want to show this Animated (close-able) Notice Box in Blogger Widgets
1: Go to Design >Page Elements
2: Click on Add a Gadget and Select HTML?Java Script gadget.
3: Copy the code shown in Scroll box and paste in HTML?Java Script Gadget and ENJOY!If you liked my post then, Leave Your Comments OR Click here to Subscribe to FREE email updates from "Free Software Advisor", so that you do not miss out anything that can be valuable to you and your blog!! |
Subscribe to:
Post Comments (Atom)
No Response to "Insert Animated (close-able) Notice Box in Blogger Widget"
Leave A Reply