How to Install OS X Styled Social Sharing Dock widget To Blogspot 0

| | , , ,
















Hi friends i am going to telling about best widget for blogger who want to add this gadget Alot of people keep asking me about a new social bookmarking and sharing widgets,
Since I love jQuery, i thought about try to customize a new sharing widget specially for blogger that using the new jQuery features, and If you like the OS X dock, you’ll love this widget.
this new widget in originally released by AddThis.com , and i customized it to be able easily used with blogger.Now how to add this read full story about it.

Widget Features.

* easy to install, only 1 step.
* Support all social services around the world, more that 300 social bookmarking site.
* Amazing new style with dock menu look.


Now Follow simple step to add this gadget on your blogger.....


* First go to your blogger Dashboard.

* Click on Design Tab now your are here-  Page element.

* Now click on add new gadget. and click HTML/JAVASCRIPT in given list.

* When open new window with blank box copy below code and paste it on blank window.

<style type="text/css">
  #sharedock { position: fixed; bottom: 0; left: 0; width: 100%; height: 90px; z-index: 999; }
  #dock { position: relative; bottom: 0; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; }
  .dock-container { position: relative; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSJ3WtTXn1gGs89BjP2WCqOnu_Qf2VIwQoqZZmvIw4s9P6X9mDxzSfQEjFNTbBrefHiiSdDM8pfaU3M70oN00zvIFpKh3fuhsDhGmGIr-pCCJ_6RGp3LYpCqUXB34ViCpN3dYKdFe6_RA/) no-repeat bottom center; height: 50px; padding: 20px 0 20px 0; }
  .dock-container .custom_images a { display: block;  position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; cursor: pointer; }
  .dock-container .custom_images span { background: rgba(0,0,0,.75); display: none; padding: 2px 8px; margin-left: 17px; font-size: 11px; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
  .dock-container .custom_images img { border: 0; margin: 5px 0px 10px 0px; width: 100%; }
  </style>

<div id="sharedock">
  <div id="dock">
  <div class="dock-container">

<div class="addthis_toolbox"> 

 <div class="custom_images">

 <a class="addthis_button_facebook"><span>Facebook</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_facebook.png" alt="Share to Facebook" /></a>
  <a class="addthis_button_twitter"><span>Twitter</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_twitter.png" alt="Share to Twitter" /></a>
<a class="addthis_button_myspace"><span>MySpace</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_myspace.png" alt="Share to MySpace" /></a>
<a class="addthis_button_stumbleupon"><span>Stumble</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_stumbleupon.png" alt="Stumble It" /></a>
<a class="addthis_button_reddit"><span>Reddit</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_reddit.png" alt="Share to Reddit" /></a>
<a class="addthis_button_delicious"><span>Delicious</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_delicious.png" alt="Share to Delicious" /></a>
  <a class="addthis_button_more"><span>More...</span><img src="http://addthis.com/cms-content/images/gallery/addthis_64.png" alt="More..." /></a>
  </div>
  </div> 
  </div>
  </div>
  </div>

  <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://addthis.com//cms-content/images/gallery/fisheye-iutil.min.js"></script>
  <script type="text/javascript">
  $(function () { 
  // Dock initialize
  $('#dock').Fisheye(
  {
  maxWidth: 30,
  items: 'a',
  itemsText: 'span',
  container: '.dock-container',
  itemWidth: 50,
  proximity: 60,
  alignment : 'left',
  valign: 'bottom',
  halign : 'center'
  }
  );
  });
  </script>

* And click save button and your are done ok comment below how it is ????
 

StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: How to Install OS X Styled Social Sharing Dock widget To Blogspot ~ Twitter FaceBook

0 Responses So Far:

Categories

Select Your Categories
Access Denied Adsense Adspace Alexa Rank Animation Avatars Background Backlink Baidu Beginner Guide Best Gadget Birthday Emoticons Blogger Templates Bookmarking Site Bookmarks Brands Avatars Browser Button Buttons CSS CSS3 Menu Change Template Coding style Comments Computer tips Content Slider Cookies Cursor Cute Emoticons Design Domain parking Domain vs Debit Email FEED Favicon Featured content Flash Footer Forum Code Converter Free Domain Free Internet GoDaddy Google Gtalk Emoticons HTML HTML Color Generator HTML to JavaScript converter Header Html Encoder Image Image Gallery Internet Internet Business Java Script Jquery Labels Lable Link Popularity META TAG Magic Html Encoder Magic Zoom Marquee Menu Generator Meta Tags Mobile Reviews Money Tips MooTools Navigation Menu Page Locker Page Navigation Page Peel Photoshop Popup Box Post Print And PDF Related post SEO TIPS Search box Sitemap Social Media Stop Copy TWITTER Text Boxes Text effect Title Tutorial URL Shorten Web Directories Widget Wordpress Yahoo Youtube