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.


Bagi anda yang ingin bertanya atau request dibuatkan tutorial dan artikel, silakan hubungi saya lewat kontak yang tersedia atau pada Halaman Pertanyaan. Terima Kasih.

Loading

6 komentar untuk Membuat Widget Tombol Share Post Pure SVG untuk Blog

Silakan masukkan komentar anda. Jangan habiskan waktu hanya untuk melakukan SPAM disini.

.
irwin | masirwin.com
# Minggu, 22 Oktober 2017 14.35.00 WITA

Wah sayangnya ini untuk blogger :(

Balas
.
Ozik Jarwo .
# Minggu, 22 Oktober 2017 16.02.00 WITA

Iya mas Irwin

Balas
.
kiat jitu
# Senin, 15 Januari 2018 09.46.00 WITA
Komentar ini telah dihapus oleh pengarang.
.
kiat jitu
# Senin, 15 Januari 2018 09.49.00 WITA

Gan, bikin tombol share kyk punya agan sendiri bgmna?

Balas
.
Istyqomah Al-Hasbi
# Minggu, 04 Februari 2018 17.25.00 WITA

cara ngecilin ukuran nya gimana gan

Balas
.
Ozik Jarwo .
# Minggu, 04 Februari 2018 21.08.00 WITA

Di kode panjang saya diatas, ada kode:

[pre].svg-jarwo-share svg {width:50px;margin:5px}[/pre][/pre]

Ganti 50px dengan angka yang lebih kecil, misal 20px dan seterusnya. Makin kecil angkanya, makin kecil juga ukuran gambar ikon SVG nya.

Balas