Best Blogger Social Media Portion Buttons Widget

Blogger post service gets to a greater extent than traffic through sharing than fifty-fifty organic ones. Social media percentage buttons widget makes it tardily to percentage a post service inwards a click of i button. It makes it ameliorate for users who see your blogger weblog to percentage your post service amongst their friends. Today I conduct maintain made for you lot the best e'er social media buttons widget that you lot tin utilization earlier or below a post. The widget has a stylish, responsive together with premium expect to transform your blogger weblog for good. We volition conduct maintain fourth dimension to add together several codes to our CSS together with HTML purpose of our template code to brand certain that the social media sharing buttons display correctly inwards the right place. Without wasting to a greater extent than fourth dimension on the explanation, let's come across how the widget looks similar together with how to add together it inwards blogger.

That demo it looks similar below my weblog post service when I added the widget to my Blogspot blogger blog. Let's come across ways of adding the widget to blogger.

Follow the steps below to know where you lot volition glue your codes.

Step 1. Log inwards to Blogger together with select your specific website to add together the SEO code.
Step 2. Reach out to the left commands past times navigating to them to the Template command
Step 3. Click on the template ascendency together with and then locate the Edit HTML adjacent to Customize.
Step 4. Click anywhere inwards your code together with and then click on Ctrl+F inwards windows or CMD+F inwards mac.
Step 5. In the search bar search for the ]]></b:skin> tag.
Step 6. After finding the Head Tag Copy all the code BELOW together with Paste it BEFORE to a higher house tag.
CSS Code

/* Post social percentage inc.seoclive.com*/
.post_social_share {
display: block;
    padding: 8px 0;
    margin-bottom: 0px;
}
.post_social_share h3 {
display: block;
font-size: 14px;
line-height: 54px;
font-weight: 700;
margin-bottom: 0;
letter-spacing: 2px;
}

.post_social_share a {
   width: 42px;
    height: 42px;
    line-height: 42px;
    font-size: 20px;
    display: inline-block;
    text-align: center;
    color: #fff;
    background: #30373b;
    border-radius:50px;
    -o-border-radius:50px;
    -moz-border-radius:50px;
    -webkit-border-radius:50px;
    margin-right: 2px;
}

a.social_share.fb{background:#3F51B5;width:30%}
a.social_share.tw{background:#03A9F4;width:30%;}
a.social_share.gp{background:#F44336;}
a.social_share.pi{background:#CF1B2B;}
.whats{background: #4CAF50!important;}
a.social_share.li{background:#1a7baa;}
a.social_share.em{background:#ccc;}

.post_social_share a:hover {
-webkit-transition:border-color .2s;
-moz-transition:border-color .2s;
transition:border-color .2s
}



.share_this_content a.social_share {
    font-size: 10.5px;
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom:0px;
    vertical-align:top;
}
.share_this_content i{font-size:14px;}
.share_this_content i.fa.fa-facebook,.share_this_content i.fa.fa-twitter{margin-right:5px;}

That's all amongst the CSS part, at i time let's movement to the HTML part.

Follow the steps below to know where you lot volition glue your codes.

Step 1. Log inwards to Blogger together with select your specific website to add together the SEO code.
Step 2. Reach out to the left commands past times navigating to them to the Template command
Step 3. Click on the template ascendency together with and then locate the Edit HTML adjacent to Customize.
Step 4. Click anywhere inwards your code together with and then click on Ctrl+F inwards windows or CMD+F inwards mac.
Step 5. In the search bar search for the <data:post.body/> tag.
Step 6. After finding the Head Tag Copy all the code BELOW together with Paste it BEFORE to a higher house tag.
HTML Code.

 <div class='post_social_share'>
  
    <div class='share_this_content'>
    
      <a class='social_share fb' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); furnish false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'><i class='fa fa-facebook'/> Share on Facebook</a>
      <a class='social_share tw' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><i class='fa fa-twitter'/> Share on Twitter</a>
      <a class='social_share gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,   &quot;&quot;, &quot;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&quot;);return false;' rel='nofollow' title='Share this on Google+'><i class='fa fa-google-plus'/></a>
      <a class='social_share pi' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); furnish false;' rel='nofollow' title='Share this on Google+'><i class='fa fa-pinterest'/></a>
<a class='social_share whats' data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=Take a expect at this : &quot; + data:post.url + &quot; From &quot; + data:blog.title'><i class='fa fa-whatsapp'/></a>
      <a class='social_share li' expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:blog.url.canonical + &quot;&amp;title=&quot; + data:view.title.escaped + &quot;&amp;summary=&quot; + data:view.description.escaped' target='_blank'><i class='fa fa-linkedin'/></a>
      <a class='social_share em' expr:href='data:post.sharePostUrl + &quot;&amp;target=pinterest&quot;' expr:title='data:top.shareToPinterestMsg' target='_blank'><i class='fa fa-envelope-o'/></a>
   
    </div>
</div>

That's all amongst the to a higher house social media widget, it's a uncomplicated implementation method. Refresh together with your social percentage buttons volition display below the championship of the post service body. If you lot desire to add together the blogger percentage buttons below post service together with then search the code <div class='post-footer together with glue the HTML Code below it. That's all together with give thank you lot you for learning this tutorial. I promise was of cracking assistance, contact me for to a greater extent than support.

Read: Mashshare Sharing Social Widgets For Blogger Blog

Read: Open Graph Meta Tags & Twitter Cards Markup for Blogger