Blogger post gets more traffic through sharing than even organic ones. Social media share widget makes it easy to share a post in a click of one button. It makes it better for users who visit your blogger blog to share your post with their friends. Today I have made for you the best ever social media buttons widget that you can use before or below a post. The widget has a stylish, responsive and premium look to transform your blogger blog for good. We will take time to add several codes to our CSS and HTML part of our template code to make sure that the social media sharing buttons display correctly in the correct place. Without wasting more time on the explanation, let's see how the widget looks like and how to add it in blogger. That show it looks like below my blog post when I added the widget to my Blogspot blogger blog. Let's see ways of adding the widget to blogger.
Follow the steps below to know where you will paste your codes.
Step 1. Log in to Blogger and choose your specific website to add the SEO code.Step 2. Reach out to the left commands by navigating to them to the Template command
Step 3. Click on the template command and then locate the Edit HTML next to Customize.
Step 4. Click anywhere in your code and then click on Ctrl+F in windows or CMD+F in 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 and Paste it BEFORE above tag.
CSS Code
/* Post social share www.hoit.asia*/That's all with the CSS part, now let's move to the HTML part.
.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;}
Follow the steps below to know where you will paste your codes.
Step 1. Log in to Blogger and choose your specific website to add the SEO code.Step 2. Reach out to the left commands by navigating to them to the Template command
Step 3. Click on the template command and then locate the Edit HTML next to Customize.
Step 4. Click anywhere in your code and then click on Ctrl+F in windows or CMD+F in 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 and Paste it BEFORE above tag.
HTML Code.
<div class='post_social_share'><div class='share_this_content'><a class='social_share fb' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'><i class='fa fa-facebook'/> Share on Facebook</a>That's all with the above social media widget, it's a simple implementation method. Refresh and your social share buttons will display below the title of the post body. If you want to add the blogger share buttons below post then search the code <div class='post-footer and paste the HTML Code below it. That's all and thank you for learning this tutorial. I hope was of great assistance, contact me for more support.
<a class='social_share tw' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'><i class='fa fa-twitter'/> Share on Twitter</a>
<a class='social_share gp' expr:href='"https://plus.google.com/share?url=" + data:post.url' onclick='javascript:window.open(this.href, "", "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600");return false;' rel='nofollow' title='Share this on Google+'><i class='fa fa-google-plus'/></a>
<a class='social_share pi' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return 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='"whatsapp://send?text=Take a look at this : " + data:post.url + " From " + data:blog.title'><i class='fa fa-whatsapp'/></a>
<a class='social_share li' expr:href='"https://www.linkedin.com/shareArticle?mini=true&url=" + data:blog.url.canonical + "&title=" + data:view.title.escaped + "&summary=" + data:view.description.escaped' target='_blank'><i class='fa fa-linkedin'/></a>
<a class='social_share em' expr:href='data:post.sharePostUrl + "&target=pinterest"' expr:title='data:top.shareToPinterestMsg' target='_blank'><i class='fa fa-envelope-o'/></a>
</div>
</div>