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:
- Google Plus
- Tumblr
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.
Setelah itu, cari tag penutupnya (</b:includable>). Anda bisa menscroll sampai kebawah. Untuk lebih jelasnya bisa dilihat gambar dibawah ini.
Masukkan kode berikut ini tepat diatas kode </b:includable> tadi (yang saya garisi warna merah pada gambar diatas).
<b:if cond='data:blog.pageType == "item"'>
<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='"http://www.facebook.com/sharer.php?u=" + 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='"http://twitter.com/share?url=" + 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='"https://plus.google.com/share?url=" + 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='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' 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='"http://www.linkedin.com/shareArticle?mini=true&url=" + 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='"whatsapp://send?text=" + data:post.title + "%3A%20" + 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.