Drag To Share | Cool Social Widget For Blogger[ Easy Install] Like Mashable Using jQuery

You may have seen on popular social news site Mashable,It uses a very cool Widget to distribute its post to social website.The user simply drags an image in the post and puts the image into a Social website icon.Here an easy tutorial blogger blogs.View its working on the Demo page given below.Just Drag the image.

View Demo

Please Download Scripts And Upload in Your Own Server Then use Direct Links to files In Below Code.
Where To Upload These Scripts ?Click Here To Know :)

• 
  Download Scripts!

Installation :

Step 1:

Java Scripts + CSS

Login your BLOGGER account And click on Layout in the sub menu click then Edit HTML now Check Expand Widget Templates

Now Find ]]></b:skin> Then Replace it with Below Code

]]></b:skin>

<script src='http://bloggerplugnplay-files.bravehost.com/jquery-1.3.2.min.js' type='text/javascript'/>


<script src='http://bloggerplugnplay-files.bravehost.com/jquery-ui-1.7.2.custom.min.js' type='text/javascript'/>



<style type='text/css'>


#content { width:100%; }
#content img { float:; margin-left:0px; }

.ui-draggable { cursor:move; }
#tip { position:absolute; display:none; height:25px; padding:9px 9px 0px; color:#fff; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; background:#000; background:rgba(0,0,0,.5); }
#tip .arrow { width:0; height:0; line-height:0; border-right:8px solid #000; border-right:8px solid rgba(0,0,0,.5); border-top:8px solid transparent; border-bottom:8px solid transparent; position:absolute; left:-8px; top:9px; }

#targets { display:none; list-style-type:none; position:fixed; top:10px; z-index:99999; }
#targets li { float:left; margin-right:20px; display:block; width:60px; height:60px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5s7AffZYjSfWRdxWkqG1jG6WAgKQFLa5mmqF1StWf98Nu5MudhHOVD5zftU82we-wsZrA6xIZEpTFoBFEoFOkUR0ic65Ef9BrG7ATIptU54m2WFX7nkeRb74vSUn_7qFUHQhUxE4sGHs/s400/iconSprite.png) no-repeat 0 0; position:relative; }
#targets li#delicious { background-position:0 -60px; }
#targets li#facebook { background-position:0 -120px; }
#targets li span { display:block; position:absolute; bottom:-40px; white-space:pre; color:#fff; }

#overlay { background-color:#000; position:fixed; top:0; left:0; width:100%; height:100%; z-index:99997; }
#helper { background-color:#c2c2c2; position:absolute; height:35px; padding:15px 70px 0 20px; color:#fff; font-family:Verdana; font-weight:bold; font-size:18px; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; border:3px solid #7d7d7d; }
#thumb { width:50px; height:50px; position:absolute; right:0; top:0; border-left:3px solid #7d7d7d; }

.share { font-weight:bold; position:absolute; font-size:14px; font-family:Verdana; margin-left:-38px; }


</style>

Then Click Save!


Step 2:

HTML(1)

These code will show the targets 1.e the twitter, facebook and delicious icon on image drag.

click on Layout in the sub menu click PAGE ELEMENT Click Add a GADGET select HTML/JAVA paste below code in it and Click SAVE

<ul id="targets">
<li id="twitter"><a href="http://twitter.com"><!-- --></a></li>
<li id="delicious"><a href="http://delicious.com"><!-- --></a></li>
<li id="facebook"><a href="http://www.facebook.com"><!-- --></a></li>
</ul>


<span style="font-size:4px;"><a href="http://bloggerplugnplay.blogspot.com/" target="_blank">Plug it</a></span>

Step 3:
HTML(2)


The Power Tag <div id="content"> Images code here </div>

The images in Between the Above Tag Will be Activated and can be used to share

To apply on all images o your blog follow step

Step 4:
In your blogger Account Click Layout then Edit HTML now Check Expand Widget Templates

Find <data:post.body/> And Replace it With Below code

<div id="content"> <data:post.body/> </div>

Then Click Save Template !

Credits :Dan Wellman converted for Blogger by Blogger plug n play