Add Mashable Like "Drag To Share" To Blogger Blogs

You would have observed a unique bookmarking tool being used at Mashable: "Drag To Share". In 'Drag To Share', when you hover your mouse on some links (usually images), a message is displayed is to drag and share the page.







Script in Action - LIVE DEMOS:

• Check out "Drag and Share" on Mashable (drag the image in the post)
• "Drag to Share" is a project by No Margin For Errors, check out the demo on their project-page.
• Now see a working demo on a Blogger blog: Hot Orange Template [Drag the image of the orange to see the sharing options]

If you are impressed with the widget, then Add "Drag To Share" to your Blogger blog:




STEP #1



Log in to Blogger, go to Layout -> Edit HTML



Now find this code:

</head>

And immediately BEFORE/ABOVE 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://bloggerstop.net-->

Now find this code in the template:

</body>

And immediately ABOVE/BEFORE it, paste this code:

<!--DRAG-TO-SHARE-STARTS-->

<script charset='utf-8' type='text/javascript'>

$.prettySociable();

</script>

<!--DRAG-TO-SHARE-STOPS-->

Save The Template.



STEP #2



IMPORTANT: 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>

STEP #3




Download and save the files used in this tutorial as a backup on your PC [Download Link]