Cara Mudah Membuat Floating Share Button di Blogger

Panduan langkah demi langkah membuat floating share button di Blogger untuk meningkatkan interaksi dan berbagi.
Gila Temax
Gila Temax
Tutorial ini kompatibel dengan semua template Blogger.
Table of Contents

Menambahkan Kode HTML

Sisipkan kode HTML setelah tag <data:post.body/> ke dalam template.

<div class="floating_share_button">
  <div class="inner">
    <button aria-label="Share Button" type="button">
      <svg fill="currentColor" viewBox="0 0 24 24"><path d="M21,12L14,5V9C7,10 4,15 3,20C5.5,16.5 9,14.9 14,14.9V19L21,12Z"/></svg>
      <svg fill="currentColor" viewBox="0 0 24 24"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/></svg> 
    </button>

    <ul>
      <li>
        <a aria-label='WhatsApp' class='whatsapp' expr:href='&quot;https://wa.me/?text=*&quot; + data:post.title + &quot;*%0A%0A&quot; + &quot;Baca selengkapnya:%0A&quot; + data:post.url' rel='nofollow noopener' target='_blank'>
          <svg aria-hidden='true' fill='currentColor' viewBox='0 0 24 24'><path d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z'/></svg>
        </a>
      </li>
      <li>
        <a aria-label='Facebook' class='facebook' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow noopener' target='_blank'>
          <svg aria-hidden='true' fill='currentColor' viewBox='0 0 24 24'><path d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z'/></svg>
        </a>
      </li>
      <li>
        <a aria-label='X' class='x' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url' rel='nofollow noopener' target='_blank'>
          <svg aria-hidden='true' fill='currentColor' viewBox='0 0 24 24'><path d='m13.84 10.45 7.23-7.81h-1.75l-6.27 6.77-5.06-6.77H2.05l7.72 10.32L2 21.35h1.75l6.8-7.35 5.5 7.35H22l-8.16-10.91ZM4.62 3.93h2.73l12.07 16.14h-2.73L4.62 3.93Z'/></svg>
        </a>
      </li>
      <li>
        <a aria-label='Copy Link' class='copy_link_button' href='javascript:;'>
          <svg aria-hidden='true' fill='currentColor' viewBox='0 0 24 24'><path d='M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z'/></svg>
          <input aria-label='Link' expr:value='data:post.url' readonly='readonly' type='text'/>
          <span>Tersalin!</span>
        </a>
      </li>
    </ul>
  </div>
</div>

Menambahkan Kode CSS

Sisipkan kode CSS sebelum tag ]]></b:skin> ke dalam template.

/* --- Floating Share Button --- */
.floating_share_button {
  background-color:#8e01ff;
  border-radius:24px 0 0 24px;
  color:#fff;
  z-index:99;
  transform:translate(0,-50%);
  position:fixed;
  top:50%;
  right:0;
}
.floating_share_button .inner {
  display:flex;
  flex-direction:column;
  gap:4px;
}
.floating_share_button button {
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
}
.floating_share_button button svg:last-child {
  display:none;
}
body.fsb .floating_share_button button svg:first-child {
  display:none;
}
body.fsb .floating_share_button button svg:last-child {
  display:block;
}
.floating_share_button ul {
  display:none;
  margin:0;
  padding:0 0 12px;
}
body.fsb .floating_share_button ul {
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:8px;
}
.floating_share_button ul li {
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
}
.floating_share_button ul li a {
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid;
  border-color:inherit;
  border-radius:50%;
  color:inherit;
  width:24px;
  height:24px;
}
.floating_share_button ul li svg {
  width:14px;
  height:14px;
}
.floating_share_button ul li .copy_link_button span {
  display:flex;
  align-items:center;
  background-color:#8e01ff;
  border-radius:100px;
  font-size:10px;
  font-weight:700;
  color:#fff;
  text-transform:uppercase;
  white-space:nowrap;
  height:24px;
  padding:0 12px;
  opacity:0;
  visibility:hidden;
  transition:all .2s cubic-bezier(0,0,0,1);
  position:absolute;
  right:36px;
}
.floating_share_button ul li .copy_link_button.active span {
  opacity:1;
  visibility:visible;
}
.floating_share_button ul li input {
  position:absolute;
  margin:0;
  padding:0;
  outline:0;
  border:0;
  width:1px;
  height:0;
  opacity:0;
}

Menambahkan Kode JavaScript

Sisipkan kode JavaScript sebelum tag </body> ke dalam template.

<script>
// Floating Share Button
function floatingShareButton() {
  const shareButton = document.querySelector('.floating_share_button button');
  const bodyElemen = document.body;

  shareButton.addEventListener('click', function() {
    bodyElemen.classList.toggle('fsb');
  });

  function removeQueryString(url) {
    if (url.indexOf('?') !== -1) {
      return url.split('?')[0];
    }
    return url;
  }

  let animationTimeout;

  const copyButtons = document.querySelectorAll('.copy_link_button');

  copyButtons.forEach(button => {
    button.addEventListener('click', function () {
      const urlInput = document.querySelector('.floating_share_button input');
      if (!urlInput) return;

      const url = urlInput.value;
      const cleanedUrl = removeQueryString(url);

      urlInput.value = cleanedUrl;
      urlInput.select();

      try {
        document.execCommand('copy');
      } catch (err) {
        console.error('Gagal menyalin teks:', err);
      }

      clearTimeout(animationTimeout);

      if (!button.classList.contains('active')) {
        button.classList.add('active');
        animationTimeout = setTimeout(() => {
          button.classList.remove('active');
        }, 2000);
      } else {
        button.classList.remove('active');
        setTimeout(() => {
          button.classList.add('active');
          animationTimeout = setTimeout(() => {
            button.classList.remove('active');
          }, 2000);
        }, 100);
      }
    });
  });
}
floatingShareButton();
</script>
Gila Temax
Gila Temax
Front-end web developer at Gila Temax.
Follow me on: Instagram
Postingan Terkait
  • Cara Mudah Membuat Floating Share Button di Blogger
  • Cara Mudah Membuat Floating Share Button di Blogger
  • Cara Mudah Membuat Floating Share Button di Blogger
  • Cara Mudah Membuat Floating Share Button di Blogger
  • Cara Mudah Membuat Floating Share Button di Blogger
  • Cara Mudah Membuat Floating Share Button di Blogger
1 komentar
Admin berhak menghapus komentar Anda apabila mengandung kata-kata yang tidak pantas, mohon untuk berkomentar dengan bijak.
Batal
Comment Author Avatar
Ahmad Nur Kabib
Mantapppp jiwa
Balas