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]