Cara Mudah Membuat Floating Share Button di Blogger
.png){kind=small}
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='"https://wa.me/?text=*" + data:post.title + "*%0A%0A" + "Baca selengkapnya:%0A" + 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='"https://www.facebook.com/sharer.php?u=" + 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='"https://twitter.com/share?url=" + 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>.png)
