Wednesday 6 January 2010

Make your widgets dragable - Feel Like MAC ♥


Drag and Drop Your widgets

No, this is not a  MAC's  review nor it is Upcoming Notebook promotion . This is a blogger trick which will let you and your readers to give MAC like effect to your blog.This will let you to drag and grop your widget box from one place to another.You just have to choose widgets name which you want to make dragable.


Lets see a    to see how its look like.Try To Drag and drop widgets from sidebar to any position on the screen
How to Do that for My blog ..??
Copy Below given code which include three JavaScript and paste it just above your</body>
Do not forgot to Expand your template.
Hint : Use your browser search( Ctrl + F ) to find </body>
Do not just copy Blindly read the full post first.

<script src='http://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.1");
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".widget.HTML").draggable();
$(".widget.Label").draggable();
$(".widget.BlogArchive").draggable();

});
</script>

Let me explain you about the code:
1st javascript block is to recieve Ajax library from google server.
2nd javascript block is to recieve Jquery library from google server.
3rd javascript ,i am specifing all widgets which i want to make dragable by calling dragable function of Jquery itself .

How to select widgets :
Selecting your widgets is easy,you have to get the name of your widgets as defined in your template code.

$(".widget.HTML").draggable(); will make your all HTML widgets dragable.
$(".widget.Label").draggable(); will make your Label widget dragable.
$(".widget.BlogArchive").draggable(); will make your BlogArchive widget dragable.

 What if you want your BlogArchive to remain stationary , just delete this line
$(".widget.BlogArchive").draggable();
from the above codeand you are done.

Do not forgot to save your template

I have tried to make this tutorial as explainatory as possible ,if you still feel any problem or want to  add your thoughts to it.Let me know through your comments will LUV to hear you.

No comments:

Post a Comment