Home » Blogger Tutorials, Tricks and Hacks » Add an Animated Social Sharing Widget with Hover on 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 ||

Add an Animated Social Sharing Widget with Hover on Blogger

Add an Animated Social Sharing Widget with Hover on Blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

2,050 views

One of the uber-cool features that you can add to your Blogger blog is the animated social sharing widget or what is known as SassyBookmarks. Sidharth Patnaik teaches a simple way on how you can integrate it in your Blogger.

  1. Go to your Blogger Dashboard > Template
  2. Backup your template first before anything else
  3. Find this code </body> in your template
  4. Add code below above or before of above </body>
<!-- Start Social Sharing Widget Sassy Bookmarks HTML (allbloggingtips.com)-->
<div>
</div>
<!-- End Shareaholic Sassy Bookmarks HTML -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type="text/javascript">
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type="text/javascript">
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>
<!-- End Shareaholic Sassy Bookmarks script -->

Check out this cool live DEMO.

Liked It ? Please Share

Comments

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

  1. Now I am going to do my breakfast, once having my breakfast coming
    again to read further news.

  2. Raman kumar says:

    its not working on by site plz give me way to do this.. plz hepl me

  3. Bliss Made says:

    Mine applied very well to my site and it was reall cool 😉
    BUT i didn’t know about the side effects :/

    -The area of the animation circle cannot be used to use the website links.As in if user tries to goto a link at the bottom corner of the page (where the animation circle is) the links in my site around that place DOES NOT WORK. :S

    Any suggesions for this? Its a really nice widget & I felt bad to remove it.. I wish it worked properly..I removed it because uses might get confused because of this.

  4. Bliss Made says:

    Oh i knew about this because just after the animation circle.. the links in my website do work.. and i tried removing the widget and use the link..& its only a side effect of the widget…

  5. das a&o says:

    it doesn’t show up on my page (inserted the whole code just above . what might have went wrong?

    best rgds from germany

  6. Naman Distro says:

    These widget iz not at all working on my page

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