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!|
|
 |
blog comments powered by Disqus
