Home » Blogger Tutorials, Tricks and Hacks » Blogger Seo Tutorials / Tricks » OS X Styled Sharing Dock Widget, New sharing Widget For Blogger.

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

OS X Styled Sharing Dock Widget, New sharing Widget For Blogger.

OS X Styled Sharing Dock Widget, New sharing Widget For Blogger.

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

18,415 views

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.

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.
How To Add It To Your Blogger Blog.

Please go to your blogger account, and navigate to, dashboard >> layout >> , and on the elements pages, please click Add a gadget
then choose HTML/JavaScript,a new window will be opened. leave the title empty. and paste the following code 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(http://2.bp.blogspot.com/_JwD5r652h00/S9t-pmEipgI/AAAAAAAAAVs/iDkLHdkeSNk/widget-bg-allblogtools-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>

And now click Save then check you blog,

Instruction, Demo And Credits.

Please make sure to copy all the code with out missing 1 letter to see the widget working correctly in your blog.
sorry because the code is very long but in this way, it’s a one step process instead of three steps.
To see a demo for this widget please click here.
Credits: zurb.com | tutsplus.com | AddThis.com

Liked It ? Please Share

Comments

28 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. maishee says:

    wow, this rockS!!!

  2. Andri says:

    Thanks, man! It’s awesome!

  3. Beben says:

    ugh!!! Kindly its not like lightbox, if like it that can be more ROCK
    its cool…thanks

  4. Cracksevens says:

    nice tutorial..!!!!thanks

  5. Cracksevens says:

    I’ve installed this..But,i does not work BEFORE that,i’ve save a copy of my template.But,when i recover my old tempalte,the widget still appear..Please help me

  6. maishee21 says:

    thanks, i would love to have it on the sidebar, can you do it?

    • Max says:

      hi maishee21, this is possible but it needs some changes in alot of menu codes and files,
      i’m working on another version that will appear on the sidebar, you can wait for it please.

      • maishee says:

        thank you for the your quick reply, i’ll keep on visiting this site for updates, thanks

  7. Downloadtaky says:

    It doesn’t work properly, icons are moving when mouse pointer is a lot of pix above them not ON them… how ca I fix it? (also in your demo it works like this…)

    • Max says:

      hi, sorry for this, the movement is the only problem but the icons will keep working on all your page.

  8. bdinamo says:

    güzel eklenti bende blogumda paylaşıyorum tesekküler.

  9. kumar says:

    nice tutorial thanks max…

  10. thanks this rocks :)

    blog.narindersharma.co.uk

  11. John says:

    Wowwww It’s cool

    Thank.

  12. Mich says:

    tks, its really cool!…

  13. heyya! thanks a lot!!
    this really great!!
    awesome

  14. herigugun says:

    it’s cool man!!
    i very like this,,

  15. Lisa says:

    Awesome! Thanks!!

  16. KFunC says:

    Awesome!! but, can you change the postition to left/right side?

  17. Abhishek says:

    Its very cool , yet I find Icons moving a lot before the mouse pointer is above it. It would look a more nice if it gets fixed. I’ll be waiting for the fixed code. Thanks

  18. ieha says:

    awesome!!!. *

  19. fR00s says:

    thnak you >> rally i love it

  20. LibyanRose says:

    I like it my friend .. thank you for boosting my blog http://www.musicspirits.blogspot.com
    Keep the good work!

  21. Ifham khan says:

    Very nice widget thanks max

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here