Add Responsive Social Sharing Button in Blogger Blog | MastFun4u Make Money in Pakistan Add Responsive Social Sharing Button in Blogger Blog « MastFun4u Make Money in Pakistan

Best Online Businesses

12 Mar 2016

Add Responsive Social Sharing Button in Blogger Blog

By           10 Comments     , ,
In order to add social icon in blogger blog displaying in both mobile and computer, follow the following steps. In this way you will be able to show sharing button above the post and below the post moreover you can add any button where you like such as Facebook, Twitter, Pinterest, Print, E-mail, Google Plus, Stumbleupon and much more. This includes whattsapp button as well which will be shown in mobile devices only. Further you can use its affiliation code to get earn with it.
get Social Sharing Icon and earn

How to Add Responsive Social Sharing Icon in Blogger Blog?



  • First of all go to Shareaholic official website.
  • Create a account there by clicking on Sign Up and fill all the required fields.
  • Thereafter visit your website dashboard by going here.
  • Add your site by using Add Site Button as shown below and fill all the data of your blog. after that go to next option. 
Social media icon
  • Here you will have to verify a code. Now click on Get Setup Code and copy the code.
social sharing icon for blogger
social sharing button for blogger

  • Now go to your blogger blog dashboard and click on the Template at right side and then Edit HTML. Thereafter press Ctrl+F in order to find the place where the code has to be pasted. 
  • Now type </Head>  and find it then Paste that code before or above it. as shown below.
social media icon for blogger
  • Now save template. 
  • Then go to shareaholic website and press verify button
  • After verification go to this link and select sharing buttons as shown below.
share icon for blogger
  • This will take you to next screen as shown, 
  • Now customize or design your buttons there and press below button.
Design sharing button own color

create sharing button
  • Now copy the code shown as below.
Code for sharing buttons
  • Then go to your blogger Template > Edit HTML> and Find <data:post.body/> (this may be found two three times, try to use this code with each of them.)
  • If you want to show buttons Above the post title then paste that code above it and if you want icon below post title then paste that code below that. 
  • Save your template.
  • Finally your social sharing icons will be show. Enjoy!

Final Words

I have tried my level best to describe it fully in case of any technical issue feel free to comment below. Add Responsive Social Sharing Button in Blog is very simple as you saw.

10 comments:

  1. SIR MAIN NE DESIGN CHANGE KI HA OR IS K SIDE PER HE BUTTON SHOW HO RAHAY HAIN
    POST KA NICHY NHI A RAHY

    ReplyDelete
  2. this is my address kingrcelectronics.blogspot.com
    to understand problem place the mouse on thame share buttion line on word
    where you see my social buttions is ttwo to three lines up form it

    ReplyDelete
  3. Waheed bhai ma na jpstation upload kiya but wo popular content ma no title show kar rha ha plzzz helppp or tab bar ma ak sa ziada name kase add hote hun jase ap na blogger ma add kiya like facebook sharing etc

    ReplyDelete