I was impressed when I first saw this jQuery plugin run in Mashable.com (but now I think Mashable is not using this anymore) and I never thought that I can implement this on my blogger a.k.a. blogspot blog until I read Divya Sai post on BloggerStop.net. prettySociable make sharing a lot more fun, by dragging and dropping objects. You can see this working in one of my blogs, click here. Try dragging some of the post images and you'll see icons where you can share the post. I'm sure this plugin can attract your readers to share your blog posts.How to Add prettySociable on your Blog?
Before we start please backup your template first. We will follow Divya Sai instruction for this tutorial. 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-->
<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-->
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-->
<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-reviews.blogspot.com" rel="prettysociable">Link To Google</a>
and a linked image with this hack will look like this:
<a href="http://www-reviews.blogspot.com" rel="prettysociable"><img src="http://www-reviews.blogspot.com/images/sample.jpg" /></a>
Special Thanks to Divya Sai and No-Margin-For-Errors
