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]

Credits: No Margin For Errors

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Google Facebook Twitter More

• Digg
• Linkedin
• Stumbleupon
• Delicious
• Tumblr
• BufferApp
• Pocket
• Evernote

Related Posts

• New Lines Error In Blogger Post-EditorA quick update on an error reported by many Bloggers in the Blogger post-editor: In the recently updated Blogger post-
• Spam Comments Moderation In Blogger/BlogSpot BlogsBeing closely associated with Google, Blogger has always been focusing on improving the SEO attributes of its blogs. Wo
• 6 Tips to Get People to Join Your New ForumA guest post by Tom Walker, editor and contributor to the CreativeCloud blog. A Bloggers Community © Baratunde Start
• Three Quick Tips for Attracting Traffic to Your BlogA guest post contributed by Katheryn Rivas, who regularly writes for OnlineUniversities.com Search engine optimization