Though social sharing widget is useful to increase the connectivity with blog post. Modern blog user use Font Awesome instead of the icons. So I have used Font Awesome 4.2.0 feature. This feature will display the social media icons instead of image. Remember that if you are using Font Awesome 4.2.0 then you don't have to add Font Awesome 4.2.0 file in your blog header section. So skip the Step 4. just follow the below steps-
Step 1 Log in to your Blogger account and Go to your Blogger Dashboard
Step 2 Click on -> Template -> Edit HTML
Step 3 Now Find this code <head> by pressing Ctrl+F
Step 4 Paste the below code below/after <head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css' rel='stylesheet'/>
Step 5 Now again Find this code ]]></b:skin> by pressing Ctrl+F
Step 6 Paste the below code Before/above ]]></b:skin>
/*Social Sharing Widget by http://www.bloggerspice.com/ */
.sotontroshare li {
float: left;
margin-right: 1.2%;
list-style-type: none;
}
.sotontroshare li .fa:before {
margin-right: 5px;
}
.sotontroshare li{width:17.6%;border:1px solid #EEE;padding:0}
.sotontroshare li a{padding:10px 0;background-color:#aaa;color:#FFF;display:block;border-radius:2px;}
.sotontroshare{overflow: hidden;
text-align: center;
margin: 20px 0;
padding-bottom: 15px;
}
.sotontroshare li a:hover{opacity:1}
.sotontroshare li .twitter{background-color:#55acee}
.sotontroshare li .facebook{background-color:#3b5998}
.sotontroshare li .gplus{background-color:#dd4b39}
.sotontroshare li .pinterest{background-color:#cc2127}
.sotontroshare li .linkedin{background-color:#0976b4}
Step 7 Now again Find this code <data:post.body/> or <div class='post-footer'> by pressing Ctrl+F
Step 8 Paste the below code below/after <data:post.body/> or <div class='post-footer'>
<b:if cond='data:blog.pageType == "item"'>
<div class='sotontroshare'>
<ul>
<li><a class='twitter' data-via='BloggerSpiceDotCom' expr:href='"http://twitter.com/home?status=" + data:post.title + "-" + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>
<li><a class='facebook' expr:href='"http://www.facebook.com/share.php?v=4&u=" + data:post.url + "&t=" + data:post.title' onclick='window.open(this.href,'sharer', 'toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>
<li><a class='gplus' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li>
<li><a class='linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=" + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li>
<li><a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description= + data:post.title"' target='_blank'><i class='fa fa-pinterest'/>Share</a></li>
</ul>
</div>
</b:if>
Step 9 Now hit the Save template button.
After go through all the above steps check your blog post. This widget will appear at the end of every blog post. And now your blog readers will able to share your blog post easily. Thanks.
Hello, my name is Aamir khan. I'm a 24year old blogger from Pakistan.
No comments:
Post a Comment
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there.