Widget κοινωνικης δικτυωσης για τον blogger με roll over εφφε

Widget κοινωνικης δικτυωσης για τον blogger με roll over εφφε


Ενα ομορφο widget κοινωνικης δυκτιωσης για να μοιραζονται οι επισκεπτες τα αρθρα σας στα site κοινωνικης δυκτιωσης.

Περιλαμβανει Google Plus, Facebook, Twitter, Pinterest, Delicious, Digg, Stumble upon, Reddit, RSS.
Τα εικονιδια περιστρεφονται καθετα μολις περασει το βελακι απο πανω. Η ταχυτητα περιστροφης του εικονιδιου ειναι αρκετα γρηγορη και μερικες φορες οι επισκεπτες ισως να μη προλαβαουν να το παρατηρησουν. Γενικα εμενα μου αρεσει παρα πολυ γιαυτο και σας το προτεινω.
  Ειναι φτιαγμενο απο css και δε θα καθυστερει καθολου το blog σας.

δειτε το  demo

Για να το προσθεσουμε αρκει να βρουμε τον κωδικο
<data:post.body/>
και ακριβως απο κατω του να προσθεσουμε αυτον

<style>
/*--------Flipper Sharing Widget ------*/
.flipper a {
display:block;
height:48px;
width:48px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuApKMZph_YMegrA143hdk4zaZXGJ3vExG2A_rYcjRqTM8QxFopx4gQnLvN2RR3tDuzqi1deV7NDurL6ztDq1hlu4kzAVggj5sAUZ7rYK5wL2xbp07sk5IDFPRjtZk6eljtYfTh29mBG9o/s1600-rw/flipper.png) no-repeat;
-webkit-transition: ease-in 0.15s all;  
-moz-transition: ease-in 0.15s all;  
-o-transition: ease-in 0.15s all;  
-ms-transition: ease-in 0.15s all;  
transition: ease-in 0.15s all;
cursor:pointer;
}
.flipper a.googleplus {
background-position: 0px -348px;
}
.flipper a.googleplus:hover {
background-position: 0px -406px;
}
.flipper a.pinterest {
background-position: 0px -464px;
}
.flipper a.pinterest:hover {
background-position: 0px -522px;
}
.flipper a.delicious {
background-position: 0px 0px;
}
.flipper a.delicious:hover {
background-position: 0px -58px;
}
.flipper a.digg {
background-position: 0px -116px;
}
.flipper a.digg:hover {
background-position: 0px -174px;
}
.flipper a.stumbleupon {
background-position: 0px -812px;
}
.flipper a.stumbleupon:hover {
background-position: 0px -870px;
}
.flipper a.technorati {
background-position: 0px -928px;
}
.flipper a.technorati:hover {
background-position: 0px -406px;
}
.flipper a.twitter {
background-position: 0px -928px;
}
.flipper a.twitter:hover {
background-position: 0px -986px;
}
.flipper a.facebook {
background-position: 0px -232px;
}
.flipper a.facebook:hover {
background-position: 0px -290px;
}
.flipper a.reddit {
background-position: 0px -580px;
}
.flipper a.reddit:hover {
background-position: 0px -638px;
}
.flipper a.rss {
background-position: 0px -696px;
}
.flipper a.rss:hover {
background-position: 0px -754px;
}
.Pleaseshare{
margin:10px 0px;
color:#333333;
font-weight:bold;
font-size:20px;
font-family:sans-serif;
}
</style>
<div class='flipper'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="Pleaseshare">
Μοιραστείτε το!!! :) </div>
<!--Google Plus-->
<a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/>
<!--Facebook-->
<a class='facebook' 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' title='Share this on Facebook :&gt;'/>
<!-- Twitter -->
<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>
<!-- Pinterest -->
<a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/>
<!-- Delicious -->
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>
<!--DIGG-->
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>
<!--Stumble-->
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>
<!-- Reddit -->
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>
<!--RSS -->
<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Bookmark plz :&gt;'/>
</b:if></div>
<div style="clear:both"/>
Μπορειτε αν θελετε να αλλαξετε τα κοκκινα γραμματα και να γραψετε κατι δικο σας ενω πειραζοντας τον αριθμο με το κιτρινο χρωμα αλλαζετε το χρωμα του.

Αν δε θελετε καποιο εικονιδιο τοτε μπορειτε να σβησετε τον κωδικο του η αν θελετε μπορειτε να αλλαξετε τη σειρα τους.

Ελπιζω να σας αρεσει, αν κολησετε καπου αφηστε μου ενα σχολιο.

Δημοσίευση σχολίου

Νεότερη Παλαιότερη