Add Mashable Like "Drag To Share" To Blogger

Add This To Del.icio.us StumbleUpon This Add to Technorati Digg This

Anyone who visited Mashable lately, the popular social news website, might have seen the “drag to share” functionality which appears when hovering an image.You can add the same feature Drag to Share like Mashable with this tutorial.

Login To Blogger Go To > Design > Edit HTML.

and mark the tick box "Expand Widget Templates"

Now find (CTRL+F) this code in the template

</head>

And immediately Before it, paste this code:

<!--DRAG-TO-SHARE-STARTS--><link charset='utf-8' href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/prettysociable.css' media='screen' rel='stylesheet' type='text/css'/><script charset='utf-8' src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jquery-1.3.2.min.js' type='text/javascript'/><!--[if lte IE 6]><script src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/dd_belatedpng.js" type="text/javascript" charset="utf-8"/><![endif]--><script charset='utf-8' src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jquery.prettysociable.js' type='text/javascript'/><!--DRAG-TO-SHARE-STOPS-http://royaltutor.net-->

Now find this code in the template:

</body>

And immediately Before it, paste this code:

<!--DRAG-TO-SHARE-STARTS--><script charset='utf-8' type='text/javascript'>$.prettySociable();</script><!--DRAG-TO-SHARE-STOPS-->

Now click Save Template

Now whenever you want to apply this hack to any of your images/hyperlinks (links), then add a rel="prettysociable" attribute to the "a" tag. (You can edit your previous posts to add this attribute to your images).

For example, a link (hyperlink) with this hack will look like this:

<a href="http://www.google.com/" rel="prettysociable">Link To Google</a>

and a linked image with this hack will look like this:

<a href="http://www.google.com/" rel="prettysociable"><img src="http://www.google.co.in/intl/en_com/images/logo_plain.png" /></a>