How To Create jQuery Draggable Image in blogger

Posted by Lasantha Bandara on August 20th, 2009 File Under : image, jquery0 Comment

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Don't click on "Expand Widget Templates"

3.Scroll down to where you see </head> tag:

4.Copy below code and paste it just before the </head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script src='http://jqueryui.com/latest/ui/ui.core.js' type='text/javascript'/>

<script src='http://jqueryui.com/latest/ui/ui.draggable.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.draggable&quot;).draggable();
});
</script>

5.Now Click on "Save Templates"

6.Now go to Layout-->page elements and Click on 'Add a Gadget'.

7.Now Select 'HTML/Javascript' and add the code given below and click save.

<div class='draggable' id='rssicon'>
<a href='http://bloggertipandtrick.blogspot.com/feeds/posts/default'><img alt='rss' src='http://1.bp.blogspot.com/_ar9PeTUrwMY/SnFmrWLgFmI/AAAAAAAAAtc/lqNaYDZB03Q/rssk.png'/></a>
</div>

Note : Remember to replace blue colour code with your content.

Now you are done.refresh your site.Now you can drag your image.

Demo

File Under : image, 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.