×

Owner / Author / Admin / etc

    Rahman NM    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya."

Cara Membuat / Memasang Tombol Share All Social Media

February 26, 2020   • Comment

Tombol share postingan merupakan hal penting yang harus dimiliki bagi setiap pemilik website, karena dengan itu memudahkan pengunjung ataupun pemilik website itu membagikan artikelnya hanya dengan menekan tombol share tersebut.

Sebenarnya setiap website itu sudah memiliki tombol share yang tersedia didalam tema mereka, namun mungkin saja hanya memiliki beberapa tombol share yang mengarah ke social media, Misalnya hanya memiliki tombol share untuk Facebook, Whatsapp, Instagram, dan Pinterest. Disini saya akan membagikan tombol share All Social Media, walaupun mungkin saja ada yang tidak ada.

Yuk langsung saja kita ke tutorial cara membuat / memasang tombol share.



Cara Membuat / Memasang Tombol Share All Social Media

1. Pertama, login terlebih dahulu Blogger,
2. Pada dashboard Blogger pilih Tema ⇒ Edit HTML,
3. Kemudian, copy kode CSS dibawah ini dan letakkan tepat diatas kode </b:skin> atau </style>,
/* Share Button All Social Media */
.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. Setelah itu, kamu cari terlebih dahulu kode HTML tombol share template kamu, untuk pengguna viomagz bisa kamu cari kode yang seperti ini <div id='share'> terus hapus semuanya,contohnya seperti dibawah ini,
<!-- HAPUS DARI SINI --> <div id='share'>
.....
.....
.....
.....
</div> <!-- SAMPAI PENUTUP DIV PERTAMA -->
Kemudian ganti dengan kode yang saya sediakan dibawah ini,
<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. Terakhir simpan atau save template tersebut.

Sekian tutorial cara membuat tombol share all social media didalam postingan yang dapat saya bagikan untuk teman teman blogger, jika ada kesalahan atau yang tidak dapat kamu mengerti silahkan berkomentar dibawah, dan Semoga Bermanfaat :D

Creativity of codes and exploiting, with code we can do something fun.
Facebook Instagram Twitter
Show Comments!
Hide comments

0 Response to "Cara Membuat / Memasang Tombol Share All Social Media"

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

© Copyright 2020 Anirock Site - All Rights Reserved Created With