New Social Sharing Widget For Blogger with Font Awesome

Add an Awesome Social Sharing widget Powered by Font Awesome in your Blogger Template.

4
data:blog.title
2016 social sharing widget

It goes without say that social sharing widget mostly effective for spreading our content around the web. Mainly for sharing our content in various social media site we use social sharing widget. After reading your content if readers feel interest then they intent to share or bookmark the content on their social media profile. However social sharing widget helps the sharer to share the content easily. Eventually this makes your site share friendly. So I am going to share another awesome social sharing widget for your Blogger site.


Actually this widget I was share last year by using image for social media icons. But now I have modified the script and added Font Awesome icons for faster load. I hope you would love this. Let’s  skip to main tutorial. But before that please see the Animated Demo from below image.


social sharing widget

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 (Windows) or CMD+F (Mac) 

Step 4 Copy the script from below and paste the code below/after <head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css' rel='stylesheet'/>
Font Awesome script is optional. if your template already have this file then please skip the Step 4. You don't need to add Font Awesome file twice.

Step 5 Now again Find this code]]></b:skin>  by pressing Ctrl+F (Windows) or CMD+F (Mac) 

Step 6 Paste the below code Before/above]]></b:skin> 

/* CSS Share Button by www.bloggerspice.com*/
.bsshare{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;padding:10px 0;}
.bsshare li{float:left;margin:0 1%;width:18%;padding:0;list-style:none;position:relative;box-shadow:0 0 0 -1px #e3e3e3;}
.bsshare li:hover{box-shadow:4px 4px 0 -1px #e3e3e3;}
.bsshare li a{padding:5px 0 6px 35px;color:#fff;display:block;border-radius:2px;}
.bsshare li a:hover{background:#555555;color:#fff;}
.bsshare li .twitter{background-color:#85c5f5;}
.bsshare li .facebook{background-color:#6381c0;}
.bsshare li .gplus{background-color:#ed6d5d;}
.bsshare li .pinterest{background-color:#e44d52;}
.bsshare li .linkedin{background-color:#2c9ad8;}
.bsshare li .twitter:hover,.bsshare li .facebook:hover,.bsshare li .gplus:hover,
.bsshare li .pinterest:hover,.bsshare li .linkedin:hover{color:#fff;}
.bsshare li:last-child{margin-right:0}
.bsshare li .fa:before{position:absolute;top:0;left:0;display:inline-block;padding:4px 15px;font-family:fontawesome;text-align:center;background:#444444;color:#FFFFFF;line-height:20px;}
.bsshare li .fa {display:initial;}

Step 7 Now again Find this code <data:post.body/> or <div class='post-footer'>  by pressing Ctrl+F (Windows) or CMD+F (Mac) 

Step 8 Copy the script from below and paste it below/after <data:post.body/> or <div class='post-footer'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div class='bsshare'>
                <ul>
<li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>

                <li><a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li>

                <li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>

                <li><a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li>

                <li><a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Share</a></li>

                </ul>
         </div>
<div style='clear:both'/>
</b:if>

Step 9 Now hit the Save template

Now check your Blog post and see beautiful social sharing widget integrated in your Blogger template. You Blog visitors will love to share content easily. For any further help please feel free to leave a comment below. Thank you.
New Social Sharing Widget For Blogger with Font Awesome
4 Stars stars - "New Social Sharing Widget For Blogger with Font Awesome" It goes without say that social sharing widget mostly effective for spreading our content aroun...

স্যার আপনি অনেক দিন থেকে Template শেয়ার করতেছেন না । আমরা চাই আপনি Blogger Lab Full Width V1.1 Responsive Template মতো ন্তুন Template শেয়ার করবেন ।

Ekhon Premium template design er kaj korci, tai somoy nai. free hole design korbo.

hi thank you for this great post but my social share widget not looks like your widget . it not shows fully `` Share `` and `` tweet `` buttons please help me my blog url is .Help to easy net

Hi Mukul,
I am using SumuMe plugins.. not this widget

you can read more about this from below URL

http://www.bloggerspice.com/2016/01/how-to-seriously-triple-my-website-traffic-with-SumoMe.html

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *