Hello Guys, Today I am telling you how to add a Floating action Button in a blogger with just the help of HTML and CSS. No Javascript we have used to make a floating button in blogger.
In Earlier Posts, we have seen that how to make a WhatsApp share button in blogger, how to make a telegram share button in blogger, a responsive social share button in blogger etc...
This is the easy method to add a floating button in blogger.
How to Add Floating Action in Blogger in HTML & CSS
Here we have to Follow 5 Steps to Insert a Floating Action Button in blogger:
Step1) Go to the First, Blogger.com dashboard
Step2) Now Just you have to Search </head> tag and Before the </head> tag you have to add this CSS stylesheet link as given below:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Step3) Now Search ]]></b:skin> tag and Paste this css code before the ]]></b:skin> tag
.fab-container{position:fixed;bottom:28px;right:28px;z-index:999;cursor:pointer}.fab-icon-holder{width:50px;height:50px;border-radius:100%;background:#016fb9;box-shadow:0 6px 20px rgba(0,0,0,.2)}.fab-icon-holder i{display:flex;align-items:center;justify-content:center;height:100%;font-style:25px;color:#fff}.fab{width:55px;height:55px;background:#d23f31;transform:rotate(0);transition:all .4s}.fab:hover{transform:rotate(270deg)}.fab-options{list-style-type:none;margin:0;position:absolute;bottom:70px;right:0;opacity:0;transition:all .3s ease;transform:scale(0);transform-origin:80% bottom}.fab-options:hover,.fab:hover+.fab-options{opacity:1;transform:scale(1)}.fab-options .fab-li{display:flex;justify-content:flex-end;padding:5px}.fab-label{padding:2px 5px;align-self:center;user-select:none;white-space:nowrap;border-radius:3px;font-size:16px;background:#666;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.2);margin-right:10px}.floating-link{text-decoration:none}
Step4) Now Search </body> tag and Paste this HTML Code Before </body> tag in blogger.
<div class="fab-container">
<div class="fab fab-icon-holder">
<i class="fa fa-plus"></i>
</div>
<ul class="fab-options">
<li class="fab-li">
<div class="fab-icon-holder">
<a class="floating-link" href="https://facebook.com/blogtriggers"> <i class="fa fa-facebook"></i></a>
</div>
</li>
<li class="fab-li">
<div class="fab-icon-holder">
<a class="floating-link" href="https://instagram.com/blogtriggers"> <i class="fa fa-instagram"></i></a>
</div>
</li>
<li class="fab-li">
<div class="fab-icon-holder">
<a class="floating-link" href="https://instagram.com/blogtriggers"> <i class="fa fa-twitter"></i></a>
</div>
</li>
<li class="fab-li">
<div class="fab-icon-holder">
<a class="floating-link" href="https://linkedin.com/in/blogtriggers"> <i class="fa fa-linkedin"></i></a>
</div>
</li>
</ul>
</div>
Just you have to Replace the Social Link with your Social Media Link
Step5) Now Save your Blogger Theme.
Congratulation you have successfully Insert the Floating Action button in blogger in Just 5 Steps.
Final Verdict
I hope you have successfully inserted the floating action button in blogger. If you Find this post helpful then Please Share it with your friends.
If you face any Problem to insert a floating action button in blogger then join our Telegram group Chat
Link to Telegram Group Chat: Blog Triggers Discussion Group
