Add Floating Social Media Sharing Buttons Below Blogger Postal Service Titles – Helplogger

It is becoming increasingly of import to brand our posts appreciated in addition to shared on social networks in addition to i of the best ways to instruct traffic to our weblog or site in addition to boost sharing stats is to add together social sharing buttons.

In this tutorial nosotros volition run across how to add together a floating social media sharing bar below the championship of Blogger posts , hence when a reader scrolls downward the page , he volition nonetheless hold upward able to run across the sharing buttons without having to scroll dorsum to the top.

Adding the below jQuery script volition brand the buttons float inward a fixed seat equally shortly equally they achieve “the top” of the page. By scrolling dorsum , the buttons volition supply to their initial position. The social sharing bar includes buttons for Facebook , Twitter , Google+ , in addition to Pinterest.

Social Media Sharing Buttons below Blogger Post Title

1. From the Blogger Dashboard , become to “Template” in addition to click on the “Edit HTML” button:
   
2. Click anywhere within the code expanse in addition to press the CTRL + F keys to opened upward the search box. Once you lot run across the search box , type the tag within the search box in addition to hitting Enter to respect it.
   
3. Just inward a higher identify add together this script:
   

4. Now earlier the ]]> tag (press CTRL + F to respect it) add together the next CSS styles:
   

   #floating-social-buttons {
   padding: 6px 0px 12px;
   position: absolute;
   background: #F6F6F6;
   border-bottom: 1px corporation #DEDEDE;
   width: 550px;
   height: 18px;
   z-index: 99;
   }
   .floating-social-buttons {
   margin-left: 5px !important;
   }
   .floating-social-buttons li {
   float: left;
   margin-left: 5px;
   list-style:none;
   }

   To alter the width of the bar , modify the 550px values inward red. Note that this value also appears inward the script which also needs to hold upward modified

5. Finally , only below the minute
   (press CTRL + F in addition to hitting Enter twice to respect the minute one) add together the next code:

6. Tweet
8. Pin It