• Tutorials
  • Blogger Themes
  • Blogger SEO
  • Blogger Widgets
  • Internet
  • Mobile Phones
  • Gadgets
BloggerHero - Blogger Tuts, SEO, Themes, Gadgets
  • Home
  • Blogger
  • SEO
  • Themes
  • Internet
  • Widgets
  • Gadgets
  • About
  • search
    close

Flat Responsive Social Share Widget for Blogger

 Rohitkumar  01:38  4 comments
Tweet
Flat Responsive Social Share Widget for Blogger
In last post I've shared my own modified Sensational v2.0 Ultra Responsive Blogger Template. Today I'm going to share Flat Responsive Social Share Widget for Blogger.
Though I've shared many cool Social Share Widgets, but this one is pure awesome.
Its one of the widgets which are highly premium and attractive. I'm damn sure that this widget will attract your blog visitors. Whenever you hover the buttons, the official color of these buttons appears. Lets check out why this widget is different.

What's 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 the Live Demo.
Actual Share Widget 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. That's it, hit save now, you are done ! You can check out this widget just go to your blog post.
I hope you would like this widget, you can also browse our All Social Share Widgets.
If you have any problem regarding this widget, just drop your comment or feel free to contact me.

    Sharing is Caring!

  • Facebook
  • Twitter
  • Google+
  • StumbleUpon
  • linkedIn
  • StumbleUpon

Rohitkumar A

Posted In blogger, css, responsive, Social Share Widgets
Subscribe Now

Get Latest Posts Directly Into You Inbox

 4 comments :

  1. Unknown19 February 2014 at 06:56

    bro i had paste all the codes correctly but it didn't appears on my blog :( can you help me please?

    blog:- http://www.freeresponsiveblogger.com/

    ReplyDelete
    Replies
    1. Rohitkumar A22 February 2014 at 23:58

      You can go for another Social Share widgets, mate.
      I have added plenty social share widget tutorials.

      Delete
      Replies
        Reply
    2. Reply
  2. Unknown30 April 2014 at 07:58

    Hi Rohit.. Good work !

    I wanted to try this widget .. but I dont know how to take a back up of my original template .. if it goes wrong.. Is it just simple copy and paste ??

    thanks
    Nupur

    ReplyDelete
    Replies
      Reply
  3. Admin4 August 2014 at 16:59

    Exactly what I wanted!
    Thank you so much buddy!

    ReplyDelete
    Replies
      Reply
Add comment
Load more...

Newer Post Older Post Home
Do you like my work?

Buy Me a Coffee!

Popular Posts

  • MaterialMix : A Free Material Design Blogger Template
  • How to add Custom Fonts in Blogger or Any Website
  • How to use full ISP bandwidth to speed up downloading
  • Download Materiality Blogger Template
  • Resume Lite - One Page Resume Blogger Template
  • Best Social Media Widget for Blogger | 2017
Email Newsletter

Get Latest Posts Directly Into You Inbox

Labels

Android blogger browser Buy computer css drop down menu Gadgets Google how to internet Laptops Mobile Phone phone responsive reviews SEO smartphone Social Media Social Share Widgets subscription box Template tool trick widget Wireless youtube
Powered by Blogger.

Popular Posts

  • High PR Forums That Can Bring You High Traffic
  • Sensational v2.0 Responsive Blogger Template
  • Materiality - Material Design Blogger Template
  • BloggerHero Free Premium Blogger Template
  • MaterialMix : A Free Material Design Blogger Template
  • [Fixed] Facebook Share Thumbnail Is not Showing on Blogger

Contact Form

Name

Email *

Message *

  • Home
  • About
  • Contact
  • Sitemap
  • Services
  • Request
  • Privacy Polciy

© 2013 BloggerHero.com. All Rights Reserved. Designed with Love for Everyone!