How to add a sharing button on blogger

October 13, 2020

Introduction

Every blog or website has social sharing buttons.

It is used to sharing your content on social media.

Rise more traffic to share content on social media.

Social media is very utilizable for sharing posts and growth more and more traffic on your blog.

If your content has more accommodating then your viewer will Share it on social media.Theme settings on blogger with a live demo

So social sharing buttons are very effective on your blog.

Some template has social icons but some themes do not have social sharing icons.

In this situation, you can add custom-made social media icons to bloggers. The theme has a default sharing button.

You can easily add social sharing buttons on your blog.

So In this post explain how to add social sharing buttons on your blog website.

Follow the easy step to add social sharing buttons on your blog.

Add social sharing code carefully.

Do not a piece of mistake.

Because a mistake does not allow bloggers.

Better than recover your theme before adding social code.

How to Add Google Analytics tracking id to Blogger with live demo

How to add sharing buttons on blogger.

Go to your blogger dashboard.

Click on the theme.

You can see drop down in customize, click it and you can see the Edit HTML option.

Click on anywhere in the code area and press the CTRL + f key.

You can see the search box.

In search box type <data: post.body /> and search it.

Paste code just above <data: post.body />

Code.

 <style>
.fa {
    padding: 5px;
   
    width: 35px;
    text-align: center;
    text-decoration: none;
    display: inline;
    direction: ltr;
    margin-left: 4px;
    padding: 8px;
    margin-top: 15px;
}
user agent stylesheet
div {
    display: block;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-pinterest {
  background: #cb2027;
  color: white;
}
  .fa-whatsapp{background:#25d366;color:white;}
  .fa-share{color:blue}
</style>



<body>
<!-- share on social media -->
    <a title='Share On'><div class='fa fa-share'/></a>

<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' target='_blank' title=' facebook'><div class='fa fa-facebook'/></a>



<a expr:href='&quot;https://twitter.com/share?url=&quot; + data:blog.url' target='_blank' title=' twitter'> <div class='fa fa-twitter'/> </a>



<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:blog.url' target='_blank' title=' linkedin'> <div class='fa fa-linkedin'/></a>



 <a expr:href='&quot;https://www.pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.featuredImage + &quot;&amp;description=&quot; + data:post.title'><div class='fa fa-pinterest'/></a>


<a class='whatapp' expr:href='&quot;whatsapp://send?text=&quot; + data:blog.url' target='_blank' title='whatsapp'> <div class='fa fa-whatsapp'/> </a>

 </body>

Now, again press CTRL + f and display the search box. Type <head> tag on the search box to find it. After adding social icons awesome external link.

Link How to add a Meta tag on blogger

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

After <head> tag or before <head /> Code Save your theme.

Now, check your blog post on how to appear social media icons on blogger posts. You can see the social media icon after finish up your content or above labels it appears.

Also, you can add a sharing button after your header.

If you want to add after the header then paste social sharing code after and save your theme.

It appears after heading your blog.

Conclusion

Adding Social sharing buttons on your blog website you can grow more traffic easily.

Someone shares it by social media if your content more like.

You can more traffic generate through social media.

Using the social sharing button code you can add your blog website easily.

More social sharing more traffic comes to your blog.

Search This Blog

Bloggin Video

How to add a sharing button on blogger

Live Demo

Related Post Link

Comments

Post a Comment

Popular posts from this blog

How to add a simple pagination to blogger with a live demo

Theme settings on blogger with a live demo

How to remove footer credit in blog