CSS3 Zoom Out Social Sharing Widget For Blogger Blog

When you need more visitors for your blog, nothing does a better widget/plugin than share buttons. Today blogger are getting too much traffic from Facebook, Twitter or Google Plus etc.In this tutorial I am sharing a different way to implement social sharing buttons on your blog: a circle that expands revealing a bunch of share buttons on hover.

It is pure CSS3 coding without use of JQuery or any other Javascript code.It loads fast and easy to customize.

Recommend For You: Hand Drawn Social Media Buttons For Your Blogger Blog

How To Install This Widget To Your Blogger Blog?

• Go To Blogger Dashboard > Template
• Backup Your Template
• Edit HTML > Proceed > Tick Expand Widget Templates
• Press Ctrl+F & Search For:

<data:post.body/>

Note: This code may have 2-3 occurrences in your template, but you need to just concentrate on the first occurrence. Just below it paste the following code.

Read Also: Add The Google +1 Button And Google+ Badge To Blogger Blogs

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

#buttons {

    position: relative;

    border: 10px solid #ddd;

    border-radius: 100px;

    width: 90px;

    margin: 30px;

    box-shadow: 0px 0px 10px #ddd, 0px 10px 0px #aaa;

    height: 80px;

    -webkit-transition: all 0.2s ease-in;

    -moz-transition: all 0.2s ease-in;

    -o-transition: all 0.2s ease-in;

    -ms-transition: all 0.2s ease-in;

}

#buttons:hover {

    border: 15px solid #ddd;

    width: 180px;

    height: 160px;

    opacity: 1;

    top: -40px;

}

#buttons div {

    position: absolute;

    opacity: 0;

    min-width: 100px;

    top: 15px;

    -webkit-transition: all 0.2s ease-in;

    -moz-transition: all 0.2s ease-in;

    -o-transition: all 0.2s ease-in;

    -ms-transition: all 0.2s ease-in;

}

#buttons:hover div {

    opacity: 1;

}

#buttons .text {

    z-index: 5000;

    top: 25px;

    opacity: 1;

    left: -5px;

    text-shadow: 0 3px 0px rgba(255,255,255,1);

    font-size: 26px;

    font-weight: bold;

}

#buttons:hover .text {

    top: 60px;

    left: 35px;

    opacity: 0;

}

#buttons:hover div:nth-of-type(2) {

    top: 5px;

    left: -20px;

}

#buttons:hover div:nth-of-type(3) {

    top: 5px;

    left: 120px;

}

#buttons:hover div:nth-of-type(4) {

    top: 65px;

    left: -68px;

}

#buttons:hover div:nth-of-type(5) {

    top: 48px;

    left: 155px;

}

#buttons:hover div:nth-of-type(6) {

    top: 125px;

    left: -45px;

}

#buttons:hover div:nth-of-type(7) {

    top: 105px;

    left: 125px;

}

.fb_edge_widget_with_comment iframe {

    width: 65px !important;

}

</style>

<script type='text/javascript'>

(function() {

     var li = document.createElement(&#39;script&#39;); li.type = &#39;text/javascript&#39;; li.async = true;

     li.src = window.location.protocol + &#39;//platform.stumbleupon.com/1/widgets.js&#39;;

     var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(li, s);

})();

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);

(function() {

  var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;

  po.src = &#39;https://apis.google.com/js/plusone.js&#39;;

  var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);

})();

(function(d, s, id) {

  var js, fjs = d.getElementsByTagName(s)[0];

  if (d.getElementById(id)) return;

  js = d.createElement(s); js.id = id;

  js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;

  fjs.parentNode.insertBefore(js, fjs);

}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));

function run_pinmarklet1() {

  var e=document.createElement(&#39;script&#39;);

  e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);

  e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);

  e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39;+Math.random()*99999999);

  document.body.appendChild(e);

}

</script>

<center><div id='buttons'>

    <div class='text'>SHARE</div>

    <div class='holder twitter'>

        <a class='twitter-share-button' data-size='medium' data-via='inserthtml' href='https://twitter.com/share'>Tweet</a>

    </div>

    <div class='holder pinterest'>

        <a href='javascript:void(run_pinmarklet1())'><img alt='Pin it' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9KVEgttWcr_bzbR5RWLsOeG68S1OLX87TAHoa6Xw0ij7_-rHFKII80VvCj9olCMuWgVj26AUJhkMrUFaqgvjj2ItUcnPqLRNJB-mJDJBhDTIsqd19Vo6P8uCU3HI_Yy6M1qQ3aLzLN2Ce/s1600/pinmask2.png' style='margin:0; padding:0; border:none;'/></a>

    </div>

    <div class='holder stumbleupon'>

        <su:badge layout='1'/>

    </div>

    <div class='holder gplus'>

        <div class='g-plusone'/>

    </div>

    <div class='holder reddit'>

        <script src='http://www.reddit.com/static/button/button1.js' type='text/javascript'/>

    </div>

    <div class='holder facebook'>

        <div class='fb-like' data-send='false' data-show-faces='false' layout='button_count'/>

        <div id='fb-root'/>

    </div>

</div></center>

</b:if>

• Save Your Template and Is Done

Remember Notes: Please remove your older Social Sharing Plugin and all of its scripts for better load time.

Credit goes to Abushaleh for making this widget.If you need our help ask via comments.Happy blogging and Stay Blessed.

Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.