How to Add Social Media Icon Buttons to Blogger Blog


Social media sharing is the most important thing for newbie blogger and social media marketer and also for them who wants to become someone in the web industries. most of people use them for their business purposes and other use to do product marketing which is nowadays very familiar.

Using social media button for your website is the key for growing your traffic and it help you to make your legitimate sate on the internet . The more people share your content the more you gain good back links . Good Back links is very significant for boost your reputation among bots.

Every blogger use social media icon for their blog which is very important for driving traffic from social network , your blog reader share your article through out social buttons it help them to easily share your content by just clicking on the social share buttons .

There so many tactics to implement these button to website but we are going to add it on our blogger blog . So In this lesson we will show you how to add Social media Button to Blogger Blog .

Adding Social Media Buttons To Blogger Blog .

First of all you have to login to your blogger account .
Once you login in then go to blogger >> Template >> Edit HTML >> then click any where in the html editor and press CTRL+F then it will open search box now paste the following code and hit enter to search it.
</head>

And now above the </head> tag paste the following link code .
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

Now search for the next following code
</b:skin>

then above the </b:skin> paste these style css codes in there.
.button-full{
width: 100%;
margin:10px auto;
background: rgb(27, 243, 243) none repeat scroll 0% 0%;
}
/*------button box-----------*/
.button-box{
width: 100%;
margin-top: 170px;
overflow: auto;#0084b4.

}
/*------button box a decoration-----------*/
.button-box a{
text-decoration: none;
color: #333;
}
/*------button section-----------*/
.button{
width:auto;
height: auto;
background: white;
border: 8px solid #636262;
border-style: inset;
border-top: transparent;
border-left: transparent;
border-radius: 4px;
text-align: center;
margin: 1px 0px;
}
/*------font-awsome icon -----------*/
.button .fa{
background: rgba(204, 204, 204, 0.13);
font-size: 40px;
margin: 6px auto;
border-radius: 10px;
width: 80%;
height: 80%;
line-height: 60px;
}
}
.button .fa {
color: black;
}
/*------font-awesome icon hover state color-----------*/
.button:hover > .fa{
background: rgba(204, 204, 204, 0.27);
}
.button:hover > .fa-facebook{
color: #3b5998;
}
.button:hover > .fa-twitter{
color: #55ACEE;
}
.button:hover > .fa-google-plus{
color: #d34836;
}
.button:hover > .fa-reddit{
color:  #cee3f8;
}
.button:hover > .fa-flickr{
color: #0063DC;
}
.button:hover > .fa-android{
color: #89c400;
}
.button:hover > .fa-stumbleupon{
color: #FE3331;
}
.button:hover > .fa-linkedin{
color: #03659A;
}
.button:hover > .fa-tumblr-square{
color: #86B9D7;
}

.button:hover > .fa-vk{
color: #335795;
}
.button:hover > .fa-whatsapp{
color: #28C427;
}


/*------button inner border section-----------*/
.button-border{
border-radius: 4px 5px 7px 4px;
border: 4px solid #333;
width: 83px;
height: 81px;
border-top: transparent;
border-left: transparent;
position: relative;
cursor: pointer;
float: left;
margin: 10px;
}
/*------button inner border active state-----------*/
.button-border:active{
border-radius: 6px;
border: 4px solid #333;
width: 80px;
height:80px;
border-top: 1px solid #333;
border-left: 1px solid #333;
}
.button-border:active > .button{
width: 77px;
height: 76px;
border: 2px solid #636262;
border-top: transparent;
border-left: transparent;
border-style: inset;
}

And now search twice for the below code
<data:post.body

Now its time to add our html codes to below every blog post so paste the following codes below the above code.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="button-full">

<div class="button-box">

  <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Facebook!'>
    <div class="button-border">
      <div class="button">
          <i class="fa fa-facebook"></i>
      </div>
    </div>
  </a>

<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot;-&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Twitter!'>
  <div class="button-border">
      <div class="button">
          <i class="fa fa-twitter"></i>
      </div>
  </div>
</a>

<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Google Plus'>
  <div class="button-border">
    <div class="button">
        <i class="fa fa-google-plus"></i>
    </div>
  </div>
</a>
<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'>
  <div class="button-border">
    <div class="button">
        <i class="fa fa-reddit"></i>
    </div>
  </div>
</a>


<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Stumble share'>
  <div class="button-border">
    <div class="button">
        <i class="fa fa-stumbleupon"></i>

    </div>
  </div>
</a>
<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Linkedin'>
  <div class="button-border">
    <div class="button">
        <i class="fa fa-linkedin"></i>
    </div>
  </div>
</a>
<a expr:href='&quot;http://www.tumblr.com/share/link?url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on tumblr'>
  <div class="button-border">
    <div class="button">
        <i class="fa fa-tumblr-square"></i>
    </div>
  </div>
</a>

  </div>
</div></b:if>
and save your template and your done!.

If you like this article then share it and you can follow us on twitter and you can also like our facebook page .

Bonus Tips: If you want to improve your blogger, SEO and search rank in search engines, then you must need read the Article which I already wrote on How 7 Top Extremely Advanced SEO Tips For Bloggers and also read this to Become a Pro On Blogging Great Tips For Bloggers

Recommended: How To Add twitter feed box to blogger
Recommended: How To add Facebook Share Button to Blogger

“you don't have to be great to get started, but you have to get started to be great.”
- Les Brown

Comments