Cara Terbaru Membuat Tombol Share Super Lengkap Di Bawah Postingan Blogger Dengan Mudah - Lapak Info
News Update
Loading...

Saturday, 2 May 2020

Cara Terbaru Membuat Tombol Share Super Lengkap Di Bawah Postingan Blogger Dengan Mudah

Lapakinfo.net
Lapakinfo.net - Pada kesempatan kali ini saya membagikan sebuah artikel Cara Membuat Tombol Share Super Lengkap Di Bawah Postingan Blogger, membuat tombol share sebenarnya salah satu cara untuk memperbanyak pembaca di artikel kita. Dengan memasang tombol share di blog kita, pengunjung yang sudah membaca artikel kita itu sangat mudah membagikannya ke social media atau ke orang lain.

Memasang tombol share di bawah postingan blog ialah langkah yang tepat, selain mempermudah pembaca dalam berbagi informasi juga sangat baik buat trafik blog kita apalagi untuk promosi. Dengan cara ini kita bisa memanfaatkan pihak ketiga dalam berbagi informasi yang kita punya. Bahkan dengan memasang tombol share di bawah postingan blog itu sangat di sarankan sekali, karena sangat baik buat blog kita.

Cara Membuat Tombol Share Super Lengkap Di Bawah Postingan Blogger

1. Buka Blog Kalian
2. Pilih Tema lalu pilih Edit HTML
3. Cari kode /* Share Button */ yang sama atau mirip seperti di bawah ini

/* Share button */

.share-this-pleaseeeee {

 display: inline-block;

 margin: 0;

 color: $(label.color);;

 text-transform: uppercase;

 font-size: 16px;

 background: $(label.bg.color);

 z-index: 1;

 position: relative;

 padding: 0 10px;

 font-weight: bold;

}

#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 i {

   position: relative;

   top: 50%;

   transform: translateY(-50%);

}

.facebook {

  background: #3b5998;

}

.twitter {

   background: #55acee;

}

.linkedin {

   background: #0077b5;

}

.pinterest {

   background: #cb2027;

}

.whatsapp {

   background: #25d366;

}

4. Hapus semua kode di atas lalu ganti dengan kode di bawah ini

/* Share button difinmedia */

.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:#40bedf}.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%}

5. Lanjut cari kode <div id='share-container'> seperti di bawah ini kodenya

<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>

<div id='share'>

  <!-- facebook -->

  <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>

  <!-- twitter -->

  <a class='twitter' expr:href='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>

  <a 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' target='_blank'><i class='fa fa-pinterest-p'/></a>

  <a 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'><i aria-hidden='true' class='fa fa-whatsapp'/></a>

</div>

</div>

</b:includable>

      <b:includable id='postsubscribebox' var='post'>

<div class='berlangganan-box'>

 <form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=BlogMasSugeng&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>

 <p>Berlangganan update artikel terbaru via email:</p><p><input class='email-address' name='email' placeholder='Masukan alamat email...' type='text'/></p><input name='uri' type='hidden' value='BlogMasSugeng'/>

 <input name='loc' type='hidden' value='en_US'/>

 <p><input class='submit-email' type='submit' value='Berlangganan'/></p>

 </form>

</div>

6. Jika sudah ketemu hapus semua kode di atas lalu ganti dengan kode di bawah ini

<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>

<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>Lebih Banyak</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>Lebih Sedikit</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 messenger -->

                  <a aria-label='E-Mail' class='respo-sharing-button__link' expr:href='&quot;https://www.facebook.com/dialog/send?app_id=1234567890&amp;link=&quot; + data:post.url + &quot;&amp;redirect_uri=url_laman_thanks&quot;' rel='nofollow noopener' target='_blank' title='Share to Messenger'>

                     <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='M12,2C6.5,2 2,6.14 2,11.25C2,14.13 3.42,16.7 5.65,18.4L5.71,22L9.16,20.12L9.13,20.11C10.04,20.36 11,20.5 12,20.5C17.5,20.5 22,16.36 22,11.25C22,6.14 17.5,2 12,2M13.03,14.41L10.54,11.78L5.5,14.41L10.88,8.78L13.46,11.25L18.31,8.78L13.03,14.41Z'/>

                           </svg>

                        </div>

                        <span>Messenger</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 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>

</div>

7. Simpan template kalian dan selesai.

Cara Membuat Tombol Share Super Lengkap Di Bawah Postingan Blogger

Buat kalian yang tidak memakai template Viomagz sesuaikan sendiri kode share tersebut, kode share tersebut berfungsi semua hanya saja saya menggunakan template Viomagz sebagai percobaan.

Sekian dulu untuk postingan Cara Membuat Tombol Share Super Lengkap Di Bawah Postingan Blogger, semoga bermanfaat buat kalian semua. Jika ada pertanyaan silahkan bertanya di kolom komentar di bawah ini. Terimakaish atas kunjungannya
Add your opinion
Berikan Komentar
Notification
This is just an example, you can fill it later with your own note.
Done