Custom Search

Thursday, August 5, 2010

Mac OS style social bookmarking widget for Blogger (Blogspot)

Get new sharing widget especially 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. If you want this tool to add on your blog just follow the steps.

  • Go on Dashboard > Layout / Design and click on Add a Gadget.
    • A new window will be opened. Choose HTML/JavaScript Gadget. Leave title empty and paste the following script in the content area.
      <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/AVvXsEjITcc36638RVbOq6J9G-hPVZs4SD1DWS0JCpxEWXV6rFIML8lbXueT206dynMuxT3uIZ9rUQ8-fLWmeQGlPHqVkE_aSLZiozOWy7sWVT6rZvRUqXMNOKP_fCH_RGVmVChSUXdTw9FAfazy/s1600/widget-bg-ind4u-blogspot-com.gif) 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>
      •  now click on Save and check you blog.

        2 comments:

        letsbuymobile said...

        I read your article and understand it. In your post have many important news. I like your blog.

        Mobile Phone in

        Mindtech said...

        This is extremely beneficial information! This blog is an excellent source of information that I find really useful. Thank you very much for drawing our attention to this!

        Visit DedicatedHosting4u.com! , Cheapest dedicated hosting ,
        Fast dedicated servers

        Post a Comment