January 13, 2010

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

28 comments:

Beben said...

your demo where is it ? on orange hot ?
hmmm...its a high style (professional) hack :X

Divya Sai said...

Yeah thats the demo on a Blogger blog.
Thanks for the kind feedback Beben :)

visit lists2day.blogspot.com said...

Sorry not related. Big Favor please.

Can you take a look at my site http://lists2day.blogspot.com and see why there's a thick dark gray line before my footer? I tried to set all borders to zero and white but it still shows.

I guess templates are made that way. But is there a way that I can get rid of it? Thanks!

Danoxs said...

Hi Divya.. I haven't even read anything of the post, but wanted to tell you something weird..

Someone send/sent me a e-mail saying he wanted a link exchange, but the weird thing is that he said I was the owner of Bloggerstop...

Take a look:

http://www.imagengratis.org/images/wtfdmwv9e.png

Just checked and there is no link to your web :-/

You may want to check it out, so take the time to read, and give me (If you want), any mail you may want to send you that weird thing xD

Now, time to read the post.. :))

Divya Sai said...

Hey Daniel, that was really kinda weird. Anyways thanks for passing the information :)
It's alright, I don't have to reply to that mail, you may delete it if you want.

Truthseeker said...

hi
wonderful post and hack.
i have appyled the drag and show pagenr hack.
oly the pahe nr. hack shows and that is kind of od looking to. it only shows 2 pages. www.desiarchive.blogspot.com)
can u take a look and tell wats wrong. have done step to step as u haven showen

Sai @ Blogger Widgets said...

@TruthSeeker

In the pagination hack, you have not edited the no. of posts to be shown in the next page (by deafult it is set at 10). You have total 12 posts, 2 posts on page 1 (homepage) and so in the next page (page-2) other 10 posts are being shown. If you want to have more pages in the pagination hack, then set the number to 2/3.

And to apply this "Drag to Share" hack to your images, you have to edit your previous posts and add that rel="prettysociable" attribute to your images.

PLaYeR said...

You have copied this stuff from the bellow link

http://iblogerz.blogspot.com/2009/12/drag-to-share-social-bookmarking.html

Published Date 12/2009

better Give Some Credits To Author

Divya Sai said...

I Have downloaded, modified and used the files from "no margin for errors", I Have linked to them twice in the post and clearly mentioned them as the authors.
You can check the javascript file for the editing I Have done (pictures hosted to my personal account.)

AND FOR YOUR KIND INFORMATION YOU HAVE NOT CREDITED THE ACTUAL AUTHOR OF THID WIDGET (i.e no margin for errors), WHICH IS A VIOLATION OF THEIR COPYRIGHTS, which I'm sure you wouldn't even have read before publishing your post.

Divya Sai said...

@Player (a.k.a. iblogerz.blogspot.com)

Not only have you published that "drag to share" post without giving credits to the author, you have also published the article "Popular posts widget - new and working" COPIED ENTIRELY from BloggerStop.net without giving an active link to me !!!
Previously I was like this :-L
Now I'm x(

PLaYeR said...

Check Your mail

PLaYeR said...

Ok . I understand what you are trying to say.
it was my mistake that i argued with you without knowing the truth. and i apologize for it. sorry For that

Manuel said...

Hi Divya,

Excellent write up, and it looks awesome in the demo. But somehow it is not working for me. I tried it in one of my posts in my blog. I am using the attribute "prettysociable" along with other attributes like imageanchor="1" style="margin-left, 1em, margin-right, 1em.
Is it OK? Any idea why it is not working?? Any help will be much appreciated. Thank you

Manuel Jose

Divya Sai said...

@Manue,

I just checked your blog, but couldn't find the code in it. Leave the code as it is, and let me check it for errors.

Manuel said...

@Divya

Oops, sorry about that. Since it was not working I had removed all the code. Now I have once again put the code in my blog. And I had put the "prettysociable" attribute tags in pictures of this particular post.
http://techdrivein.blogspot.com/2010/01/5-multimedia-apps-for-ubuntu-you-cant.html

I guess you can check it now. And thank you for your really quick response too. Really appreciate it :-)

Divya Sai said...

Hi Manuel,

I have checked your blog, coding is perfect.
The problem is jquery.com has updated the jquery-file to 1.4 from 1.3, a week back.

Anyways thanks to you, I have updated the post with a new link. copy and use the new code. It'll definitely work this time.

Carezza said...

i have done as mentioned but its not working for me either

Manuel said...

Hi Divya,

Once again, thank you for your help and support. I have updated all the code with the new ones you have mentioned. But still no results. Is this has to do anything with the template I am using? I am not sure.

Thank you :-)

Mark said...

This one is Super! Tnx so much Divya.

I was wondering if I could post your tutorial on my blog.? I think most of my readers will love your post.

*All the credits will go to you and to no margins margins for error

Divya Sai said...

Yes please share the article with your readers Mark...

@Manuel,
I have checked the code on your blog, it's all correct. Donno whats the problem is :-/

Manuel said...

@Divya

That is fine, may be I will try it some other time. Thank you for the kind of support you gave. Excellent blog by the way, keep up the good work :-)

mcc said...

Is there a way to add the rel="prettysociable" to the post title link from the main Blogger page?

www.winstonsbrand.com

Divya Sai said...

@mcc

Yes that's possible, but as this will be template-specific code, so I didn't mention it in the post.
If you want it in any blog of yours, then send me your template from the contact page.

TechPinas said...

Thanks!

This is a very good widget.

I just wanna ask, how do you apply this to all images within post without doing step #2 for each and every image?

Sai @ Blogger Wisgets said...

@TechPinas,

That's a nice suggestion..but sorry I can't help you in that, may be that requires some changes in the javascript file.

Hsi Pao Jewelry Art | 喜寶珠寶 said...
This comment has been removed by the author.
S@uR@Bh..ThE UlTiMaTe RoCkEr!! said...

hi i tried this a lot but didnt work..can you please tell where excatly we have to paste the codes ??

or any gadget made for this in blogspot bloggers? plz help me soon!
thanks

Sai - BloggerStop.Net said...

In which of your blogs, are you trying this?

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

Allowed HTML tags: <b>, <i> and <a>

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy