Membuat Widget Share Bergaya Metro Windows 8

Sharing Metro Windows 8

Salam Blogger!

Apa kabar pembaca setia blog sederhana ini, semoga anda sehat selalu ;) bagi sobat yang ingin Follow Blog ini silahkan KLIK DISINI. Pada artikel yang berkaitan sebelumnya saya pernah mebagikan tentang bagaimana Cara Membuat Recent Comment  Bergaya Metro maka pada sore ini saya kan membagikan bagaimana cara membuat Tombol Share bergaya metro yang mengadaptasi dari Windows 8, tampilannya yang menarik, tidak memberatkan loading dan cara membuatnya tanpa edit HTML, bagi sobat yang ingin mencobanya silahkan ikuti caranya dibawah ini :

1.Klik Tata Letak.

2.Klik Elemen Halaman.

3.Klik Tambah Gadget.

4.Kemudian Pilih HTML/Javascript.

5. Copy paste kode dibawah ini :

Semoga Bermanfaat.

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8neknFpY1Hqz-5PaAKqll1A4USLoLTuydo2OvKL9l_W9WABvpMaxjgctlDY_Z3CXyDyETV8oQAoSUI2E4YKWboCDYyatGu-KCk7vlu-XhYHo2exR15OFd47vJgR3P0WfDtclkj1wj0FU/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/AVvXsEjrSmPkCcK3iYRda0_qIajeXQ5r15UHH72YYZCxw8MJxcdr1R5BqcpYILlwPRrPW0ftXglRqhwRdqsyRL4B3Ka-UfXW5zERCj7T-7WZMlv0o3Iqxs7JrY8meaMk7g60Py-A0jS02EOjNsHb/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/AVvXsEgsTp4KPCnszDRgAv5UIxAQNxvDucWitMZQHDkz8NWLytUvzByjHmbcW5Ev48fvSBrDxAh-TeiVvhTNmUjw_xYheeEgWVnBRXgUbwTEx-7BvcN4Ei7Ys5tXAY7a87oifTrE5J4zTN2cRVTr/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/AVvXsEjF6uCjHDNVyEvMmBW-kCFfDz8kqSsGc6MIfUkKqe3ni3s5V7Rytp0AjJAhra0Ol0jSaixtjdgPURbLLAwFSYbcJzKzSWFEeH647ReB0_E96Wwm5ONpkmY2Hq60_GxR5sP2FmuzAYvucb3O/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmDxnmuXjVJ2KRGo5gFqkBqMXWcGTg0rysT-n1nxzub8x75-iyI7rpdVHqH_arinQH1pfhiHtrHyT8-ZA-abbrAD3eUNEMyF55odvklfcxGT_DiIZFLtjK6BqBQrTK6I7QTap6dijbG1M/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKpG5CE9y3Quj4GlBh1H2GNbZJEwbx__75-w9MbqB7D-XSBsAy_s020qtn6K_Fdziy6zALVQGKcPEp7k5Fl_WV16hhMikeg6zBYpgIoaKfhcHcyW4_mC7n5wRxbyBm4fYz37GBv7rXYRI/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimcmolCKm5Dq8wIjTCOxcaPurEMyQFza59DHlG3rm_6ZyQ_qiqqTqB-avJsngj8JiFvW_nbOzz974dc0w2mm6BBFOYVS5_jlNSB0yUOgsYUxyD4dGJ_GZrJGZl_vQOpoU7qV-Aetpu8h0/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">

C O D E