Add Cool Floating Social Media Share Buttons For Blogger/BlogSpot - Do Tech Blog

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.


Social-Media-Share-Button-For-Blogger


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.


Social-button

#Step1: First Login to your Blogger Account.


#Step2: Now Click on the Theme.


blogger theme


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

customize

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>


paste-code

<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>

paste-code

  <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.
social-share-button
social-share-button-for-blogger

Step 1: First login your Blogger Account


Step 2: Now you Click on Layout


blogger-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.


add-gadget


Step 4: Now you Click on HTML / JavaScript


blogger-gadget


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


html-code

<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

No comments :

Post a Comment

;