3D κουμπιά για κοινωνική δικτύωση.


Ένα όμορφο widget με 3D κουμπιά, στα οποία περιστρέφονται 360° όταν το ποντίκι πηγαίνει επάνω τους.



Δείτε demo

Επιλέξτε [Διάταξη] - [Προσθήκη gadget] - [HTML/Javascript] και επικολλήστε τον παρακάτω κώδικα. Αντικαταστήστε τις λέξεις Κουμπί με τα μπλε γράμματα με αυτά της επιλογής σας, όπως φαίνονται παρακάτω και πατήστε [Αποθήκευση]. (Δε χρειάζεται να βάλετε τίτλο στο gadget)

<style>
#social a:hover {background-color: transparent;opacity:0.7;} 
#social img { 
 -moz-transition: all 0.8s ease-in-out;
 -webkit-transition: all 0.8s ease-in-out;
 -o-transition: all 0.8s ease-in-out;
 -ms-transition: all 0.8s ease-in-out;
 transition: all 0.8s ease-in-out; } 
 
#social img:hover { 
 -moz-transform: rotate(360deg);
 -webkit-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 transform: rotate(360deg); }
</style> 
 
 <center> <div id="social"> Κουμπί1 Κουμπί2 Κουμπί3 Κουμπί4 Κουμπί5 Κουμπί6 </div> </center>

Στη θέση του κώδικα αντικαταστήστε τις λέξεις κουμπί με τους παρακάτω κώδικες (όποιους θέλετε εσείς) και βάλτε τα δικά σας URL.

Icon
<a href="http://www.blogger.com/YOUR-FEED-URL-HERE" target="_blank" title="Grab Our Rss Feed"><img alt="Icon" border="0" src="http://3.bp.blogspot.com/-JJAnjTFe4mQ/UA6_gexOboI/AAAAAAAAH8w/pUVfxnjRUM4/s1600/RSS-48x48.png" style="margin-right: 1px;" /></a>

Icon
<a href="http://www.blogger.com/YOUR-EMAIL-RSS-URL-HERE" rel="nofollow" target="_blank" title="Get Free Updates Via Email"><img alt="Icon" border="0" src="http://4.bp.blogspot.com/-1BWe2ZnJHas/UA6_hrD6_GI/AAAAAAAAH80/exs4JwDuyhY/s1600/RSS-EMAIL-48x48.png" style="margin-right: 1px;" /></a>

Icon
<a href="http://www.blogger.com/YOUR-FACEBOOK-PAGE-URL-HERE" rel="nofollow" target="_blank" title="Like Our Facebook Page"><img alt="Icon" border="0" src="http://4.bp.blogspot.com/-dkmDM3RXcoE/UA6_d28wCyI/AAAAAAAAH8Y/9E3PI3lXueM/s1600/FACEBOOK-48x48.png" style="margin-right: 1px;" /></a>

Icon
<a href="http://www.blogger.com/YOUR-TWITTER-URL-HERE" rel="nofollow" target="_blank" title="Follow Our Updates On Twitter"><img alt="Icon" border="0" src="http://3.bp.blogspot.com/-TrNf8cdHE6w/UA6_iRAUK_I/AAAAAAAAH88/Jo7RAX207xo/s1600/TWITTER-48x48.png" style="margin-right: 1px;" /></a>

<a href="http://www.blogger.com/YOUR-GOOGLE-PLUS-URL-HERE" rel="nofollow" target="_blank" title="Follow Us On Google+"><img src="http://2.bp.blogspot.com/-VeOVFTKCvHw/UA6_em6-aOI/AAAAAAAAH8c/Uu4blSzFwLk/s1600/GOOGLE-PLUS-48x48.png" style="margin-right: 1px;" /></a>

Follow Me on Pinterest
<a href="http://www.blogger.com/YOUR-PINTEREST-URL-HERE" rel="nofollow" target="_blank" title="Follow Our Pins"><img alt="Follow Me on Pinterest" src="http://4.bp.blogspot.com/-uSSbLLRLSIE/UA6_fTHiLrI/AAAAAAAAH8k/OxlFAJozvX8/s1600/PINTEREST-48x48.png" style="margin-right: 1px;" /></a>


[Πηγή:
sainiblogger.blogspot.com , allblogtools.com]

0 σχόλια:

Δικά μου

Larissakid

Χρησιμοποιώ