Wednesday, August 28, 2013

Demo Widget 1

Code demo widget follow social media 1:

<style>
.facebookbt{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    
    overflow:hidden;

    } 
.twitterbt{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    
    overflow:hidden;

    } 
.googleplusbt{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    
    overflow:hidden;

    } 
.tumblrbt{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    
    overflow:hidden;

    } 
.linkedinbt{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    
    overflow:hidden;

    } 
.youtubebt{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    
    overflow:hidden;

    } 
.rssbt{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    
    overflow:hidden;

    } 

.facebookbt:hover 
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}
.twitterbt:hover 
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}
.googleplusbt:hover 
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}
.tumblrbt:hover 
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}
.linkedinbt:hover 
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}
.youtubebt:hover 
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}
.rssbt:hover 
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

.metro-social{width:315px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .facebookbt,.twitterbt,.googleplusbt,.tumblrbt,.linkedinbt,.youtubebt,.rssbt{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .facebookbt{background: center #1f69b3;width:140px;height:141px}
.metro-social .twitterbt{background: center #43b3e5;width:68px;height:70px}
.metro-social .googleplusbt{background: center #da4a38;width:69px;height:70px}
.metro-social .tumblrbt{background: center #9622e3;width:68px;height:69px}
.metro-social .linkedinbt{background: center #0097bd;width:69px;height:69px}
.metro-social .youtubebt{background: center #e64a41;width:140px;height:69px}
.metro-social .rssbt{background: center #e9a01c;width:140px;height:69px}
</style>

<div class="metro-social">
<br />
<li><center><a class="facebookbt" href="#" title="facebook plengdut" target="_blank" style="color:white"><i class="icon-facebook-sign" style="top: 10px; position:relative; font-size:120px;"></i></a></center></li>
<li><center><a class="twitterbt" href="#" title="twitter plengdut" target="_blank" style="color:white"><i class="icon-twitter-sign icon-4x" style="top: 5px; position:relative;"></i></a></center></li>
<li><center><a class="googleplusbt" href="#" rel="publisher" title="plengdut google plus" target="_blank" style="color:white"><i class="icon-google-plus-sign icon-4x" style="top: 5px; position:relative;"></i></a></center></li>
<li><center><a class="tumblrbt" href="#" title="tumblr" target="_blank" style="color:white"><i class="icon-tumblr-sign icon-4x" style="top: 5px; position:relative;"></i></a></center></li>
<li><center><a class="linkedinbt" href="#" title="linkedin" target="_blank" style="color:white"><i class="icon-linkedin-sign icon-4x" style="top: 5px; position:relative;"></i></a></center></li>
<li><center><a class="youtubebt" href="#" title="youtube" target="_blank" style="color:white"><i class="icon-youtube icon-4x" style="top: 10px; position: relative;"></i></a></center></li>
<li><center><a class="rssbt" href="#" title="sitemap.xml" target="_blank" style="color:white"><i class="icon-rss icon-4x" style="top: 10px; position: relative;"></i></a></center></li>
</div>

ganti tanda pagar pada href="#" dengan link account sosial media milik anda.

No comments:

Post a Comment