WIDGET για κοινωνικά δίκτυα με στυλ wid8



Ένα WIDGET για τα κοινωνικά δίκτυα του blog σας που μοιάζει μετά γραφικά τον windows 8


Αντιγραφή επικόλληση τον παρακάτω κώδικα.



<style>
.seconds{
text-align:right;
color:#000;
font-size:10px;
}
.supportive a:active{position:relative;top:1px}
 .widget-item-control a{display:none;}
    .widget-item-control a{display:none;}
    #supportive{width: 300px;
    float: left;margin-top: 10px;}
    #supportive li{position:relative; cursor:pointer; padding: 0 !important;}
    #supportive .facebook, .googleplus, .rss, .twitter{
    position: relative;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    z-index: 5;
    display: block;
    float: left;
    margin: 1px;}
    #supportive .icon{}
    #supportive .facebook{width: 147px;
    height: 150px;
    background: rgba(59,89,152,1) url("https://lh4.googleusercontent.com/-6tuOBGcpzGc/URPO_I2Yj9I/AAAAAAAAC_0/qBm56PAG1yY/h120/facebook.png") no-repeat center center;}
    #supportive .twitter{width: 148px;
    height: 74px;
    background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN6yQjdFj5FwekZjOEAiaL8cZlPg7NVQwjI4lfrC-ojNgcPVDbzuS2gOHQSopxUKQz3o9c9wtC3hsulzp5weZZ5GyRKqQ1vxsyb2PBXsTf_JKtAIfmvEcsJ_bEGoN2GnyoBNjfBRFYtUu0/s1600/Twitter.png") no-repeat center center;}
    #supportive .googleplus{width: 148px;
    height: 74px;
    background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9HhOI-0JHQrshWvz_IpialAnNbZOaP-_0Kg_0P2UyS0_5e07MJnv5vQAkENypEmPTxRoSsUcoQk3UAegoBcI2dnsF4FQsHlVHm43aONYzpRl_1D6XOcWICN2TPoRvl_aaaX9_6y6rsZpj/s1600/google+plus.png") no-repeat center center;}
    #supportive .rss{ width: 299px;
    height: 74px;
    background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUjWTf81xK_3y6d7Ze6qEdqXcUEvCFwTnzg2zGQ14cJSsuOHURySbOektnCLuTj1-zHHhmk7eOTNp1O3LMh8hywcQ-4MJohcGzCcdOv1tM_kGmLBVBYln1-QepkFBioM8Ckz8u_2GEKaE9/s1600/rss.png") no-repeat center center;}
    #supportive li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out;
-webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
    -webkit-transition: all 0.1s ease-in-out;}
    #supportive li:hover .twitter{background:rgba(64,153,255,1) url("https://lh6.googleusercontent.com/-gp5q_y7kibQ/URPO_I6-sKI/AAAAAAAAC_w/twhFzlX2p1c/h120/Twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;}
    #supportive li:hover .googleplus{background:rgba(228,69,36,1) url("https://lh6.googleusercontent.com/-5-00TE6gtvM/URPO_ALyNwI/AAAAAAAAC_4/A4Dr7Hg7C6A/h120/google+plus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;}
    #supportive li:hover .rss{background:rgba(255,102,0,1) url("https://lh4.googleusercontent.com/-NjlbntNHzFI/URPPCHuQ_XI/AAAAAAAADAI/S2lzrz6uZ0c/h120/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;}
</style>
<ul id='supportive'>
<li><a class='icon facebook' href='http://www.facebook.com/FaceBookPage'/></a></li>
<li><a class='icon twitter' href='http://twitter.com/TwitterUserName'/></a></li>
<li><a class='icon googleplus' href='https://plus.google.com/GooglePlusUser/PageID/'/></a></li>
<li><a class='icon rss' href='http://feeds.feedburner.com/FeedBurnerUserName'/></a></li>
<div class="seconds">
<a href="http://www.foulscode.blogspot.gr">Get This</a>
</div></ul>


DEMO

Αντικαταστήστε με τα δίκασα url  και πατήστε αποθήκευση.
Κατηγορίες:
Σχόλια