Social Share Widget For Blogger

Πηγαίνουμε : Πρότυπο > Επεξεργασία HTML και κάνουμε αναζήτηση πατώντας Ctrl + F  τον κώδικα  ]]></b:skin>  και ακριβώς πάνω από το ]]></b:skin> προσθέστε τον παρακάτω κώδικα:

/* foulscode.blogspot.gr */
.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;
}
/* foulscode.blogspot.gr */

Μετά την εύρεση του κώδικα <data:post.body/> επικολλήστε τον παρακάτω κώδικα ακριβώς κάτω από αυτό:

</style>
<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>
<!-- /foulscode -->

LIVE DEMO


Μην ξεχνάτε πως μπορείτε να αλλάξετε χρώμα αν δεν ταιριάζει το πορτοκαλι στο blog σας με την επεξεργασία του κώδικα css!

Είστε έτοιμη να κάνετε αποθήκευση!