New Light Box Social Sharing widget for Blogger

New Light Box Social Sharing widget for Blogger based on Pure CSS Code.

Social Sharing Widget

Today , I'm sharing another new social sharing widget for blogger. It's very light buttons and beautiful social sharing widget. It's based on pure CSS structure and easy to customise. Social Media is the most important part of any blog and website. In this widget, I used social media fonts and looks more attractive. Let's check out Image preview of this widget-

Live Image Preview

Recommended Social Sharing Widget -

1. New tabbed Social Share , subscribe and connect widget for Blogger
2. Social Sharing Widget for Blogger in WP Style
3. How to easy use Floating Social Sharing Header Bar Widget For Blogger
4. Ice Cube Social Sharing Widget below blogger Post 2013
5. Social Bookmarking Widget for Blogger & Wordpress Blogs

Features of Widget :

• Based on Pure CSS Style Widget
• Social Media Icons (facebook , google+ , linkedin , twitter)
• Looks Attractive and Stylish
• Responsive Effects
• Easy to Installation on Blogger

How Add Social Widget on your Blogger Template

1. Login to Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
2. Select the Template > Click on Edit HTML > Proceed
3. Press CTRL + F and find the code </head>
4. Add Below Code just before </head> tag

<style type='text/css'>
/*<![CDATA[*/
         /*New Light Box Social Sharing widget for Blogger By Ghanshyam Singh @ http://www.digitalhubinc.com/*/
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- */
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
 font-family: 'entypo', sans-serif;
}
.social {
 color: #fff;
 display: block;
 font-size: 18px;
 line-height: 30px;
 position: relative;
 text-align: center;
 width: 84%;
}
/*social sharing buttons */
.social span{
width: 180px;
display: block;
padding: 5px;
margin: 5px;
float: left;
font-size: 18px;
text-align: center;
text-decoration: none;
color: #FFF;
}
.social a{
width: 120px;
display: block;
padding: 5px;
margin: 5px;
float: left;
font-size: 18px;
text-align: center;
text-decoration: none;
color: #FFF;
}
/*
* Changes the background colour for Each Button
*/ /*Facebook*/
.entypo-facebook{
    background:#3B5998
}
/*Twitter*/
.entypo-twitter{
    background:#7cd5fd;
}
/*Google Plus*/
.entypo-gplus{
    background:#dd4b39;
}
/*LinkedIn*/
.entypo-linkedin{
    background:#0e76a8;
}
/*StumbleUpon*/
.entypo-stumbleupon{
    background:#EF4916;
}
/*Reddit*/
.reddit{
    background:#369;
}
/*Digg*/
.entypo-digg{
    background:#1B5790;
}
/*Delicious*/
.entypo-delicious{
    background:#0B79E5;
}
.entypo-shareable {
background:#0b5e85;
}
/* Changes the Background Colour for Each Button on Hover*/
.entypo-facebook:hover {
background:#2f4679;
}
.entypo-twitter:hover {
background:#0089bd;
}
.entypo-gplus:hover {
background:#b03b2d;
}
.entypo-stumbleupon:hover {
background:#c4361d;
}
.entypo-linkedin:hover {
background:#0b5e85;
}
.entypo-shareable:hover {
background:#0b5e85;
}
         /*New Light Box Social Sharing widget for Blogger By Ghanshyam Singh @ http://www.digitalhubinc.com/*/
    /*]]>*/
</style>

5. Press CTRL + F and find the code <data:post.body/>
6. After finding the above code, copy paste the following code just below it.

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class="social">          <!--New Light Box Social Sharing widget for Blogger By Ghanshyam Singh @ http://www.digitalhubinc.com/ -->        <span class="entypo-shareable">Share This Post on:</span>         <!--Facebook-->        <a class="entypo-facebook" expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'> Facebook</a>         <!--Twitter-->        <a class="entypo-twitter" expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'> Twitter</a>        <!--Google Plus-->        <a class="entypo-gplus"  expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'> Google+</a> <!--Stumbleupon--> <a class="entypo-stumbleupon" expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Share On StumbleUpon !'> Stumble it</a> <!--Linkedin--> <a class="entypo-linkedin" expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'> LinkedIn</a><!--New Light Box Social Sharing widget for Blogger By Ghanshyam Singh @ http://www.digitalhubinc.com/ --></div>    </b:if>

7. Save your Template Now! All work Done!

Widget Customisation 

No widget customisation required but if you want remove any social button then you go to simply remove any social button section. after you will show widget and remove button disappeared.

I hope , you will enjoy this post and drop your valuable comment below. Keep visiting and share on social media network.