Add Mashable Like "Drag To Share" To Blogger

Add Mashable Like "Drag To Share" To Blogger

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.

"Drag to Share" is a project by No Margin For Errors, check out the demo on their project-page.

If you are impressed with the widget, you can add the same feature Drag to Share like Mashable with this tutorial.

How To Add Mashable Like Drag To Share To Blogger? 

1. Login To Your Blogger And Go To Template Section.
2. Back up your existing Template before making any changes!
3. Make sure to check the "Expand Widget Templates" box.
4. Search for the </head> tag.
5. Add the following code just before the </head> tag.

<!--Drag To Share Start-->
<link rel="stylesheet" href="http://beautifulbloggerwidgets.googlecode.com/files/prettySociable.css" type="text/css" media="screen" charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://beautifulbloggerwidgets.googlecode.com/files/jquery.prettySociable.js" type="text/javascript" charset="utf-8"></script>
<!--Drag To Share End-->

6. Now find this code in the template:

</body>

And immediately before it, paste this code:

<!--Drag To Share Start-->
<script type="text/javascript" charset="utf-8">
 $(document).ready(function(){
  $.prettySociable();
 });
</script>
<!--Drag To Share End-->

7. Save Template.

Now whenever you want to apply this hack to any of your images/hyperlinks (links), then add arel="prettysociable" attribute to the "a" tag. (You can edit your previous posts to add this attribute to your images).

For example:

Links:

<a href="http://www.google.com/" rel="prettysociable">Link To Google</a>

Images:

<a href="http://www.google.com/" rel="prettysociable"><img src="http://www.google.co.in/intl/en_com/images/logo_plain.png" /></a>

If the Mashable Like "Drag To Share" To Blogger is not working. Just follow this simple step:

1. Search for the </head> tag and delete this line on your template:

<link rel="stylesheet" href="http://beautifulbloggerwidgets.googlecode.com/files/prettySociable.css" type="text/css" media="screen" charset="utf-8" />

2. Add the following code just before the </head> tag.

<style type='text/css'>
 html,body{height:100%;}#ps_hover{left:0;top:0;position:absolute;z-index:1000;}.ps_hd{background: url(http://beautifulbloggerwidgets.googlecode.com/files/tr.png) top right no-repeat;padding:0 8px 0 0;}.ps_hd .ps_c{background: url(http://beautifulbloggerwidgets.googlecode.com/files/tl.png) top left no-repeat;}.ps_ft{background: url(http://beautifulbloggerwidgets.googlecode.com/files/br.png) top right no-repeat;padding:0 8px 0 0;}.ps_ft .ps_c{background: url(http://beautifulbloggerwidgets.googlecode.com/files/bl.png) top left no-repeat;}.ps_bd{background: url(http://beautifulbloggerwidgets.googlecode.com/files/cr.png) top right repeat-y;padding:0 8px 0 0;}.ps_bd .ps_c{background: url(http://beautifulbloggerwidgets.googlecode.com/files/cl.png) top left repeat-y;padding:0 0 0 8px;}.ps_bd .ps_s{background:#fff;}.ps_hd,.ps_bd,.ps_ft{position: relative;z-index:1000;}.ps_hd .ps_c,.ps_ft .ps_c{font-size:1px;height:8px;}#ps_title{background: url(http://beautifulbloggerwidgets.googlecode.com/files/tt_r.png) top right no-repeat;padding:0 5px 0 0;color:#fff;font-size:10px;font-weight: normal;left:8px;position:absolute;top:0;z-index:999;}#ps_title .ps_tt_l{background: url(http://beautifulbloggerwidgets.googlecode.com/files/tt_l.png) top left no-repeat;line-height:20px;padding:0 0 0 5px;}#ps_tooltip{font-size:10px;left:0;position:absolute;top:0;width:250px;z-index:1010;}#ps_tooltip p{margin:0;}#ps_tooltip strong{font-size:1.2em;}#ps_websites{left:50%;position:absolute;top:50%;z-index:1005;}#ps_websites .ps_label{color:#fff;display: none;font-size:2em;left:0;position:absolute;top:0;white-space: nowrap;}#ps_websites ul{list-style: none;position: relative;z-index:1010;width:400px;}#ps_websites li{display:block;float: left;margin:0 30px 40px 0;}#ps_websites a{display:block;}#ps_overlay{background:#000;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1005;}
</style>

3. Save your template.

Now you should have a working Mashable Like "Drag To Share" on your blog.
Happy Blogging =) - Leave your Comments and Please Share this widget