CSS3 Zoom Out Social Sharing Widget For Blogger Blog – Blogs Daddy


Subscribe To Our Regular Email Updates

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:
  • Save Your Template and Is Done

<data:post.body/>

<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=’http://2.bp.blogspot.com/-lRae8bdMpuA/TzuLrnycXaI/AAAAAAAACQE/YVYUjfs7dm8/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>

Subscribe via Email





Note:Remember Notes: Author – FacebookGoogle PlusCSS3JQueryHand Drawn Social Media Buttons For Your Blogger BlogAdd The Google +1 Button And Google+ Badge To Blogger BlogsAbushaleh

Subscribe
Subscribe