Add CSS Powered Social sharing widget in Blogger Site

Add CSS Powered Social sharing widget in Blogger Site Social Sharing widget is important for Blogger. Because it will help to spread your content in various social networking site. As a result your content will reach to more people and you will receive extra traffic by using this widget. In this social sharing widget I have included Facebook, Twitter, Google Plus, Pinterest and StumbleUpon icons thus a visitors can share your content to those social networking site easily. So to add this eye-catching social sharing widget in your Blog site please follow the below tutorial- Step 1Log in to yourBlogger accountand Go to yourBlogger Dashboard Step 2Clickon- Template - Edit HTML Step 3Now Find this code]]/b:skinby pressing Ctrl+F (Windows) or CMD+F (Mac) Step 4Paste the below code Before/above]]/b:skin /**www.bloggerspice.com Share Post Styling ***/ #share-post { width: 100%; overflow: hidden; margin-top: 20px; } #share-post a { display: block; height: 32px; line-height: 32px; color: #fff; float: left; padding-right: 10px; margin-right: 10px; margin-bottom: 25px; text-decoration: none; overflow: hidden; margin: 0 10px 10px 0; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; width: 135px; height: 32px; float: left; padding: 0; overflow: hidden; text-align: center; font-weight: 600; } #share-post .facebook { background-color: #436FC9; } #share-post .twitter { background-color: #40BEF4; } #share-post .google { background-color: #EC5F4A; } #share-post .pinterest { background-color: #DB232B; } .stumbleupon{ background-color:#F54E27; } #share-post span { display: block; width: 32px; height: 32px; float: left; margin-right: 10px; background: url(http://1.bp.blogspot.com/-qILqAtDPJSs/VQ_R1Sr_0-I/AAAAAAAAKeI/9oLEZlnxF6Q/s1600/BloggerSpice%2BSocial-Icons.png) no-repeat; } #share-post .twitter span { background-color: #26B5F2; background-position:1px 2px; } #share-post .facebook span { background-color: #3967C6; background-position:-22px 2px; } #share-post .google span { background-color: #E94D36; background-position:-47px 2px; } #share-post .pinterest span { background-color:#CB2027; background-position:-148px 2px; } #share-post .stumbleupon span { background-color:#EB4924; background-position:-372px 2px; } Step 5Now again Find this codedata:post.body/ordiv class='post-footer'by pressing Ctrl+F (Windows) or CMD+F (Mac) Step 6Paste the below code below/after data:post.body/ ordiv class='post-footer' b:if cond='data:blog.pageType == quot;itemquot;' div id='share-post' a class='facebook' expr:href='data:post.sharePostUrl + quot;amp;target=facebookquot;' expr:onclick='quot;window.open(this.href, quot;_blankquot;, quot;height=430,width=640quot;); return false;quot;' expr:title='data:top.shareToFacebookMsg' target='_blank' span/ Facebook /a a class='twitter' expr:href='data:post.sharePostUrl + quot;amp;target=twitterquot;' expr:title='data:top.shareToTwitterMsg' target='_blank' span/ Twitter /a a class='google' 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=600quot;);return false;' rel='nofollow' title='Share this on Google+' span/ Google+ /a a class='pinterest' 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.title' rel='nofollow' target='_blank' title='Share This on Pinterest' span/ Pinterest /a a class='stumbleupon' expr:href='quot;http://www.stumbleupon.com/submit?url=quot; + data:post.url + quot;amp;title=quot; + data:post.title ' rel='nofollow' target='_blank' title='Share This on Stumbleupon' span/ StumbleUpon /a div style='clear: both;'/ /b:if Step 7Now hit theSave templatebutton. That's all. Now check your template and visit any post and see social sharing widget has appeared at the end of every Blog posts. Final output will be like above image. I hope you and your visitors would love this widget. For any further support feel free to leave a comment below.