How to add Stylish floating share buttons to Blogger website? (Using Code Snippets)
Most of the modern Blogger templates comes with beautiful inline share buttons but it doesn’t have floating share buttons. So, in this article, I will Show you how you can add a responsive Social share button to your Blogger & WordPress Website.
Steps to Add a Floating share button to Blogger
To add a Floating Share Button in Blogger, follow these below steps.
Login to your Blogger Dashboard and click on the Theme Option.
Now in the drop down menu, click on the Edit HTML option to edit the theme code.
Now scroll down to the end of the theme code where you will find the closing body tag.
Paste the code just above it and save the changes.
<!-- Floating Social Share buttons-->
<style>
.custom-toast {
font-family: "Roboto", sans-serif;
background: #222;
color: #fff;
width: fit-content;
border-radius: 8px;
padding: 12px 32px;
position: fixed;
bottom: 40px;
left: 50%;
transform: translate(-50%, 100px);
opacity: 0;
transition: all 300ms ease;
z-index: 500;
}
.custom-social-share a { text-decoration: none; padding: 10px 15px;}
.custom-social-share a svg { height: 32px; transition: all 300ms ease; fill: #48525c;}
.custom-social-share a:hover svg { transform: scale(1.2);}
.custom-toast.active { opacity: 1; transform: translate(-50%, 0);}
@media (max-width: 900px) {
.custom-social-share {
left: 50%;
transform: translateX(-50%);
top: unset;
bottom: 0;
flex-direction: row;
width: 100%;
justify-content: space-around;
border-top: 2px solid;
border-radius: 0px;
}
}
</style>
<div class='custom-social-share'>
<a aria-label='Share on Facebook' class='custom-facebook-btn' href='#' target='_blank'>
<!-- Facebook SVG Icon -->
<svg height='32' viewBox='0 0 32 32' width='32' xmlns='http://www.w3.org/2000/svg'><path d='M16,2c-7.732,0-14,6.268-14,14,0,6.566,4.52,12.075,10.618,13.588v-9.31h-2.887v-4.278h2.887v-1.843c0-4.765,2.156-6.974,6.835-6.974,.887,0,2.417,.174,3.043,.348v3.878c-.33-.035-.904-.052-1.617-.052-2.296,0-3.183,.87-3.183,3.13v1.513h4.573l-.786,4.278h-3.787v9.619c6.932-.837,12.304-6.74,12.304-13.897,0-7.732-6.268-14-14-14Z'/></svg>
</a>
<a aria-label='Share on Twitter' class='custom-twitter-btn' href='#' target='_blank'>
<!-- Twitter SVG Icon -->
<svg aria-hidden='true' class='r-4qtqp9 r-yyyyoo r-dnmrzs r-bnwqim r-lrvibr r-m6rgpd r-lrsllp r-1nao33i r-16y2uox r-8kz0gk' viewBox='0 0 24 24'><g><path d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/></g></svg>
</a>
<a aria-label='Share on WhatsApp' class='custom-whatsapp-btn' href='#' target='_blank'>
<!-- WhatsApp SVG Icon -->
<svg height='32' viewBox='0 0 32 32' width='32' xmlns='http://www.w3.org/2000/svg'><path d='M25.873,6.069c-2.619-2.623-6.103-4.067-9.814-4.069C8.411,2,2.186,8.224,2.184,15.874c-.001,2.446,.638,4.833,1.852,6.936l-1.969,7.19,7.355-1.929c2.026,1.106,4.308,1.688,6.63,1.689h.006c7.647,0,13.872-6.224,13.874-13.874,.001-3.708-1.44-7.193-4.06-9.815h0Zm-9.814,21.347h-.005c-2.069,0-4.099-.557-5.87-1.607l-.421-.25-4.365,1.145,1.165-4.256-.274-.436c-1.154-1.836-1.764-3.958-1.763-6.137,.003-6.358,5.176-11.531,11.537-11.531,3.08,.001,5.975,1.202,8.153,3.382,2.177,2.179,3.376,5.077,3.374,8.158-.003,6.359-5.176,11.532-11.532,11.532h0Zm6.325-8.636c-.347-.174-2.051-1.012-2.369-1.128-.318-.116-.549-.174-.78,.174-.231,.347-.895,1.128-1.098,1.359-.202,.232-.405,.26-.751,.086-.347-.174-1.464-.54-2.788-1.72-1.03-.919-1.726-2.054-1.929-2.402-.202-.347-.021-.535,.152-.707,.156-.156,.347-.405,.52-.607,.174-.202,.231-.347,.347-.578,.116-.232,.058-.434-.029-.607-.087-.174-.78-1.88-1.069-2.574-.281-.676-.567-.584-.78-.595-.202-.01-.433-.012-.665-.012s-.607,.086-.925,.434c-.318,.347-1.213,1.186-1.213,2.892s1.242,3.355,1.416,3.587c.174,.232,2.445,3.733,5.922,5.235,.827,.357,1.473,.571,1.977,.73,.83,.264,1.586,.227,2.183,.138,.666-.1,2.051-.839,2.34-1.649,.289-.81,.289-1.504,.202-1.649s-.318-.232-.665-.405h0Z' fill-rule='evenodd'/></svg>
</a>
<a aria-label='Share on Telegram' class='custom-telegram-btn' href='#' target='_blank'>
<!-- Telegram SVG Icon -->
<svg data-name='Layer 2' fill='#000000' id='Layer_2' stroke='#000000' stroke-width='1.9200000000000004' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'><g id='SVGRepo_bgCarrier' stroke-width='0'/><g id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'/><g id='SVGRepo_iconCarrier'><defs><style>.cls-1{fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;}</style></defs><path class='cls-1' d='M40.83,8.48c1.14,0,2,1,1.54,2.86l-5.58,26.3c-.39,1.87-1.52,2.32-3.08,1.45L20.4,29.26a.4.4,0,0,1,0-.65L35.77,14.73c.7-.62-.15-.92-1.07-.36L15.41,26.54a.46.46,0,0,1-.4.05L6.82,24C5,23.47,5,22.22,7.23,21.33L40,8.69a2.16,2.16,0,0,1,.83-.21Z'/></g></svg>
</a>
<a aria-label='Copy link' class='custom-share-btn' href='#' target='_blank'>
<!-- Copy SVG Icon -->
<svg fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g id='SVGRepo_bgCarrier' stroke-width='0'/><g id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'/><g id='SVGRepo_iconCarrier'> <path clip-rule='evenodd' d='M19.5 16.5L19.5 4.5L18.75 3.75H9L8.25 4.5L8.25 7.5L5.25 7.5L4.5 8.25V20.25L5.25 21H15L15.75 20.25V17.25H18.75L19.5 16.5ZM15.75 15.75L15.75 8.25L15 7.5L9.75 7.5V5.25L18 5.25V15.75H15.75ZM6 9L14.25 9L14.25 19.5L6 19.5L6 9Z' fill='#000000' fill-rule='evenodd'/> </g></svg>
</a>
</div>
<div class='custom-toast'>Link Copied</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const facebookBtn = document.querySelector(".custom-social-share .custom-facebook-btn");
const twitterBtn = document.querySelector(".custom-social-share .custom-twitter-btn");
const whatsAppBtn = document.querySelector(".custom-social-share .custom-whatsapp-btn");
const telegramBtn = document.querySelector(".custom-social-share .custom-telegram-btn");
const shareBtn = document.querySelector(".custom-social-share .custom-share-btn");
const toast = document.querySelector(".custom-toast");
const url = encodeURIComponent(window.location.href);
const title = encodeURIComponent(document.title);
const shareLink = window.location.href;
facebookBtn.href = `https://www.facebook.com/sharer.php?u=${url}`;
twitterBtn.href = `https://twitter.com/intent/tweet?url=${url}&text=${title}`;
whatsAppBtn.href = `https://api.whatsapp.com/send?text=${title}:${url}`;
telegramBtn.href = `https://t.me/share/url?url=${url}&text=${title}`;
const displayToast = (message) => {
toast.textContent = message;
toast.classList.add("active");
setTimeout(() => {
toast.classList.remove("active");
}, 3000);
};
shareBtn.addEventListener("click", (e) => {
e.preventDefault();
navigator.clipboard
.writeText(shareLink)
.then(() => displayToast("Link copied"))
.catch(() => displayToast("Error copying link"));
});
});
</script>Now Go to the website and refresh the page and you will see that there is a floating share button added to each and every page of your Blogger website.
Note: Change the & to & so that the code will be saved to Blogger website.
You can also limit that and show the share buttons only in the Post page or a particular URL by using the Blogger conditional tag. You can Watch this video on How to Use Blogger conditional tag here (YouTube).
Floating Share button in Wordpress
You can use the Same code in Wordpress Website and display the same floating share button on your WP site as well.
All you have to do is use a code manager plugin where you can paste the code and run the code snippet on your website.
You can use plugins like WP code plugin which let you add all type of codes whether it is HTML, CSS, Javascript or PHP.
You can watch this below video to Learn More.
Conclusion
I hope Now you have learned How to Add a Floating social share button in Blogger Website. If you have any doubt, feel free to ask in the comment section.
If you like this short guide on the floating share button in Blogger, than don’t forget to share this on social media platforms. Thank you.
Read Also: How to add stylish HTML sitemap in Blogger
