Membuat Widget Tombol Share Post yang Ringan Pure SVG untuk Blog
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.
Silakan pilih sistem komentar anda ⇛   

Silakan berkomentar dengan sopan. Jangan buang-buang waktu anda hanya untuk melakukan SPAM, Fake Account, dan Flamming disini.

Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 10 November 2018 18.26

Coba saya minta contoh penampakan/link nya...

Balas
Arkana Fairuz Kode Jarwo
Arkana Fairuz
# 9 November 2018 10.18

Keren mas share bottonnya, tapi kenapa ya mas ketika saya pasang gambar tidak bisa muncul penuh ? Dan share botton wa tidak muncul, mohon bantuannya .. Terima kasih sebelumnya

Balas
Dewita Riska Kode Jarwo
Dewita Riska
# 9 September 2018 20.36

Makasih gan, tampilan share tetap keren dan tetap wuss.

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 3 September 2018 20.50

Bisa, tinggal ditaruh kodenya diatas Related Post...

Balas
AstianaGT Kode Jarwo
AstianaGT
# 31 Agustus 2018 19.24

Terima kasih. Artikelnya bermanfaat. Tapi jika bisa, saya ingin meletakkannya sebelum Related Post. Bisa?

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 4 Februari 2018 21.08

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
Istyqomah Al-Hasbi Kode Jarwo
Istyqomah Al-Hasbi
# 4 Februari 2018 17.25

cara ngecilin ukuran nya gimana gan

Balas
kiat jitu Kode Jarwo
kiat jitu
# 15 Januari 2018 09.49

Gan, bikin tombol share kyk punya agan sendiri bgmna?

Balas
kiat jitu Kode Jarwo
kiat jitu
# 15 Januari 2018 09.46

Komentar ini telah dihapus oleh pengarang.

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 22 Oktober 2017 16.02

Iya mas Irwin

Balas
irwin | masirwin.com Kode Jarwo
irwin | masirwin.com
# 22 Oktober 2017 14.35

Wah sayangnya ini untuk blogger :(

Balas