Όμορφο social widget με hover εφέ

Βάλτε στο blog σας το widget που βλέπετε στην εικόνα με πολύ εύκολο τρόπο.

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

Απόκρυψη κώδικα

<style>
#WG-SWS {width: 260px;margin: 5px 20px;padding:5px;}
#WG-SWS li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}
#WG-SWS .icon {
background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCrZpU0xeNyulBi1oT-FyIwtGy8XRSTA0Djg_-qnNkikxYFHsBqw5hiNY-HOD-70-bjYC802vMp4QUpcc2RuKa2wZXMrXL0IEemD6Q9UjyuV7mO8ZGr2avliTDojqlDTKhYYrruMHbiSk/s1600/NBT-Social_Button.png') 0 0 no-repeat;
background-color: rgba(217, 30, 118, .42);
border-radius: 30px;
display: block;
color: #0033CC;
float:none;
height: 48px;
line-height: 48px;
margin: 5px 0;
position: relative;
text-align: left;
text-indent: 60px;
text-shadow: #333 0 1px 0;
white-space: nowrap;
width: 48px;
z-index: 5;
-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;
transition: width .25s ease-in-out, background-color .25s ease-in-out;
-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
text-decoration: none;}
#WG-SWS span:hover {visibility: hidden;}
#WG-SWS span {display: block;top: 25px;position: absolute;left: 60px;}
#WG-SWS .icon {color: #fafafa;overflow: hidden;}
#WG-SWS .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -382px;}
#WG-SWS .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -430px;}
#WG-SWS .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -478px;}
#WG-SWS .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}
#WG-SWS .linked {background-color: rgba(0, 87, 114, .42);background-position: 0 -574px;}
#WG-SWS .ytube {background-color: rgba(170, 0, 0, .42);background-position: 0 -670px;}
#WG-SWS .rss {background-color: rgba(255, 109, 0, .42);background-position: 0 -718px;}
#WG-SWS li:hover .icon {width: 250px;}#WG-SWS li:hover .icon {background-color: #d91e76;}
#WG-SWS li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}
#WG-SWS li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}
#WG-SWS li:hover .google {background-color: #A70000;background-position: 0 -94px;}
#WG-SWS li:hover .pint {background-color: #C00;background-position: 0 -142px;}
#WG-SWS li:hover .linked {background-color: #005772;background-position: 0 -190px;}
#WG-SWS li:hover .ytube {background-color: #A00;background-position: 0 -286px;}
#WG-SWS li:hover .rss {background-color: #EC5601;background-position: 0 -334px;}
#WG-SWS .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}
</style>

<div style='clear: both;'>
<ul id="WG-SWS">
<li><a href="https://www.facebook.com/TetsiWorld" class="icon fb">Κάντε μας Like στο Facebook</a><span>Κάντε μας Like στο Facebook</span> </li>
<li><a href="https://twitter.com/TetsiWorld" class="icon twit">Ακολουθήστε μας στο Twitter</a><span>Ακολουθήστε μας στο Twitter</span> </li>
<li><a href="https://plus.google.com/100087798353853492987/posts" class="icon google">Ακολουθήστε μας στο Google+</a><span>Ακολουθήστε μας στο Google+</span> </li>
<li><a href="http://www.pinterest.com/TetsiWorld" class="icon pint">Ακολουθήστε μας στο Pinterest</a><span>Ακολουθήστε μας στο Pinterest</span> </li>
<li><a href="http://in.linkedin.com/TetsiWorld" class="icon linked">Ακολουθήστε μας στο LinkedIn</a><span>Ακολουθήστε μας στο LinkedIn</span> </li>
<li><a href="http://www.youtube.com/user/meTetsi" class="icon ytube">Ακολουθήστε μας στο Youtube</a><span>Ακολουθήστε μας στο Youtube</span> </li>
<li><a href="http://feeds.feedburner.com/TetsiTech" class="icon rss">Εγγραφείτε μέσω RSS</a><span>Εγγραφείτε μέσω RSS</span></li>
</ul></div><div style='clear: both;'></div>