How To Add jQuery Slide up and Slide down Effect to Blogger

Posted by Lasantha Bandara on May 16th, 2009 File Under : java script, jquery0 Comment

Follow the easy steps below to add Slide up and Slide down Effect to your blog.

1.Log in to your dashboard--> layout- ->Page Elements

2.Click on Add a Gadget on the sidebar.

3.Select HTML/Javascript and add the javascript code given below and click save.

<script type="text/javascript">
$(document).ready(function(){
$('#butSlide').click(function () {
$('#divSlide').slideToggle("slow");
});
});
</script>

<button id="butSlide">Slide up/down</button>
<br />
<div style="width:350px;height:80px; border: solid 1px black;background-color:LightGrey;text-align:center;" id="divSlide">Insert your content here</div>

Note : Remember to replace 'Insert Your Content Here' with your real content.

You can change the value of height,width,background color,.....

File Under : java script, jquery

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.