a:link{color:#ff6e00;text-decoration:none} a:visited{color:#0b2d4b;text-decoration:none} a:hover{color:#0b2d4b;text-decoration:none} -->

Cara Mudah Membuat Tombol Share Media Sosial di Blogger, Semua Sosmed Gan!

Cara Mudah Membuat Tombol Share Media Sosial di Blogger, Semua Sosmed Gan!
Monday, April 6, 2020
cara-membuat-tombol-share-semua-media-sosial-di-blogger
Cara Mudah Membuat Tombol Share Media Sosial di Blogger - Tombol share dalan sebuah blog menjadi satu hal yang penting. Selain untuk memperlengkap, juga berfungsi untuk pengunjung blog kamu, apabila ingin membagikan artikel yang kamu buat, di media sosial nya masing-masing.

Bagi pengguna CMS WordPress, untuk memasang tombol share media sosial sudah di sediakan nya sebuah plugin, jadi tidak perlu repot-repot untuk memasang secara manual. Berbeda dengan pengguna CMS Blogger, yang mengharuskan untuk memasang secara manual, dengan menempatkan kode script di dalam template, jika masih menggunakan template bawaan Blogger.

Buat kamu yang ingin memasang Fitur Tombol Share Social Media di dalam blog nya masing-masing, namun tidak tau cara nya, tidak perlu khawatir! So, disini admin Blog Ajaib akan membagikan tutorial cara membuat nya.

Tombol share media sosial yang akan admin bagikan sudah di desain responsive dan sudah di percantik dengan icon SVG. Sehingga akan membuat tampilan blog kamu semakin kece!

Adapun jenis media sosial yang terdapat pada tombol ini. Antara lain;
  1. Facebook
  2. Twitter
  3. Pinterest
  4. Tumblr
  5. Mix
  6. E-mail
  7. Gmail
  8. Linkedln
  9. Reddit
  10. XING
  11. WhatsApp
  12. Hacker News
  13. VK
  14. Telegram
  15. OK
  16. Line

Cara Membuat Tombol Share Social Media di Blogger

1. Masuk ke akun Blogger > Tema > Edit HTML.

2. Silahkan kamu cari dan temukan kode </b:skin> atau </style>. 

3. Jika sudah ketemu, copy dan pastekan kode script Style CSS di bawah ini, tepat di atas salah satu kode tadi.

/* Share Button | Blogajaib.xyz */
.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__link:hover{}
.respo-sharing-button__icon svg{width:1.2em;height:1.2em;margin-right:0.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:normal}
.respo-sharing-button span{color:#ffffff;font-weight:600;text-overflow: ellipsis;transition: initial;overflow: hidden;white-space: nowrap;width: 100%;}
4. Terakhir, silahkan masukan markup kode pemanggil di bawah ini, untuk penempatannya, silahkan kamu sesuaikan sendiri dan sesuai selera masing-masing.

<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>
</div>
5. Simpan Tema.

Nah, itu tadi artikel mengenai cara memasang tombol share media sosial di blogger yang sudah admin siapkan untuk kamu. Selamat mencoba ya!

Berlangganan update artikel terbaru via email:

0 Response to "Cara Mudah Membuat Tombol Share Media Sosial di Blogger, Semua Sosmed Gan!"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel