loading...

Thursday, September 9, 2010

PrettySociable-Share with social networks by dragging for blogger

I have written a post on prettyphoto which is a clone of lightbox using jquery extension you can have look to it. if you are not.PrettyPhoto For blogger blog.
Today I am going to Tell how to integrate the PrettySociable to blogger blog.Ok what is prettysociable it is project done by No-Margin-For-Errors.Which is jQuery plugin that tries to make sharing fun while being easy to use. the user can drag the items he wants to share onto the website he wants to send it to using prettySociable.Drag Below image and post to share.

PrettySociable-Share with social networks by dragging for blogger


Download the required files from PrettySociable.

Browser support
This plugin has been tested and is known to work in the following browsers
  1. Firefox 2.0+
  2. Safari 3.1.1+
  3. Opera 9+
  4. Internet Explorer 6.0+
How to Integrate this to blogger
Step1
Add this Script and link to the head section for your blogger blog by going to
Design->Edit html
find <head>
Just below it add the following code


 <script src="http://www.no-margin-for-errors.com/wp-content/themes/NMFE/js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>  
 <script src="http://www.no-margin-for-errors.com/wp-content/themes/NMFE/js/jquery.prettySociable.js" type="text/javascript" charset="utf-8"></script>  
 <link rel="stylesheet" href="http://media.no-margin-for-errors.com/wp-content/themes/NMFE/css/prettySociable.css" type="text/css" media="screen" charset="utf-8" />  

you can paste the above code directly to your head if you find any problem or you replace with location with yours.


Step2

Add the below code to blogger blog.You can do this by clicking the add to blogger button don't give any title it just click it and add.



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

Step3


Just add rel=”prettySociable” to the links you want prettySociable applied to.See the example below.

 <a rel="prettySociable" href="#">Default sharing</a>  

For  more details about prettysociable look their documentation.

No comments:

Post a Comment

fuzionpro Headline

fuzionpro