Cara Buat Tombol Share Semua Sosial Media Lengkap di Blog

Cara Buat Tombol Share Semua Sosial Media Lengkap di Blog

Cara Buat Tombol Share Semua Sosial Media Lengkap di Blog. Pasang Tombol Share All Social Media di Blog yang Responsive, Ringan, Fast Loading, Simple dan Keren. Kesempatan ini saya akan memberikan tutorial memasang tombol Share Elegan, Simple dan Keren di Postingan Blog tanpa tambahan widget dari luar.

Fitur dari tombol Share ini sudah didesain responsive, dan untuk Icon dari Social Medianya sudah menggunakan SVG, yang tentunya kalian sudah tahu kelebihan dari Icon SVG, diantaranya membuat loading blog menjadi lebih cepat, dan masih banyak lagi.

Untuk jumlah Social Media yang terdapat dalam tombol share ini yaitu ada 16 buah Social Media, Apa saja itu?

  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

Oke Langsung simak tutorialnya dibawah ini.

Cara Pasang Lengkap Tombol Share All Social Media di Blog

  1. Masuk ke Blogger, masuk ke menu TEMA, lalu klik EDIT HTML.
  2. Kita akan memasang Kode HTML Share Social Medianya, berikut ini kodenya.
  3. <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>
    ~ Untuk template Viomagz, Silakan cari code <div id='share'> HAPUS SEMUA termasuk yang ada didalamnya, kemudian Ganti dengan kode share social diatas. Sebelum
    
    <div id='share-container'>
    <div class='label-line-c'>
    <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 id='share'>
            ... <!-- Hapus semua yang di dalam sini -->
        </div>
    </div>
    </div>
    
    Sesudah
    
    <div id='share-container'>
    <div class='label-line-c'>
    <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 class='respo-sharing'>
     ...<!-- Kode Sosial Media yang baru -->
    </div>
    </div>
    </div>
    
    ~Untuk template Lain, Silakan cari <data:post.body/> (Pilih yang kedua). Copy Kode share sosial diatas, Pastekan dibawah code yang dicari tadi.
    Sesudah
    
    <data:post.body/>
    <div class='respo-sharing'>
     ...<!-- Kode Sosial Media yang baru -->
    </div>
    
  4. Tambahkan Kode CSS dibawah ini diATAS ]]></b:skin> atau </style>.
  5. 
    /* Share Button | Mediaachmad.com */
    .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%;}
    
  6. Simpan Template, dan lihat hasilnya.

Untuk Demonya, kalian bisa cek tombol share dibawah postingan ini

Mungkin itu yang dapat saya sampaikan tentang Cara Pasang Lengkap Tombol Share All Social Media di Blog sekian dan terima kasih.

Cara Buat Tombol Share Semua Sosial Media Lengkap di Blog
Wahyu Achmad
Her Blue Sky

Postingan Terkait

4 komentar

  1. Min tutor bikin tampilan homepage kaya blog ini

    BalasHapus
    Balasan
    1. Ya.. nanti kedepan akan saya buat tutorialnya.. di tunggu saja gan.. 😁

      Hapus
    2. Buat yang kayak igniplex.blogspot.com dong min hehe

      Hapus
    3. mau saya buat berbeda gan

      Hapus

Posting Komentar