Flat Responsive Social Share Widget For Blogger

Flat Responsive Social Share Widget For Blogger

Today Im going to share Flat Responsive Social Share Widget for Blogger.

Its one of the widgets which are highly premium and attractive. Im damn sure that this widget will attract your blog visitors. Whenever you hover the buttons, the official color of these buttons appears.

Whats New We Have Here?

• Brand New for Blogger as it is Adapted from Wordpress.
• Simple and Sleek with Pure CSS.
• Smooth User experience.
• Totally Responsive on Hover.
• Fast loading.
• Custom Social Share Links.
• No Java Scripts.
• Perfect as Social Share Widget for Responsive Template.

The widget simply works on the principle of CSS and Custom Social Share Links. Trust me its really awesome you should try
                                                                        Live Demo

How To Install This Widget? 

It easy, just follow these steps : 

1.Go to Blogger > Dashboard > Template > Click Edit HTML.

2. Now search ]]></b:skin> and paste the following code just above it. 

/*-- Social Links --*/
.entry-social{
 overflow: hidden;
 margin-bottom: 20px;
}

.entry-social a{
 display: block;
 padding-left: 20px;
 color: #FFFFFF !important; 
 font-weight: 300;
font-size:12px;
}

.entry-social div{
 float: left;
 margin-right: 5px;
 width: 95px;
}

.entry-social div a{
 background-color: #FF7F1A;
}

.entry-social .delicious{
 width: 98px;
 margin-right: 0;
}

.entry-social .fb a{ 
 padding: 7px 10px 7px 26px; 
 background-image: url(http://picoolio.net/images/2013/11/29/fb14.png);
 background-repeat: no-repeat;
 background-position: 10px center;
}

.entry-social .fb a:hover{ 
 background-color: #324b81;
}

.entry-social .twitter a{ 
 padding: 7px 10px 7px 32px; 
 background-image: url(http://picoolio.net/images/2013/11/29/twitter14.png);
 background-repeat: no-repeat;
 background-position: 8px center;
}

.entry-social .twitter a:hover{
 background-color: #01A7dE; 
}

.entry-social .gplus a{ 
 padding: 7px 10px 7px 32px; 
 background-image: url(http://picoolio.net/images/2013/11/29/gplus14.png);
 background-repeat: no-repeat;
 background-position: 10px center;
}

.entry-social .gplus a:hover{ 
 background-color: #BA3227;
}

.entry-social .linkedin a{ 
 padding: 7px 10px 7px 35px;
 background-image: url(http://picoolio.net/images/2013/11/29/linkedin14.png);
 background-repeat: no-repeat;
 background-position: 10px center; 
}

.entry-social .linkedin a:hover{
 background-color: #136F9B; 
}

.entry-social .pinterest a{
 padding: 7px 10px 7px 30px;
 background-image: url(http://picoolio.net/images/2013/11/29/pinterest14.png);
 background-repeat: no-repeat;
 background-position: 10px center; 
}

.entry-social .pinterest a:hover{ 
 background-color: #B01C23; 
}

.entry-social .delicious a{ 
 padding: 7px 10px 7px 32px; 
 background-image: url(http://picoolio.net/images/2013/11/29/delicious14.png);
 background-repeat: no-repeat;
 background-position: 10px center; 
}

.entry-social .delicious a:hover{ 
 background-color: #2963B8; 
}

3. Now find the code <data:post.body/> by pressing CTRL+F

4. After Finding the code <data:post.body/> paste the following code just below it.

<div class="entry-social">
<div class="fb">
<a expr_href=&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title rel=external nofollow target=_blank>Facebook</a>
 </div>
<div class="twitter">
<a expr_href=&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url rel=nofollow target=_blank>Twitter</a> 
 </div>
<div class="gplus">
<a expr_href=&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot; rel=nofollow target=_blank>Google+</a> 
 </div>
<div class="linkedin">
<a expr_href=&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot; rel=nofollow target=_blank>Linkedin</a>
 </div>
<div class="pinterest">
<a expr:href=http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot; rel=nofollow target=_blank>Pinterest</a>
</div>
<div class="delicious">
<a expr_href=&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title rel=nofollow target=_blank>Delicious</a>
 </div>
</div>
<!-- /entry-social -->

5. Thats it, hit save now, you are done ! You can check out this widget just go to your blog post.

visit link download