Skip to content Skip to sidebar Skip to footer
Home / Blogging / Memasang Tombol Share Media Sosial Icon SVG di Blog
Memasang Tombol Share Media Sosial Icon SVG di Blog

Memasang Tombol Share Media Sosial Icon SVG di Blog

By Dewa Plokis
Beberapa waktu yang lalu, saya telah membuat daftar sosial share terbaik pihak ketiga yang bisa dipasangkan pada blogger sebagai salah satu cara membangun kualiatas blog melalui tombol share media sosial agar blog menjadi lebih SEO Friendly. Beberapa sosial media pendukung ini juga membantu blog mendapatkan kredibilitas pada mesin pencari sebagai sumber backlink yang berkualitas.

Penggunaan sosial share dipercaya mampu mendatangkan visitor yang banyak selain dari pencarian pada search engine. Karena kita ketahui bahwa pengguna media online saat ini semakin besar. Dapat dipastikan bahwa hampir semua orang memiliki akun media sosial. Setidaknya kita bisa mendapat beberapa klik dari media sosial tersebut. Apalagi jika konten yang Anda share adalah konten yang berkualitas maka pasti jumlah kliknya kan semakin tinggi.
Tombol Share Media Sosial Icon SVG Blogger


Dengan memanfaatkan tombol share media sosial ini, kita bisa mendatangkan visitor melalui media sosial tersebut. Beberapa media sosial yang saat ini bisa menjadi backlink berkualitasa adalah Facebook, Twitter dan Pinterest. Dan jangan lupakan Whats App, karena saat ini penggunanya juga semakin banyak dan menjadi salah satu sarana messenger terbaik didunia. Dan tentunya beberapa sosial media pendukung lainnya.

Pada tutorial kali, saya akan memberikan 2 (dua) jenis tutorial pemasangan dengan style berbeda namun tetap menggunankan icon svg agar loading gambar tombol share tersebut menjadi lebih ringan dan responsive.

Cara Pasang Social Share Button Responsive Icon SVG

Ditutorial kali ini, saya akan membagikan cara memasang share button social media sebagai salah satu pendukung blog untuk meningkatkan rangking dan menambah visitor melalui media sosial. Silakan ikuti langkah-langkahnya berikut ini. Icon yang digunakan pada tutorial ini menggunakan icon SVG.

1. Kode CSS
Silakan copy dan pastekan kode CSS berikut ini sebelum </style> atau ]]></b:skin>
/* Share button */
.share-this-pleaseeeee{display:inline-block;margin:0;color:$(label.color);;text-transform:uppercase;font-size:16px;background:$(posts.background.color);z-index:1;position:relative;padding:0 10px;font-weight:bold;margin-top:3px}
#share-container{margin:20px auto 30px;overflow:hidden}
#share{width:100%;text-align:center}
#share a{width:25%;height:40px;display:block;font-size:24px;color:#fff;transition:opacity 0.15s linear;float:left}
#share a:hover{opacity:0.8}
#share a svg{width:24px;height:24px;margin-top:7px}
#share a svg path{fill:#ffffff}
.facebook{background:#3b5998}
.twitter{background:#55acee}
.linkedin{background:#0077b5}
.pinterest{background:#cb2027}
.whatsapp{background:#25d366}

2. Kode HTML
Cari kode <b:includable id='postsharebutton' var='post'> atau kode <b:includable id='shareButtons' var='post'/> dan letakkan kode dibawh ini tepat dibawahnya.
<div id='share-container'> <!-- social sharing button -->
<div class='label-line-c'>
<p class='share-this-pleaseeeee'>Share This</p>
</div>
<div id='share'>
  <!-- facebook -->
  <a aria-label='facebook' class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow noopener' target='_blank' title='facebook'>
    <svg viewBox='0 0 24 24'>
        <path d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z'/>
    </svg>  
  </a>
  <!-- twitter -->
  <a aria-label='twitter' class='twitter' expr:href='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' rel='nofollow noopener' target='_blank' title='twitter'>
    <svg viewBox='0 0 24 24'>
        <path d='M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z'/>
    </svg> 
  </a>
  <a aria-label='pinterest' class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;amp;description=&quot; + data:post.title' rel='nofollow noopener' target='_blank' title='pinterest'>
    <svg viewBox='0 0 24 24'>
        <path d='M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z'/>
    </svg>  
  </a> 
  <a aria-label='whatsapp' class='whatsapp' expr:href='&quot;https://api.whatsapp.com/send?phone=&amp;text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url' rel='nofollow noopener' target='_blank' title='whatsapp'>
    <svg viewBox='0 0 24 24'>
        <path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'/>
    </svg>
  </a>
</div>
</div> <!-- social sharing button end -->

Save template Anda dan mulailah untuk melakukan share dan lihat hasilnya.

Hapus code share button sebelumnya pada template Anda agar tutorial ini bisa bekerja dengan baik
Kode dari tombol share ini sebenarnya merupakan bawaan dari template Viomagz dan coba saya terapkan pada template lain dan berhasil.

Membuat Tombol Berbagi Media Sosial

Untuk cara yang kedua, sedikit ada perbedaan pada jumlah icon shere button / tombol berbagi media sosial yang ditampilkan, namun tetap menggunakan SVG icon. Silakan ikuti caranya berikut ini.

1. Pastekan kode dibawah ini sebelum ]]></b:skin>  atau </style> 

/* Share button dewaplokis*/
.share-this-pleaseeeee{display:inline-block;margin:0;text-transform:uppercase;font-size:16px;background:#40bedf;z-index:1;position:relative;padding:0 10px;font-weight:bold;}
.respo-sharing{text-align:center;font-size:0;display:table;margin:auto;width:100%;}
.respo-sharing-button__link,.respo-sharing-button__icon{display:inline-block;line-height:normal;transition:all .2s ease-in-out;}
.respo-sharing-more-content{display:block;}
.respo-sharing-button__link{display:inline-block;text-decoration:none;color:#fff;margin:0 auto;width:25%;transition:all .3s;}
.respo-sharing-button{display:flex;margin:2px 2px;border-radius:4px;transition:25ms ease-out;padding:13px 8px;font-size:12px;}
.respo-sharing-button__icon svg{width:1.2em;height:1.2em;margin-right:.4em;vertical-align:top;}
.respo-sharing-button svg path{fill:#fff;}
.respo-sharing-button--twitter,.respo-sharing-button--messenger,.respo-sharing-button--linkbtn{background-color:#065D93;}
.respo-sharing-button--twitter:hover,.respo-sharing-button--messenger:hover,.respo-sharing-button--linkbtn:hover{background-color:#0288D1;}
.respo-sharing-button--pinterest{background-color:#bd081c;}
.respo-sharing-button--pinterest:hover{background-color:#8c0615;}
.respo-sharing-button--facebook{background-color:#3b5998;}
.respo-sharing-button--facebook:hover{background-color:#2d4373;}
.respo-sharing-button--tumblr{background-color:#35465C;}
.respo-sharing-button--tumblr:hover{background-color:#222d3c;}
.respo-sharing-button--mix,.respo-sharing-button--okru{background-color:#ff8226;}
.respo-sharing-button--mix:hover,.respo-sharing-button--okru:hover{background-color:#FF6F00;}
.respo-sharing-button--reddit{background-color:#ff4500;}
.respo-sharing-button--reddit:hover{background-color:#BF360C;}
.respo-sharing-button--linkedin{background-color:#0077b5;}
.respo-sharing-button--linkedin:hover{background-color:#046293;}
.respo-sharing-button--email{background-color:#777;}
.respo-sharing-button--email:hover{background-color:#5e5e5e;}
.respo-sharing-button--gmail{background-color:#d93025;}
.respo-sharing-button--gmail:hover{background-color:#D50000;}
.respo-sharing-button--xing{background-color:#1a7576;}
.respo-sharing-button--xing:hover{background-color:#114c4c;}
.respo-sharing-button--whatsapp,.respo-sharing-button--line{background-color:#25D366;}
.respo-sharing-button--whatsapp:hover,.respo-sharing-button--line:hover{background-color:#1da851;}
.respo-sharing-button--hackernews,.respo-sharing-button--more{background-color:#943A00;}
.respo-sharing-button--hackernews:hover,.respo-sharing-button--more:hover{background-color:#FB6200;}
.respo-sharing-button--vk{background-color:#507299;}
.respo-sharing-button--vk:hover{background-color:#43648c;}
.respo-sharing-button--telegram{background-color:#54A9EB;}
.respo-sharing-button--telegram:hover{background-color:#4B97D1;}
#share_more,#min-share{display:none;}
.respo-sharing-button--more{cursor:pointer;}
.respo-sharing-button .respo-sharing-button__icon{font-weight:400;}
.respo-sharing-button span{color:#fff;font-weight:600;text-overflow:ellipsis;transition:initial;overflow:hidden;white-space:nowrap;width:100%;}

2. Selanjutnya cari kode ini <b:includable id='postsharebutton' var='post'> kemudian pastekan kode dibawah ini tepat dibawahnya

<div class='respo-sharing'>
               <!-- Sharingbutton Facebook -->
               <a aria-label='Facebook' class='respo-sharing-button__link' expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.canonicalUrl' rel='noopener' target='_blank' title='Share on Facebook'>
                  <div class='respo-sharing-button respo-sharing-button--facebook'>
                     <div aria-hidden='true' class='respo-sharing-button__icon'>
                        <svg viewBox='0 0 24 24'>
                           <path d='M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z'/>
                        </svg>
                     </div>
                     <span>Facebook</span>
                  </div>
               </a>
               <!-- Sharingbutton Twitter -->
               <a aria-label='Twitter' class='respo-sharing-button__link' expr:href='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.canonicalUrl' rel='noopener' target='_blank' title='Share on Twitter'>
                  <div class='respo-sharing-button respo-sharing-button--twitter'>
                     <div aria-hidden='true' class='respo-sharing-button__icon'>
                        <svg viewBox='0 0 24 24'>
                           <path d='M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z'/>
                        </svg>
                     </div>
                     <span>Twitter</span>
                  </div>
               </a>
               <!-- Sharingbutton Pinterest -->
               <a aria-label='Pinterest' class='respo-sharing-button__link' expr:href='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.canonicalUrl + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.title' rel='noopener' target='_blank' title='Share on Pinterest'>
                  <div class='respo-sharing-button respo-sharing-button--pinterest'>
                     <div aria-hidden='true' class='respo-sharing-button__icon'>
                        <svg viewBox='0 0 24 24'>
                           <path d='M12.14.5C5.86.5 2.7 5 2.7 8.75c0 2.27.86 4.3 2.7 5.05.3.12.57 0 .66-.33l.27-1.06c.1-.32.06-.44-.2-.73-.52-.62-.86-1.44-.86-2.6 0-3.33 2.5-6.32 6.5-6.32 3.55 0 5.5 2.17 5.5 5.07 0 3.8-1.7 7.02-4.2 7.02-1.37 0-2.4-1.14-2.07-2.54.4-1.68 1.16-3.48 1.16-4.7 0-1.07-.58-1.98-1.78-1.98-1.4 0-2.55 1.47-2.55 3.42 0 1.25.43 2.1.43 2.1l-1.7 7.2c-.5 2.13-.08 4.75-.04 5 .02.17.22.2.3.1.14-.18 1.82-2.26 2.4-4.33.16-.58.93-3.63.93-3.63.45.88 1.8 1.65 3.22 1.65 4.25 0 7.13-3.87 7.13-9.05C20.5 4.15 17.18.5 12.14.5z'/>
                        </svg>
                     </div>
                     <span>Pinterest</span>
                  </div>
               </a>
               <!-- Sharingbutton More -->
               <div aria-label='More' class='respo-sharing-button__link' id='plus-share' onclick='document.getElementById(&quot;share_more&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;min-share&quot;).style.display=&quot;inline-block&quot;;document.getElementById(&quot;plus-share&quot;).style.display=&quot;none&quot;' role='button' tabindex='0'>
                  <div class='respo-sharing-button respo-sharing-button--more'>
                     <div aria-hidden='true' class='respo-sharing-button__icon'>
                        <svg viewBox='0 0 32 32'>
                           <path d='M18 14V8h-4v6H8v4h6v6h4v-6h6v-4h-6z'/>
                        </svg>
                     </div>
                     <span>More</span>
                  </div>
               </div>
               <div aria-label='Less' class='respo-sharing-button__link' id='min-share' onclick='document.getElementById(&quot;share_more&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;min-share&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;plus-share&quot;).style.display=&quot;inline-block&quot;' role='button' tabindex='0'>
                  <div class='respo-sharing-button respo-sharing-button--more'>
                     <div aria-hidden='true' class='respo-sharing-button__icon'>
                        <svg viewBox='0 0 24 24'>
                           <path d='M20,14H4V10H20'/>
                        </svg>
                     </div>
                     <span>Less</span>
                  </div>
               </div>
               <div class='respo-sharing-more-content' id='share_more'>
                  <!-- Sharingbutton Tumblr -->
                  <a aria-label='Tumblr' class='respo-sharing-button__link' expr:href='&quot;https://tumblr.com/share/link?url=&quot; + data:post.canonicalUrl + &quot;&amp;name=&quot; + data:post.title + &quot;&amp;description=&quot; + data:post.snippet' rel='noopener' target='_blank' title='Share on Tumblr'>
                     <div class='respo-sharing-button respo-sharing-button--tumblr'>
                        <div aria-hidden='true' class='respo-sharing-button__icon'>
                           <svg viewBox='0 0 24 24'>
                              <path d='M13.5.5v5h5v4h-5V15c0 5 3.5 4.4 6 2.8v4.4c-6.7 3.2-12 0-12-4.2V9.5h-3V6.7c1-.3 2.2-.7 3-1.3.5-.5 1-1.2 1.4-2 .3-.7.6-1.7.7-3h3.8z'/>
                           </svg>
                        </div>
                        <span>Tumblr</span>
                     </div>
                  </a>
                  <!-- Sharingbutton Mix -->
                  <a aria-label='Mix' class='respo-sharing-button__link' expr:href='&quot;https://mix.com/add?url=&quot; + data:post.canonicalUrl' rel='noopener' target='_blank' title='Share on Mix'>
                     <div class='respo-sharing-button respo-sharing-button--mix'>
                        <div aria-hidden='true' class='respo-sharing-button__icon'>
                           <svg viewBox='0 0 24 24'>
                              <path d='M4.8 6.1v15.15c0 1.35-1.05 2.35-2.4 2.35-1.35 0-2.4-1.05-2.4-2.35V0h24v13.35c0 1.3-1.1 2.35-2.4 2.35-1.35 0-2.45-1.05-2.45-2.35v-1.2c0-1.35-1.05-2.35-2.4-2.35-1.137 0-2.121.803-2.35 1.875V15.5c0 1.35-1.1 2.35-2.4 2.35-1.35 0-2.4-1.05-2.4-2.35V6.25c0-1.3-1.1-2.35-2.4-2.35a2.4 2.4 0 0 0-2.4 2.2z'/>
                           </svg>
                        </div>
                        <span>Mix</span>
                     </div>
                  </a>
                  <!-- Sharingbutton E-Mail -->
                  <a aria-label='E-Mail' class='respo-sharing-button__link' expr:href='&quot;mailto:?subject=&quot; + data:post.title + &quot;&amp;body=&quot; + data:post.canonicalUrl' rel='noopener' target='_self' title='Share on Email'>
                     <div class='respo-sharing-button respo-sharing-button--email'>
                        <div aria-hidden='true' class='respo-sharing-button__icon'>
                           <svg viewBox='0 0 24 24'>
                              <path d='M22 4H2C.9 4 0 4.9 0 6v12c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7.25 14.43l-3.5 2c-.08.05-.17.07-.25.07-.17 0-.34-.1-.43-.25-.14-.24-.06-.55.18-.68l3.5-2c.24-.14.55-.06.68.18.14.24.06.55-.18.68zm4.75.07c-.1 0-.2-.03-.27-.08l-8.5-5.5c-.23-.15-.3-.46-.15-.7.15-.22.46-.3.7-.14L12 13.4l8.23-5.32c.23-.15.54-.08.7.15.14.23.07.54-.16.7l-8.5 5.5c-.08.04-.17.07-.27.07zm8.93 1.75c-.1.16-.26.25-.43.25-.08 0-.17-.02-.25-.07l-3.5-2c-.24-.13-.32-.44-.18-.68s.44-.32.68-.18l3.5 2c.24.13.32.44.18.68z'/>
                           </svg>
                        </div>
                        <span>E-Mail</span>
                     </div>
                  </a>
                  <!-- Sharingbutton GMail -->
                  <a aria-label='GMail' class='respo-sharing-button__link' expr:href='&quot;https://mail.google.com/mail/u/0/?view=cm&amp;ui=2&amp;tf=0&amp;fs=1&amp;su=&quot; + data:post.title + &quot;&amp;body=&quot; + data:post.canonicalUrl' rel='noopener' target='_blank' title='Share on Gmail'>
                     <div class='respo-sharing-button respo-sharing-button--gmail'>
                        <div aria-hidden='true' class='respo-sharing-button__icon'>
                           <svg viewBox='0 0 24 24'>
                              <path d='M20,18H18V9.25L12,13L6,9.25V18H4V6H5.2L12,10.25L18.8,6H20M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z'/>
                           </svg>
                        </div>
                        <span>GMail</span>
                     </div>
                  </a>
                  <!-- Sharingbutton LinkedIn -->
                  <a aria-label='LinkedIn' class='respo-sharing-button__link' expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.canonicalUrl' rel='noopener' target='_blank' title='Share on LinkedIn'>
                     <div class='respo-sharing-button respo-sharing-button--linkedin'>
                        <div aria-hidden='true' class='respo-sharing-button__icon'>
                           <svg viewBox='0 0 24 24'>
                              <path d='M6.5 21.5h-5v-13h5v13zM4 6.5C2.5 6.5 1.5 5.3 1.5 4s1-2.4 2.5-2.4c1.6 0 2.5 1 2.6 2.5 0 1.4-1 2.5-2.6 2.5zm11.5 6c-1 0-2 1-2 2v7h-5v-13h5V10s1.6-1.5 4-1.5c3 0 5 2.2 5 6.3v6.7h-5v-7c0-1-1-2-2-2z'/>
                           </svg>
                        </div>
                        <span>LinkedIn</span>
                     </div>
                  </a>
                  <!-- Sharingbutton Reddit -->
                  <a aria-label='Reddit' class='respo-sharing-button__link' expr:href='&quot;https://reddit.com/submit/?url=&quot; + data:post.canonicalUrl + &quot;&amp;resubmit=true&amp;title=&quot; + data:post.title' rel='noopener' target='_blank' title='Share on Reddit'>
                     <div class='respo-sharing-button respo-sharing-button--reddit'>
                        <div aria-hidden='true' class='respo-sharing-button__icon'>
                           <svg viewBox='0 0 24 24'>
                              <path d='M24 11.5c0-1.65-1.35-3-3-3-.96 0-1.86.48-2.42 1.24-1.64-1-3.75-1.64-6.07-1.72.08-1.1.4-3.05 1.52-3.7.72-.4 1.73-.24 3 .5C17.2 6.3 18.46 7.5 20 7.5c1.65 0 3-1.35 3-3s-1.35-3-3-3c-1.38 0-2.54.94-2.88 2.22-1.43-.72-2.64-.8-3.6-.25-1.64.94-1.95 3.47-2 4.55-2.33.08-4.45.7-6.1 1.72C4.86 8.98 3.96 8.5 3 8.5c-1.65 0-3 1.35-3 3 0 1.32.84 2.44 2.05 2.84-.03.22-.05.44-.05.66 0 3.86 4.5 7 10 7s10-3.14 10-7c0-.22-.02-.44-.05-.66 1.2-.4 2.05-1.54 2.05-2.84zM2.3 13.37C1.5 13.07 1 12.35 1 11.5c0-1.1.9-2 2-2 .64 0 1.22.32 1.6.82-1.1.85-1.92 1.9-2.3 3.05zm3.7.13c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm9.8 4.8c-1.08.63-2.42.96-3.8.96-1.4 0-2.74-.34-3.8-.95-.24-.13-.32-.44-.2-.68.15-.24.46-.32.7-.18 1.83 1.06 4.76 1.06 6.6 0 .23-.13.53-.05.67.2.14.23.06.54-.18.67zm.2-2.8c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm5.7-2.13c-.38-1.16-1.2-2.2-2.3-3.05.38-.5.97-.82 1.6-.82 1.1 0 2 .9 2 2 0 .84-.53 1.57-1.3 1.87z'/>
                           </svg>
                        </div>
                        <span>Reddit</span>
                     </div>
                  </a>
                  <!-- Sharingbutton XING -->
                  <a aria-label='XING' class='respo-sharing-button__link' expr:href='&quot;https://www.xing.com/app/user?op=share;url=&quot; + data:post.canonicalUrl + &quot;;title=&quot; + data:post.title' rel='noopener' target='_blank' title='Share on XING'>
                     <div class='respo-sharing-button respo-sharing-button--xing'>
                        <div aria-hidden='true' class='respo-sharing-button__icon'>
                           <svg viewBox='0 0 24 24'>
                              <path d='M10.2 9.7l-3-5.4C7.2 4 7 4 6.8 4h-5c-.3 0-.4 0-.5.2v.5L4 10 .4 16v.5c0 .2.2.3.4.3h5c.3 0 .4 0 .5-.2l4-6.6v-.5zM24 .2l-.5-.2H18s-.2 0-.3.3l-8 14v.4l5.2 9c0 .2 0 .3.3.3h5.4s.3 0 .4-.2c.2-.2.2-.4 0-.5l-5-8.8L24 .7V.2z'/>
                           </svg>
                        </div>
                        <span>XING</span>
                     </div>
                  </a>
                  <!-- Sharingbutton WhatsApp -->
                  <a aria-label='WhatsApp' class='respo-sharing-button__link' data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%3A%20&quot; + data:post.canonicalUrl' rel='noopener' target='_blank' title='Share on WhatsApp'>
                     <div class='respo-sharing-button respo-sharing-button--whatsapp'>
                        <div aria-hidden='true' class='respo-sharing-button__icon'>
                           <svg viewBox='0 0 24 24'>
                              <path d='M20.1 3.9C17.9 1.7 15 .5 12 .5 5.8.5.7 5.6.7 11.9c0 2 .5 3.9 1.5 5.6L.6 23.4l6-1.6c1.6.9 3.5 1.3 5.4 1.3 6.3 0 11.4-5.1 11.4-11.4-.1-2.8-1.2-5.7-3.3-7.8zM12 21.4c-1.7 0-3.3-.5-4.8-1.3l-.4-.2-3.5 1 1-3.4L4 17c-1-1.5-1.4-3.2-1.4-5.1 0-5.2 4.2-9.4 9.4-9.4 2.5 0 4.9 1 6.7 2.8 1.8 1.8 2.8 4.2 2.8 6.7-.1 5.2-4.3 9.4-9.5 9.4zm5.1-7.1c-.3-.1-1.7-.9-1.9-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-.9 1.1-.2.2-.3.2-.6.1s-1.2-.5-2.3-1.4c-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6s.3-.3.4-.5c.2-.1.3-.3.4-.5.1-.2 0-.4 0-.5C10 9 9.3 7.6 9 7c-.1-.4-.4-.3-.5-.3h-.6s-.4.1-.7.3c-.3.3-1 1-1 2.4s1 2.8 1.1 3c.1.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.3.2-.7.2-1.2.2-1.3-.1-.3-.3-.4-.6-.5z'/>
                           </svg>
                        </div>
                        <span>WhatsApp</span>
                     </div>
                  </a>
                  <!-- Sharingbutton Hacker News -->
                  <a aria-label='Hacker News' class='respo-sharing-button__link' expr:href='&quot;https://news.ycombinator.com/submitlink?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title' rel='noopener' target='_blank' title='Share on Hacker News'>
                     <div class='respo-sharing-button respo-sharing-button--hackernews'>
                        <div aria-hidden='true' class='respo-sharing-button__icon'>
                           <svg viewBox='0 0 140 140'>
                              <path d='M60.94 82.314L17 0h20.08l25.85 52.093c.397.927.86 1.888 1.39 2.883.53.994.995 2.02 1.393 3.08.265.4.463.764.596 1.095.13.334.262.63.395.898.662 1.325 1.26 2.618 1.79 3.877.53 1.26.993 2.42 1.39 3.48 1.06-2.254 2.22-4.673 3.48-7.258 1.26-2.585 2.552-5.27 3.877-8.052L103.49 0h18.69L77.84 83.308v53.087h-16.9v-54.08z' fill-rule='evenodd'/>
                           </svg>
                        </div>
                        <span>Hacker News</span>
                     </div>
                  </a>
                  <!-- Sharingbutton VK -->
                  <a aria-label='VK' class='respo-sharing-button__link' expr:href='&quot;https://vk.com/share.php?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.canonicalUrl' rel='noopener' target='_blank' title='Share on VK'>
                     <div class='respo-sharing-button respo-sharing-button--vk'>
                        <div aria-hidden='true' class='respo-sharing-button__icon'>
                           <svg viewBox='0 0 24 24'>
                              <path d='M21.547 7h-3.29a.743.743 0 0 0-.655.392s-1.312 2.416-1.734 3.23C14.734 12.813 14 12.126 14 11.11V7.603A1.104 1.104 0 0 0 12.896 6.5h-2.474a1.982 1.982 0 0 0-1.75.813s1.255-.204 1.255 1.49c0 .42.022 1.626.04 2.64a.73.73 0 0 1-1.272.503 21.54 21.54 0 0 1-2.498-4.543.693.693 0 0 0-.63-.403h-2.99a.508.508 0 0 0-.48.685C3.005 10.175 6.918 18 11.38 18h1.878a.742.742 0 0 0 .742-.742v-1.135a.73.73 0 0 1 1.23-.53l2.247 2.112a1.09 1.09 0 0 0 .746.295h2.953c1.424 0 1.424-.988.647-1.753-.546-.538-2.518-2.617-2.518-2.617a1.02 1.02 0 0 1-.078-1.323c.637-.84 1.68-2.212 2.122-2.8.603-.804 1.697-2.507.197-2.507z'/>
                           </svg>
                        </div>
                        <span>VK</span>
                     </div>
                  </a>
                  <!-- Sharingbutton Telegram -->
                  <a aria-label='Telegram' class='respo-sharing-button__link' expr:href='&quot;https://telegram.me/share/url?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.canonicalUrl' rel='noopener' target='_blank' title='Share on Telegram'>
                     <div class='respo-sharing-button respo-sharing-button--telegram'>
                        <div aria-hidden='true' class='respo-sharing-button__icon'>
                           <svg viewBox='0 0 24 24'>
                              <path d='M.707 8.475C.275 8.64 0 9.508 0 9.508s.284.867.718 1.03l5.09 1.897 1.986 6.38a1.102 1.102 0 0 0 1.75.527l2.96-2.41a.405.405 0 0 1 .494-.013l5.34 3.87a1.1 1.1 0 0 0 1.046.135 1.1 1.1 0 0 0 .682-.803l3.91-18.795A1.102 1.102 0 0 0 22.5.075L.706 8.475z'/>
                           </svg>
                        </div>
                        <span>Telegram</span>
                     </div>
                  </a>
                  <!-- Sharingbutton Odnoklassniki -->
                  <a aria-label='Odnoklassniki' class='respo-sharing-button__link' expr:href='&quot;https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&amp;st.title=&quot; + data:post.title + &quot;&amp;st.shareUrl=&quot; + data:post.canonicalUrl' rel='noopener' target='_blank' title='Share on Odnoklassniki'>
                     <div class='respo-sharing-button respo-sharing-button--okru'>
                        <div aria-hidden='true' class='respo-sharing-button__icon'>
                           <svg viewBox='0 0 24 24'>
                              <path d='M17.83,12.74C17.55,12.17 16.76,11.69 15.71,12.5C14.28,13.64 12,13.64 12,13.64C12,13.64 9.72,13.64 8.29,12.5C7.24,11.69 6.45,12.17 6.17,12.74C5.67,13.74 6.23,14.23 7.5,15.04C8.59,15.74 10.08,16 11.04,16.1L10.24,16.9C9.1,18.03 8,19.12 7.25,19.88C6.8,20.34 6.8,21.07 7.25,21.5L7.39,21.66C7.84,22.11 8.58,22.11 9.03,21.66L12,18.68C13.15,19.81 14.24,20.9 15,21.66C15.45,22.11 16.18,22.11 16.64,21.66L16.77,21.5C17.23,21.07 17.23,20.34 16.77,19.88L13.79,16.9L13,16.09C13.95,16 15.42,15.73 16.5,15.04C17.77,14.23 18.33,13.74 17.83,12.74M12,4.57C13.38,4.57 14.5,5.69 14.5,7.06C14.5,8.44 13.38,9.55 12,9.55C10.62,9.55 9.5,8.44 9.5,7.06C9.5,5.69 10.62,4.57 12,4.57M12,12.12C14.8,12.12 17.06,9.86 17.06,7.06C17.06,4.27 14.8,2 12,2C9.2,2 6.94,4.27 6.94,7.06C6.94,9.86 9.2,12.12 12,12.12Z'/>
                           </svg>
                        </div>
                        <span>OK</span>
                     </div>
                  </a>
                  <!-- Sharingbutton Line -->
                  <a aria-label='Line' class='respo-sharing-button__link' expr:href='&quot;https://timeline.line.me/social-plugin/share?url=&quot; + data:post.canonicalUrl' rel='noopener' target='_blank' title='Share on Line'>
                     <div class='respo-sharing-button respo-sharing-button--line'>
                        <div aria-hidden='true' class='respo-sharing-button__icon'>
                           <svg viewBox='0 0 24 24'>
                              <path d='M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314'/>
                           </svg>
                        </div>
                        <span>Line</span>
                     </div>
                  </a>
                  <div class='clear'/>
</div>

Untuk pengguna template Viomagz, simpan kode diatas ini setelah kode
<p class='share-this-pleaseeeee'><b:switch var='data:blog.locale'><b:case value='id'/>Bagikan Artikel ini<b:default/>Share this post</b:switch></p>
</div>
Atau seperti pada contoh gambar dibawah ini
cara mudah pasang icon share di bawah postingan


3. Terakhir, Save Template dan lihat hasilnya.


Rekomendasi untuk Anda yang ingin memasang tombol share / share button media sosial pihak ketiga, silakan baca 5 Social Share Buttons Terbaik Untuk Blogger [Blogspot] 2020


Demikian tutorial kali ini tentang Cara Memasang Tombol Share / tombol berbagi media sosial yang ringan dan responsive dengan Icon SVG. Semoga bermanfaat. Jika ada pertanyaan atau ada kode yang tidak work, silakan beritahu admin dikolom komentar dibawah. Terima kasih.
Load Comments
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parse Box

strong em u strike
pre code pre code spoiler
embed