How To Create jQuery Draggable Image in blogger

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRLJeRam38Miv4OBQMPvBaX40vf-OT5hMX00wXws1EbDsZ6H1dsw5PgBcnbHUTVdMwWVM7Q0FBKKMbS7MCmpqX3sdRTPW8vYhWBofWm7cAiCoYAOevVtkYOWS8NyfBGBJGQ6kiOBkBZoU/'/></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