إضافة زر المشاركة الإجتماعية لمدونات بلوجر بشكل عائم جميل

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.fixed-button,.share_tool,.share_tool h4{height:50px;width:50px}
.share_tool{position:fixed;bottom:20px;right:20px;z-index:9999}
.fixed-button,.fixed-button li,.share_tool h4{position:absolute;bottom:0;margin:0;left:0;padding:0}
.share_tool h4{z-index:2}
.fixed-button{z-index:1}
.fixed-button:after{clear:both}
.fixed-button:after,.fixed-button:before{content:' ';display:table}
.fixed-button li{box-sizing:border-box;height:100%;line-height:50px;list-style:none;transition:all .3s ease-in-out;opacity:0}
.fixed-button li.fixed-line a,.fixed-button li.fixed-line a:hover{background-color:#00C300}
.fixed-button li.fixed-facebook a{background-color:#306199}
.fixed-button li.fixed-facebook a:hover{background-color:#244872}
.fixed-button li.fixed-tumblr a{background-color:#32506d}
.fixed-button li.fixed-tumblr a:hover{background-color:#22364a}
.fixed-button li.fixed-linkedin a{background-color:#007bb6}
.fixed-button li.fixed-linkedin a:hover{background-color:#005983}
.fixed-button li.fixed-twitter a{background-color:#26c4f1}
.fixed-button li.fixed-twitter a:hover{background-color:#0eaad6}
.fixed-button li.fixed-googleplus a{background-color:#e93f2e}
.fixed-button li.fixed-googleplus a:hover{background-color:#ce2616}
.fixed-button li.fixed-pinterest a{background-color:#b81621}
.fixed-button li.fixed-pinterest a:hover{background-color:#8a1119}
.fixed-button li.fixed-whatsapp a{background-color:#43d854}
.fixed-button li.fixed-whatsapp a:hover{background-color:#28c039}
.fixed-button li.fixed-bbm a,.fixed-button li.fixed-bbm a:hover{background-color:#000}
.fixed-button li a,.share_tool .show-share .show-less,.share_tool .show-share .show-more{background-color:#ccc;box-sizing:border-box;display:block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;height:50px;padding:0;position:relative;text-align:center;text-decoration:none;-webkit-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out;width:50px;border-radius:100%;box-shadow:0 6px 12px rgba(0,0,0,.2)}
.share_tool .show-share .show-less,.share_tool .show-share .show-more{line-height:50px;margin:0;top:0;left:0;cursor:pointer;background-color:#2196f3}
.share_tool .show-share .show-less{display:none}
.fixed-button li a .fixed-icon{display:block;cursor:pointer}
.fixed-button li a .fixed-icon svg,.share_tool .show-share svg{height:24px;width:24px;vertical-align:middle}
.fixed-button li.fixed-googleplus a .fixed-icon svg{height:30px;width:30px}
.fixed-button li.fixed-line a .fixed-icon svg{height:44px;width:44px}
.fixed-button li.fixed-bbm a .fixed-icon svg{height:34px;width:34px}
.fixed-button li.fixed-bbm a,.fixed-button li.fixed-line a{padding:0}
.fixed-button li.fixed-bbm a .fixed-icon,.fixed-button li.fixed-line a .fixed-icon{padding-top:0}
.fixed-button li a .fixed-icon svg circle,.fixed-button li a .fixed-icon svg path,.share_tool .show-share svg path{fill:#fff}
.fixed-button li a .fixed-text{color:#fff}
.fixed-button li a:active{box-shadow:inset 1px 3px 15px 0 rgba(22,0,0,.25)}
.share_tool .show-share .rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-600deg);transform:rotate3d(0,0,1,-600deg);opacity:0}
100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}
}
@keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-600deg);transform:rotate3d(0,0,1,-600deg);opacity:0}
100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}
}
/*]]>*/
</style>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
$(function() {
  $(".share_tool .show-share .show-more").click(function() {
    $(".share_tool .show-share .show-more").hide();
    $(".share_tool .show-share .show-less").show();
    $(".fixed-button li.fixed-facebook").css({
      bottom: "468px",
      opacity: "1"
    });
    $(".fixed-button li.fixed-twitter").css({
      bottom: "416px",
      opacity: "1"
    });
    $(".fixed-button li.fixed-googleplus").css({
      bottom: "364px",
      opacity: "1"
    });
    $(".fixed-button li.fixed-tumblr").css({
      bottom: "312px",
      opacity: "1"
    });
    $(".fixed-button li.fixed-linkedin").css({
      bottom: "260px",
      opacity: "1"
    });
    $(".fixed-button li.fixed-pinterest").css({
      bottom: "208px",
      opacity: "1"
    });
    $(".fixed-button li.fixed-whatsapp").css({
      bottom: "156px",
      opacity: "1"
    });
    $(".fixed-button li.fixed-line").css({
      bottom: "104px",
      opacity: "1"
    });
    $(".fixed-button li.fixed-bbm").css({
      bottom: "52px",
      opacity: "1"
    });
  });
  $(".share_tool .show-share .show-less").click(function() {
    $(".share_tool .show-share .show-more").show();
    $(".share_tool .show-share .show-less").hide();
    $(".fixed-button li.fixed-facebook,.fixed-button li.fixed-twitter,.fixed-button li.fixed-googleplus,.fixed-button li.fixed-tumblr,.fixed-button li.fixed-linkedin,.fixed-button li.fixed-pinterest,.fixed-button li.fixed-whatsapp,.fixed-button li.fixed-line,.fixed-button li.fixed-bbm").css({
      bottom: "0",
      opacity: "0"
    })
  })
});
//]]>
</script>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="share_tool">
<h4 class='show-share'>
<div class="show-more rotateIn">
<svg viewBox="0 0 24 24">
<path d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z" fill="#000000"></path>
</svg>
</div>
<div class="show-less rotateIn">
<svg viewBox="0 0 24 24">
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" fill="#000000"></path>
</svg>
</div>
</h4>
  <ul class='fixed-button'>
    <li class='fixed-facebook'>
      <a expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.url' target='_blank' title='Share on Facebook'>
        <span class='fixed-icon'>
            <svg viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg'><path d='M26.4 0H2.6C1.714 0 0 1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z'/></svg>
          </span>
      </a>
    </li>
    <li class='fixed-twitter'>
      <a expr:href='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Share on Twitter'>
        <span class='fixed-icon'>
            <svg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'><path d='M24.253 8.756C24.69 17.08 18.297 24.182 9.97 24.62a15.093 15.093 0 0 1-8.86-2.32c2.702.18 5.375-.648 7.507-2.32a5.417 5.417 0 0 1-4.49-3.64c.802.13 1.62.077 2.4-.154a5.416 5.416 0 0 1-4.412-5.11 5.43 5.43 0 0 0 2.168.387A5.416 5.416 0 0 1 2.89 4.498a15.09 15.09 0 0 0 10.913 5.573 5.185 5.185 0 0 1 3.434-6.48 5.18 5.18 0 0 1 5.546 1.682 9.076 9.076 0 0 0 3.33-1.317 5.038 5.038 0 0 1-2.4 2.942 9.068 9.068 0 0 0 3.02-.85 5.05 5.05 0 0 1-2.48 2.71z'/></svg>
          </span>
      </a>
    </li>
    <li class='fixed-googleplus'>
      <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank' title='Share on Google+'>
        <span class='fixed-icon'>
            <svg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M21 8.29h-1.95v2.6h-2.6v1.82h2.6v2.6H21v-2.6h2.6v-1.885H21V8.29zM7.614 10.306v2.925h3.9c-.26 1.69-1.755 2.925-3.9 2.925-2.34 0-4.29-2.016-4.29-4.354s1.885-4.353 4.29-4.353c1.104 0 2.014.326 2.794 1.105l2.08-2.08c-1.3-1.17-2.924-1.883-4.874-1.883C3.65 4.586.4 7.835.4 11.8s3.25 7.212 7.214 7.212c4.224 0 6.953-2.988 6.953-7.082 0-.52-.065-1.104-.13-1.624H7.614z'/></svg>
            </span>
      </a>
    </li>

    <li class='fixed-tumblr'>
      <a expr:href='&quot;http://tumblr.com/share/link?url=&quot; + data:post.url + &quot;&amp;name=&quot; + data:post.title + &quot;&amp;description=&quot; + data:post.snippet' target='_blank' title='Share on Tumblr'>
        <span class='fixed-icon'>
            <svg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'><path d='M18.02 21.842c-2.03.052-2.422-1.396-2.44-2.446v-7.294h4.73V7.874H15.6V1.592h-3.714s-.167.053-.182.186c-.218 1.935-1.144 5.33-4.988 6.688v3.637h2.927v7.677c0 2.8 1.7 6.7 7.3 6.6 1.863-.03 3.934-.795 4.392-1.453l-1.22-3.54c-.52.213-1.415.413-2.115.455z'/></svg>
          </span>
      </a>
    </li>

    <li class='fixed-linkedin'>
      <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url' target='_blank' title='Share on Linkedin'>
        <span class='fixed-icon'>
            <svg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'><path d='M25.424 15.887v8.447h-4.896v-7.882c0-1.98-.71-3.33-2.48-3.33-1.354 0-2.158.91-2.514 1.802-.13.315-.162.753-.162 1.194v8.216h-4.9s.067-13.35 0-14.73h4.9v2.087c-.01.017-.023.033-.033.05h.032v-.05c.65-1.002 1.812-2.435 4.414-2.435 3.222 0 5.638 2.106 5.638 6.632zM5.348 2.5c-1.676 0-2.772 1.093-2.772 2.54 0 1.42 1.066 2.538 2.717 2.546h.032c1.71 0 2.77-1.132 2.77-2.546C8.056 3.593 7.02 2.5 5.344 2.5h.005zm-2.48 21.834h4.896V9.604H2.867v14.73z'/></svg>
          </span>
      </a>
    </li>

    <li class='fixed-pinterest'>
      <a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.title' target='_blank' title='Share on Pinterest'>
        <span class='fixed-icon'>
            <svg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'><path d='M14.02 1.57c-7.06 0-12.784 5.723-12.784 12.785S6.96 27.14 14.02 27.14c7.062 0 12.786-5.725 12.786-12.785 0-7.06-5.724-12.785-12.785-12.785zm1.24 17.085c-1.16-.09-1.648-.666-2.558-1.22-.5 2.627-1.113 5.146-2.925 6.46-.56-3.972.822-6.952 1.462-10.117-1.094-1.84.13-5.545 2.437-4.632 2.837 1.123-2.458 6.842 1.1 7.557 3.71.744 5.226-6.44 2.924-8.775-3.324-3.374-9.677-.077-8.896 4.754.19 1.178 1.408 1.538.49 3.168-2.13-.472-2.764-2.15-2.683-4.388.132-3.662 3.292-6.227 6.46-6.582 4.008-.448 7.772 1.474 8.29 5.24.58 4.254-1.815 8.864-6.1 8.532v.003z'/></svg>
          </span>
      </a>
    </li>

    <li class='fixed-whatsapp'>
      <a data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%3A%20&quot; + data:post.url' target='_blank' title='Share on Whatsapp'>
        <span class='fixed-icon'>
            <svg height='90' viewBox='0 0 90 90' width='90' xmlns='http://www.w3.org/2000/svg'><path d='M90 43.84c0 24.214-19.78 43.842-44.182 43.842a44.256 44.256 0 0 1-21.357-5.455L0 90l7.975-23.522a43.38 43.38 0 0 1-6.34-22.637C1.635 19.63 21.415 0 45.818 0 70.223 0 90 19.628 90 43.84zM45.818 6.983c-20.484 0-37.146 16.535-37.146 36.86 0 8.064 2.63 15.533 7.076 21.61l-4.64 13.688 14.274-4.537A37.122 37.122 0 0 0 45.82 80.7c20.48 0 37.145-16.533 37.145-36.857S66.3 6.983 45.818 6.983zm22.31 46.956c-.272-.447-.993-.717-2.075-1.254-1.084-.537-6.41-3.138-7.4-3.495-.993-.36-1.717-.54-2.438.536-.72 1.076-2.797 3.495-3.43 4.212-.632.72-1.263.81-2.347.27-1.082-.536-4.57-1.672-8.708-5.332-3.22-2.848-5.393-6.364-6.025-7.44-.63-1.076-.066-1.657.475-2.192.488-.482 1.084-1.255 1.625-1.882.543-.628.723-1.075 1.082-1.793.363-.718.182-1.345-.09-1.884-.27-.537-2.438-5.825-3.34-7.977-.902-2.15-1.803-1.793-2.436-1.793-.63 0-1.353-.09-2.075-.09-.722 0-1.896.27-2.89 1.344-.99 1.077-3.788 3.677-3.788 8.964 0 5.288 3.88 10.397 4.422 11.113.54.716 7.49 11.92 18.5 16.223 11.01 4.3 11.01 2.866 12.996 2.686 1.984-.18 6.406-2.6 7.312-5.107.9-2.513.9-4.664.63-5.112z'/></svg>
          </span>
      </a>
    </li>
    <li class='fixed-line'>
      <a expr:href='&quot;https://timeline.line.me/social-plugin/share?url=&quot; + data:post.url' target='_blank' title='Share on Line'>
        <span class='fixed-icon'>
           <svg class='icon icons8-LINE' viewBox='0 0 48 48'>
    <path d='M12.5,42h23c3.59,0,6.5-2.91,6.5-6.5v-23C42,8.91,39.09,6,35.5,6h-23C8.91,6,6,8.91,6,12.5v23      C6,39.09,8.91,42,12.5,42z' style='fill:#00C300;'/>
    <path d='M37.113,22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108,4.772-13.108,10.637      c0,5.258,4.663,9.662,10.962,10.495c0.427,0.092,1.008,0.282,1.155,0.646c0.132,0.331,0.086,0.85,0.042,1.185      c0,0-0.153,0.925-0.187,1.122c-0.057,0.331-0.263,1.296,1.135,0.707c1.399-0.589,7.548-4.445,10.298-7.611h-0.001      C36.203,26.879,37.113,24.764,37.113,22.417z M18.875,25.907h-2.604c-0.379,0-0.687-0.308-0.687-0.688V20.01      c0-0.379,0.308-0.687,0.687-0.687c0.379,0,0.687,0.308,0.687,0.687v4.521h1.917c0.379,0,0.687,0.308,0.687,0.687      C19.562,25.598,19.254,25.907,18.875,25.907z M21.568,25.219c0,0.379-0.308,0.688-0.687,0.688s-0.687-0.308-0.687-0.688V20.01      c0-0.379,0.308-0.687,0.687-0.687s0.687,0.308,0.687,0.687V25.219z M27.838,25.219c0,0.297-0.188,0.559-0.47,0.652      c-0.071,0.024-0.145,0.036-0.218,0.036c-0.215,0-0.42-0.103-0.549-0.275l-2.669-3.635v3.222c0,0.379-0.308,0.688-0.688,0.688      c-0.379,0-0.688-0.308-0.688-0.688V20.01c0-0.296,0.189-0.558,0.47-0.652c0.071-0.024,0.144-0.035,0.218-0.035      c0.214,0,0.42,0.103,0.549,0.275l2.67,3.635V20.01c0-0.379,0.309-0.687,0.688-0.687c0.379,0,0.687,0.308,0.687,0.687V25.219z      M32.052,21.927c0.379,0,0.688,0.308,0.688,0.688c0,0.379-0.308,0.687-0.688,0.687h-1.917v1.23h1.917      c0.379,0,0.688,0.308,0.688,0.687c0,0.379-0.309,0.688-0.688,0.688h-2.604c-0.378,0-0.687-0.308-0.687-0.688v-2.603      c0-0.001,0-0.001,0-0.001c0,0,0-0.001,0-0.001v-2.601c0-0.001,0-0.001,0-0.002c0-0.379,0.308-0.687,0.687-0.687h2.604      c0.379,0,0.688,0.308,0.688,0.687s-0.308,0.687-0.688,0.687h-1.917v1.23H32.052z' style='fill:#FFFFFF;'/>
  </svg>
          </span>
      </a>
    </li>
    <li class='fixed-bbm'>
      <a expr:href='&quot;bbmi://api/share?message=&quot; + data:post.url + &quot;?ref=bbm&amp;userCustomMessage=&quot; + data:post.title' target='_blank' title='Share on Blackberry'>
        <span class='fixed-icon'>
            <svg class='icon BlackBerry-Icon' viewBox='0 0 5067 5067'>
    <rect height='5067' rx='489' ry='489' style='fill: black;' width='5067'/>
    <g>
      <path d='M1327 885l2018 0c141,0 269,58 361,150 93,93 150,221 150,361l0 1457c0,141 -57,268 -150,361 -92,93 -220,150 -361,150l-1584 0 -724 737c64,-258 143,-487 226,-741 -115,-15 -219,-68 -297,-146 -93,-93 -150,-220 -150,-361l0 -1457c0,-140 57,-268 150,-361 92,-92 220,-150 361,-150zm2018 135l-2018 0c-104,0 -197,43 -266,111 -68,68 -110,162 -110,265l0 1457c0,103 42,197 110,265 69,69 162,111 266,111l27 0 90 0 -26 87c-11,37 -57,177 -102,312l369 -379 20 -20 28 0 1612 0c104,0 198,-42 266,-111 68,-68 110,-162 110,-265l0 -1457c0,-103 -42,-197 -110,-265 -68,-68 -162,-111 -266,-111z' style='fill: white; fill-rule: nonzero;'/>
      <path d='M1655 1452l310 0c91,0 149,75 129,166l0 0c-19,91 -110,166 -201,166l-310 0 72 -332z' style='fill: white;'/>
      <path d='M1565 1938l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z' style='fill: white;'/>
      <path d='M2291 1452l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/>
      <path d='M2200 1938l309 0c92,0 150,74 130,165l0 0c-20,92 -111,166 -202,166l-309 0 72 -331z' style='fill: white;'/>
      <path d='M2872 1748l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z' style='fill: white;'/>
      <path d='M2781 2233l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/>
      <path d='M2118 2419l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/>
      <path d='M3819 1091l10 0c233,0 423,190 423,422l0 1715c0,232 -190,422 -423,422l-13 0 225 735 -719 -735 -1224 0c-165,0 -308,-96 -378,-235 17,2 34,2 51,2l1586 0c301,0 548,-246 548,-547l0 -1486c0,-107 -32,-208 -86,-293z' style='fill: white;'/>
    </g>
  </svg>
          </span>
      </a>
    </li>
  </ul>
</div>
</b:if>