Ads 468x60px

Δευτέρα, 9 Δεκεμβρίου 2013

Social media widget with Hover Effect

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα social media widget
για τα blog μας.Περιέχει Facebook, twitter, Google+, Rss feed!Έιναι μικρό σε
μέγεθος οπότε μπαίνει παντού και διαθέτει και hover effect!



Δείτε εδώ το DEMO


και για να το
εγκαταστήσετε και εσείς στα blogs σας...

 Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα-->
............................................................................................................................................................
<style>
.PBT-Share img {
width:42px;
-webkit-transform: rotate(10deg);
     -moz-transform: rotate(10deg);
       -o-transform: rotate(10deg);
      -ms-transform: rotate(10deg);
          transform: rotate(10deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.PBT-Share img:hover {
-webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
       -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
}
</style>
<center>
<div class="PBT-Share">
<a href="URL FACEBOOK" target="_blank"><img src="https://lh6.googleusercontent.com/-kYkF6HwaXEg/Uj69pHNzLYI/AAAAAAAAKuc/hXbCxrYtK-Q/s128/Facebook-icon%2520%25282%2529.png" /></a>
<a href="URL TWITTER" target="_blank"><img src="https://lh6.googleusercontent.com/-7OlcEkv4NPg/Uj69qEE7e-I/AAAAAAAAKuw/jY9zpoJnLxM/s128/Twitter-2-icon.png" /></a>
<a href="URL GOOGLE PLUS" target="_blank"><img src="https://lh6.googleusercontent.com/-H5vXBqBR0Vk/Uj69pRtmhuI/AAAAAAAAKuo/igtLIb1l3w8/s128/Google-plus-icon%2520%25281%2529.png" /></a>
<a href="URL FEEDBURNER" target="_blank"><img src="https://lh6.googleusercontent.com/-tN3zxaITkoo/Uj69pbMeyJI/AAAAAAAAKug/qhrU5s7pVSs/s128/RSS-icon%2520%25281%2529.png" /></a>
</div>
.............................................................................................................................................................
AΛΛΑΓΕΣ 

Αντικαταστήστε όλα τα URLS με τις αντίστοιχες διευθύνσεις που έχετε στα social
media και πατήστε Αποθήκευση!


Καλή επιτυχία!!!


Πηγή κώδικα 
thanks to probloggertricks.com



Edit by

0 σχόλια :

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

Icon Icon Icon

spice up your blog