Add Cool Floating Social Media Share Buttons For Blogger/BlogSpot

Hello Guys In this interesting article today, we will know how you can add Floating Social Media Buttons to Blogger /Blogspot.

We use many types of widgets to make our blogger / Blogspot blog attractive and stylish. But many widgets are not good, so many widgets are not responsive.

But today the floating Blogger social media buttons widget that we will talk about is fully stylish and responsive.

So don't waste time let's start.

How to Add Floating Social Media Buttons To Blogger/Blogspot

These blogger social button widgets will easily show on all your blogger posts.

You can follow the following step to add it to your Blogger /Blogspot.

#Step1: First Login to your Blogger Account.

#Step2: Now Click on the Theme.

#Step3: Then Click on Customize and click on Edit HTML.

#Step4: (Now HTML Code Editor will open in front of you). In which you Click and Press Ctrl + F from your keyboard.

#Step5: Find </head> Tag

#Step6: Paste the below given CSS over </head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

<style>

.floating-social {

  position: fixed;

  top: 50%;

  -webkit-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

}

.floating-social a {

  display: block;

  text-align: center;

  padding: 16px;

  transition: all 0.3s ease;

  color: white;

  font-size: 20px;

}

.floating-social a:hover {

  background-color: #000;

}

.facebook {

  background: #3B5998;

  color: white;

}

.twitter {

  background: #55ACEE;

  color: white;

}

.linkedin {

  background: #007bb5;

  color: white;

}

.youtube {

  background: #bb0000;

  color: white;

}

</style>

#Step7: Now you  Press Ctrl + F from your keyboard.

#Step8: Find </body> Tag

#Step9: Paste the below given  HTML Code over </body>

  <div class="floating-social">

  <a href="Your Facebook id URL" class="facebook"><i class="fa fa-facebook"></i></a> 

  <a href="Your Twitter id URL"  class="twitter"><i class="fa fa-twitter"></i></a> 

  <a href="Your Linkdin id URL"  class="linkedin"><i class="fa fa-linkedin"></i></a>

  <a href="Your Youtube URL" class="youtube"><i class="fa fa-youtube"></i></a> 

</div>

#Step10: Click on Save

How to Add Floating Social Share Media Button To Blogger/Blogspot

If you want to add a social share button in your blogger then follow the step given below.

Step 1: First login your Blogger Account

Step 2: Now you Click on Layout

(When you click on Layout, the Blogger Layout window will open in front of you.)

Step 3: click on the Add Gadget of that section.

Step 4: Now you Click on HTML / JavaScript

Step 5: Then paste the back to top button widget code in HTML / JavaScript.

<style>

@media screen and (max-width: 980px) {

    .a2a_floating_style.a2a_vertical_style { display: none; }

}

</style>

<script async src="https://static.addtoany.com/menu/page.js"></script>

<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style" style="left:0px; top:150px;">

    <a class="a2a_button_facebook"></a>

    <a class="a2a_button_twitter"></a>

    <a class="a2a_button_pinterest"></a>

    <a class="a2a_dd" href="https://www.addtoany.com/share"></a>

</div>

#Step10: Click on Save

Also Read: Featured Posts Widget For Blogger 

Also Read: Blogger SEO: A Complete Guide