Membuat Widget Tombol Share Post Pure SVG untuk Blog

    Update widget lagi, kali ini saya akan membagikan widget tombol share untuk blog. Tapi kali ini widgetnya sedikit berbeda dari sebelumnya, yaitu pure SVG.

    Pure SVG yang saya maksud disini adalah widget ini 100% tidak menggunakan FontAwesome atau gambar (PNG/GIF/JPG) untuk ikon sosial medianya. Saya menggunakan SVG internal sebagai penggantinya. Jadi sudah pasti widget ini sangat ringan.

    Untuk Live Demonya bisa anda lihat disini.

    Sosial media yang tersedia antara lain:
    • Facebook
    • Twitter
    • Google Plus
    • Pinterest
    • Tumblr
    • LinkedIn
    • Whatsapp

    Langsung saja, berikut cara pemasangannya.

    Pertama, cari kode:

    <b:includable id='post' var='post'>

    Bila sudah ketemu, silakan expand tag tersebut dengan menekan titik-titik disebelahnya. Kurang lebih penampilannya seperti ini.

    <b:includable id='post' var='post'>


    Setelah itu, cari tag penutupnya (</b:includable>). Anda bisa menscroll sampai kebawah. Untuk lebih jelasnya bisa dilihat gambar dibawah ini.

    <b:includable id='post' var='post'>

    Masukkan kode berikut ini tepat diatas kode </b:includable> tadi (yang saya garisi warna merah pada gambar diatas).

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

    <style>
    .svg-jarwo-share {display:block;text-align:center;padding:20px;background:#fff;margin-top:10px}
    .svg-jarwo-share a {vertical-align:top}
    .svg-jarwo-share a:hover {opacity:0.7}
    .svg-jarwo-share svg {width:50px;margin:5px}
    </style>
    <div class='svg-jarwo-share'>
    <a style='line-height:3;margin-right: 10px;font-size: 20px;font-family: arial;font-weight: bold;'>
    <span>
    Share Artikel Ini ke:
    </span>
    </a>
    <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'>
     <svg version='1.1' viewBox='0 0 112.196 112.196' x='0px' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'>
      <g>
       <circle cx='56.098' cy='56.098' r='56.098' style='fill:#3B5998;'/>
       <path d='M70.201,58.294h-10.01v36.672H45.025V58.294h-7.213V45.406h7.213v-8.34 c0-5.964,2.833-15.303,15.301-15.303L71.56,21.81v12.51h-8.151c-1.337,0-3.217,0.668-3.217,3.513v7.585h11.334L70.201,58.294z' style='fill:#FFFFFF;'/>
      </g>
     </svg>
    </a>
    <a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>
     <svg version='1.1' viewBox='0 0 112.197 112.197' x='0px' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'>
      <g>
       <circle cx='56.099' cy='56.098' r='56.098' style='fill:#55ACEE;'/>
       <g>
        <path d='M90.461,40.316c-2.404,1.066-4.99,1.787-7.702,2.109c2.769-1.659,4.894-4.284,5.897-7.417    c-2.591,1.537-5.462,2.652-8.515,3.253c-2.446-2.605-5.931-4.233-9.79-4.233c-7.404,0-13.409,6.005-13.409,13.409    c0,1.051,0.119,2.074,0.349,3.056c-11.144-0.559-21.025-5.897-27.639-14.012c-1.154,1.98-1.816,4.285-1.816,6.742    c0,4.651,2.369,8.757,5.965,11.161c-2.197-0.069-4.266-0.672-6.073-1.679c-0.001,0.057-0.001,0.114-0.001,0.17    c0,6.497,4.624,11.916,10.757,13.147c-1.124,0.308-2.311,0.471-3.532,0.471c-0.866,0-1.705-0.083-2.523-0.239    c1.706,5.326,6.657,9.203,12.526,9.312c-4.59,3.597-10.371,5.74-16.655,5.74c-1.08,0-2.15-0.063-3.197-0.188    c5.931,3.806,12.981,6.025,20.553,6.025c24.664,0,38.152-20.432,38.152-38.153c0-0.581-0.013-1.16-0.039-1.734    C86.391,45.366,88.664,43.005,90.461,40.316L90.461,40.316z' style='fill:#F1F2F2;'/>
       </g>
      </g>
     </svg>
    </a>
    <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>
    <svg version='1.1' viewBox='0 0 112.196 112.196' x='0px' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'>
     <g>
      <circle cx='56.098' cy='56.097' r='56.098' style='fill:#DC4E41;'/>
     </g>
     <g>
      <path d='M19.531,58.608c-0.199,9.652,6.449,18.863,15.594,21.867c8.614,2.894,19.205,0.729,24.937-6.648    c4.185-5.169,5.136-12.06,4.683-18.498c-7.377-0.066-14.754-0.044-22.12-0.033c-0.012,2.628,0,5.246,0.011,7.874    c4.417,0.122,8.835,0.066,13.252,0.155c-1.115,3.821-3.655,7.377-7.51,8.757c-7.443,3.28-16.94-1.005-19.282-8.813    c-2.827-7.477,1.801-16.5,9.442-18.675c4.738-1.667,9.619,0.21,13.673,2.673c2.054-1.922,3.976-3.976,5.864-6.052    c-4.606-3.854-10.525-6.217-16.61-5.698C29.526,35.659,19.078,46.681,19.531,58.608z' style='fill:#DC4E41;'/>
      <path d='M79.102,48.668c-0.022,2.198-0.045,4.407-0.056,6.604c-2.209,0.022-4.406,0.033-6.604,0.044    c0,2.198,0,4.384,0,6.582c2.198,0.011,4.407,0.022,6.604,0.045c0.022,2.198,0.022,4.395,0.044,6.604c2.187,0,4.385-0.011,6.582,0    c0.012-2.209,0.022-4.406,0.045-6.615c2.197-0.011,4.406-0.022,6.604-0.033c0-2.198,0-4.384,0-6.582    c-2.197-0.011-4.406-0.022-6.604-0.044c-0.012-2.198-0.033-4.407-0.045-6.604C83.475,48.668,81.288,48.668,79.102,48.668z' style='fill:#DC4E41;'/>
       <g>
        <path d='M19.531,58.608c-0.453-11.927,9.994-22.949,21.933-23.092c6.085-0.519,12.005,1.844,16.61,5.698     c-1.889,2.077-3.811,4.13-5.864,6.052c-4.054-2.463-8.935-4.34-13.673-2.673c-7.642,2.176-12.27,11.199-9.442,18.675     c2.342,7.808,11.839,12.093,19.282,8.813c3.854-1.38,6.395-4.936,7.51-8.757c-4.417-0.088-8.835-0.033-13.252-0.155     c-0.011-2.628-0.022-5.246-0.011-7.874c7.366-0.011,14.743-0.033,22.12,0.033c0.453,6.439-0.497,13.33-4.683,18.498     c-5.732,7.377-16.322,9.542-24.937,6.648C25.981,77.471,19.332,68.26,19.531,58.608z' style='fill:#FFFFFF;'/>
        <path d='M79.102,48.668c2.187,0,4.373,0,6.57,0c0.012,2.198,0.033,4.407,0.045,6.604     c2.197,0.022,4.406,0.033,6.604,0.044c0,2.198,0,4.384,0,6.582c-2.197,0.011-4.406,0.022-6.604,0.033     c-0.022,2.209-0.033,4.406-0.045,6.615c-2.197-0.011-4.396,0-6.582,0c-0.021-2.209-0.021-4.406-0.044-6.604     c-2.197-0.023-4.406-0.033-6.604-0.045c0-2.198,0-4.384,0-6.582c2.198-0.011,4.396-0.022,6.604-0.044     C79.057,53.075,79.079,50.866,79.102,48.668z' style='fill:#FFFFFF;'/>
       </g>
     </g>
    </svg>
    </a>
    <a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' rel='nofollow' target='_blank'>
    <svg version='1.1' viewBox='0 0 112.198 112.198' x='0px' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'>
     <g>
     <circle cx='56.099' cy='56.1' r='56.098' style='fill:#CB2027;'/>
      <g>
       <path d='M60.627,75.122c-4.241-0.328-6.023-2.431-9.349-4.45c-1.828,9.591-4.062,18.785-10.679,23.588    c-2.045-14.496,2.998-25.384,5.34-36.941c-3.992-6.72,0.48-20.246,8.9-16.913c10.363,4.098-8.972,24.987,4.008,27.596    c13.551,2.724,19.083-23.513,10.679-32.047c-12.142-12.321-35.343-0.28-32.49,17.358c0.695,4.312,5.151,5.621,1.78,11.571    c-7.771-1.721-10.089-7.85-9.791-16.021c0.481-13.375,12.018-22.74,23.59-24.036c14.635-1.638,28.371,5.374,30.267,19.14    C85.015,59.504,76.275,76.33,60.627,75.122L60.627,75.122z' style='fill:#F1F2F2;'/>
      </g>
     </g>
    </svg>
    </a>
    <a href='http://www.tumblr.com/share' rel='nofollow' target='_blank'>
    <svg version='1.1' viewBox='0 0 112.197 112.197' x='0px' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'>
     <g>
      <circle cx='56.099' cy='56.098' r='56.098' style='fill:#395976;'/>
      <g>
       <path d='M58.178,38.032V22.966h-9.725c-0.219,0.55-0.327,1.221-0.327,1.891    c-0.102,0.327-0.222,0.564-0.222,0.89c-0.997,5.587-3.899,9.484-8.814,11.613c-1.459,0.673-2.798,0.775-4.242,0.673v12.146h7.146    c0.116,17.092,0.116,25.903,0.116,26.351v1.013c0.897,7.457,4.796,11.926,11.717,13.606c2.785,0.772,5.794,1.116,8.814,1.116    c3.9-0.12,7.696-0.789,11.493-2.007V75.964c-2.218,0.67-4.241,1.234-6.026,1.786c-3.456,1.01-6.358,0.341-8.713-1.891    c-0.222-0.341-0.551-0.79-0.667-1.237c-0.329-1.784-0.538-3.678-0.538-5.461V50.178h15.497V38.032H58.178z' style='fill:#F1F2F2;'/>
      </g>
     </g>
    </svg>
    </a>
    <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url' rel='nofollow' target='_blank'>
    <svg version='1.1' viewBox='0 0 112.196 112.196' x='0px' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'>
     <g>
      <circle cx='56.098' cy='56.097' r='56.098' style='fill:#007AB9;'/>
      <g>
       <path d='M89.616,60.611v23.128H76.207V62.161c0-5.418-1.936-9.118-6.791-9.118    c-3.705,0-5.906,2.491-6.878,4.903c-0.353,0.862-0.444,2.059-0.444,3.268v22.524H48.684c0,0,0.18-36.546,0-40.329h13.411v5.715    c-0.027,0.045-0.065,0.089-0.089,0.132h0.089v-0.132c1.782-2.742,4.96-6.662,12.085-6.662    C83.002,42.462,89.616,48.226,89.616,60.611L89.616,60.611z M34.656,23.969c-4.587,0-7.588,3.011-7.588,6.967    c0,3.872,2.914,6.97,7.412,6.97h0.087c4.677,0,7.585-3.098,7.585-6.97C42.063,26.98,39.244,23.969,34.656,23.969L34.656,23.969z     M27.865,83.739H41.27V43.409H27.865V83.739z' style='fill:#F1F2F2;'/>
      </g>
     </g>
    </svg>
    </a>
    <a data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%3A%20&quot; + data:post.url' rel='nofollow' target='_blank'>
    <svg version='1.1' viewBox='0 0 58 58' x='0px' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'>
     <g>
      <path d='M0,58l4.988-14.963C2.457,38.78,1,33.812,1,28.5C1,12.76,13.76,0,29.5,0S58,12.76,58,28.5   S45.24,57,29.5,57c-4.789,0-9.299-1.187-13.26-3.273L0,58z' style='fill:#2CB742;'/>
      <path d='M47.683,37.985c-1.316-2.487-6.169-5.331-6.169-5.331c-1.098-0.626-2.423-0.696-3.049,0.42   c0,0-1.577,1.891-1.978,2.163c-1.832,1.241-3.529,1.193-5.242-0.52l-3.981-3.981l-3.981-3.981c-1.713-1.713-1.761-3.41-0.52-5.242   c0.272-0.401,2.163-1.978,2.163-1.978c1.116-0.627,1.046-1.951,0.42-3.049c0,0-2.844-4.853-5.331-6.169   c-1.058-0.56-2.357-0.364-3.203,0.482l-1.758,1.758c-5.577,5.577-2.831,11.873,2.746,17.45l5.097,5.097l5.097,5.097   c5.577,5.577,11.873,8.323,17.45,2.746l1.758-1.758C48.048,40.341,48.243,39.042,47.683,37.985z' style='fill:#FFFFFF;'/>
     </g>
    </svg>
    </a>
    </div>

    </b:if>
    Silakan ganti tulisan yang berwarna kuning dengan kata-kata anda.

    Simpan template dan lihat hasilnya.

    Widget ini dijamin aman terhadap SEO dan kecepatan blog anda di Google PageSpeed Insights, tidak akan menimbulkan masalah baru seperti Render-Blocking, CSS Delivery, dan sebagainya.