Widget Sosial Media dengan Style Metro

Halo, kali ini saya akan membagikan cara untuk membuat Widget Social Icons dengan Style Metro, style Metro dan Flat memang sedang menjadi kegemaran bagi beberapa web designer.
Dengan gaya yang simple nan elegan membuat banyak Blogger yang suka dengan Style yang satu ini.

Widget yang dibuat oleh Vinay Prajapati ini berisi 7 Ikon, diantaranya :

Facebook
Twitter
Google +
Pinterest
Linkedin
Youtube
RSS

Berikut Adalah Caranya

Pertama, Buka Template, Lalu pilih Edit HTML. Sepertu gambar dibawah ini

Kedua, Copy kode berikut ini di Atas </b:skin>

CSS.metro-social {
    max-width: 300px;
}
.metro-social li {
    position: relative;
    cursor: pointer;
    padding: 0;
    list-style: none;
}
.metro-social .fb, .tw, .gp, .pi, .in, .yt, .fd {
    float: left;
    margin: 1px;
    position: relative;
    display: block;
}
.metro-social .fb {
    background: url(//goo.gl/6xmUk) no-repeat center center #1f69b3;
    width: 140px;
    height: 141px;
}
.metro-social .tw {
    background: url(//goo.gl/oyiFK) no-repeat center center #43b3e5;
    width: 68px;
    height: 70px;
}
.metro-social .gp {
    width: 69px;
    height: 70px;
    background: url(//goo.gl/oT0kF) no-repeat center center #da4a38;
}
.metro-social .pi {
    background: url(//goo.gl/7olxx) no-repeat center center #d73532;
    width: 68px;
    height: 69px;
}
.metro-social .in {
    background: url(//goo.gl/PhFhj) no-repeat center center #0097bd;
    width: 69px;
    height: 69px;
}
.metro-social .yt {
    background: url(//goo.gl/zcwjB) no-repeat center center #e64a41;
    width: 140px;
    height: 69px;
}
.metro-social .fd {
    background: url(//goo.gl/lhBP1) no-repeat center center #e9a01c;
    width: 140px;
    height: 69px;
}
.metro-social li:hover .fb {
    background: url(//goo.gl/MH8AP) no-repeat center center #1f69b3;
}
.metro-social li:hover .tw {
    background: url(//goo.gl/hHRHv) no-repeat center center #43b3e5;
}
.metro-social li:hover .gp {
    background: url(//goo.gl/wva4B) no-repeat center center #da4a38;
}
.metro-social li:hover .pi {
    background: url(//goo.gl/IORvy) no-repeat center center #d73532;
}
.metro-social li:hover .in {
    background: url(//goo.gl/2zHrm) no-repeat center center #0097bd;
}
.metro-social li:hover .yt {
    background: url(//goo.gl/I1c4a) no-repeat center center #e64a41;
}
.metro-social li:hover .fd {
    background: url(//goo.gl/CjzDP) no-repeat center center #e9a01c;
}

Seperti Gambar dibawah ini

Ketiga, Buka Tata Letak, Lalu Klik Tambahkan Gadget, Lalu Pilih HTML/Javascript. Seperti gambar di bawah ini.

Keempat, Copy Kode HTML berikut ke Form Widget yang disediakan

HTML    <div class='metro-social'>
      <li><a class="fb" href="https://www.facebook.com/#" target="blank" rel="nofollow"></a></li>
      <li><a class="tw" href="https://twitter.com/#" target="blank" rel="nofollow"></a></li>
      <li><a class="gp" href="https://plus.google.com/#" target="blank" rel="nofollow"></a></li>
      <li><a class="pi" href="https://pinterest.com/#" target="blank" rel="nofollow"></a></li>
      <li><a class="in" href="https://www.linkedin.com/in/#" target="blank" rel="nofollow"></a></li>
      <li><a class="yt" href="https://www.youtube.com/#" target="blank" rel="nofollow"></a></li>
      <li><a class="fd" href="https://feeds.feedburner.com/#" target="blank" rel="nofollow"></a></li>
    </div>

Seperti Gambar di bawah ini