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