Κινούμενο social button menu 1

Φίλοι bloggers, στο άρθρο αυτό θα βρείτε ένα μενού από social buttons, κινούμενο όταν το ποντίκι σας περνάει πάνω από τα εικονίδια…Μπορείτε να βάλετε δικά σας εικονίδια, και μάλιστα να αφαιρέσετε από το μενού, όσα δεν χρειάζεστε, και στα οποία δεν έχετε λογαριασμό…Δείτε τα και στο DEMO  !




Ο ΚΩΔΙΚΑΣ CSS+JAVASCRIPT/HTML : (Μπορείτε να βάλετε όλο το κώδικα που σας δίνω, σαν Gadget =>JAVASCRIPT/HTML)

<!-- start social button menu by http://bloghelp.gr/ --><style>
#social-icons {
text-align: center;
margin-top: 5px;
margin-bottom: 5px;
}
#social-icons img {
width: 40px;
opacity: 0.3;
transition: 0.6s all ease-out;
}
#social-icons img:hover {
opacity: 0.99;
transform: translateY(-6px);
-webkit-transform: translateY(-6px);
}
.social-icon {
color: #444444;
font-size: 32px;
margin-right: 2px;
padding: 0px 2px;
position: relative;
top: 0px;
left: 0px;
transition: ease 0.4s all;
}
.social-icon:hover {
color: #009900;
text-shadow: 3px 3px 1px #818181;
top: -1px;
left: -1px;
}
a:hover .social-icon {
text-decoration: none;
}#social-icons {
display: block;
text-align: center;
padding: 5px;
}
</style><div id="social-icons" >
<a target="_blank" href="http://1" title="Facebook" ><img src="https://lh6.googleusercontent.com/-6mSan8stmVk/U2XwnNg0KmI/AAAAAAAAKmc/QJ0Alu1ewMM/s48/facebook.png"></a>
<a target="_blank" href="http://1" title="Twitter" ><img src="https://lh6.googleusercontent.com/-YIYlRN_0ZgM/U2XwpNFIuXI/AAAAAAAAKmY/mmYkCvggits/s48/twitter.png"></a>
<a target="_blank" href="http://1" title="Google Plus" ><img src="https://lh5.googleusercontent.com/-hwB6hYb4elU/U2XwnOjz1iI/AAAAAAAAKls/5fRknieoH7Y/s48/google.png"></a>
<a target="_blank" href="http://1" title="RSS Feeds" ><img src="https://lh4.googleusercontent.com/-LvfNLdbybaI/U2Xwoiz0vuI/AAAAAAAAKmE/PyV-amjeYNQ/s48/rss.png"></a>
<a target="_blank" href="http://1" title="Instagram" ><img src="https://lh6.googleusercontent.com/-LlosvElqg38/U2Xwn51NJUI/AAAAAAAAKl0/tu_a4SqsO1A/s48/instagram.png"></a>
<a target="_blank" href="http://1" title="Flickr" ><img src="https://lh4.googleusercontent.com/-D9zsd2Bp98g/U2XwnC4KjRI/AAAAAAAAKmg/sDOmP-1OEfU/s48/flickr.png"></a>
<a target="_blank" href="http://1" title="Linked In" ><img src="https://lh4.googleusercontent.com/-4KT3pDgCq0I/U2XwoHTiUfI/AAAAAAAAKl4/bjZBIJjOzNY/s48/linkedin.png"></a>
<a target="_blank" href="http://1" title="Pinterest" ><img src="https://lh6.googleusercontent.com/-PDoi06RC6PM/U2XwoSvjtyI/AAAAAAAAKmM/ytebgTVJGVs/s48/pinterest.png"></a>
<a target="_blank" href="http://1" title="YouTube" ><img src="https://lh6.googleusercontent.com/-y16ZWZb7G30/U2XwpbSXp0I/AAAAAAAAKmU/C8l50c9pIJM/s48/youtube.png"></a>
</div><!--end of social button menu by http://bloghelp.gr/ -->

YΓ. 1) Προσοχή : οπου βλέπετε τη φράση  http://1, να βάλετε τη διεύθυνση της δική σας σελίδας στο ανάλογο εικονίδιο

2)Μπορείτε να αλλάξετε τα εικονίδια με δικά σας, η να μειώσετε τον αριθμό τους, σβήνοντας την ανάλογη φράση από το κώδικα….

ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!
ΠΗΓΗ