How To Create jQuery Draggable Image | Blogger Tips

Welcome to Jquery world in Blogger. In the series of Jquery tips, in this post Draggable Image is explained. You can easily drag the image from one place to another or you can rearrange the images as your preference. Lets look how to add Jquery Draggagle Images on Blogger.


1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Scroll down to where you see </head>tag:
3.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>



4.Now Click on "Save Templates"


5.Now go to Layout-->page elements and Click on 'Add a Gadget', then select Html/JavaScript option. Or you can see this tutorial on How to add Gadgets step by step. Now add the following codes. Please change red colored codes with your preferable codes.

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

No Comment Yet Post a Comment

Leave a Comment