Metro Style Social Icons For Blogger

Hari ini saya akan menunjukkan bagaimana sobat dapat menambahkan ikon Sosial Metro Style ke blog sobat. Ikon ini murni terbuat dari CSS tanpa menggunakan JavaScript apapun. Muncul dengan efek hover yg terlihat elegant dan keren.

Widget ini diciptakan oleh Vinay Prajapati yang berisi 7 ikon situs jejaring sosial terkenal. Mereka adalah - Facebook, Twitter, Youtube, Google +, LinkedIn, Pinterest dan RSS. Demo widget ini dapat dilihat di bawah ini

Caranya Gini

Tambah Widget
Pergi ke Blogger → Tata Letak → Tambah Widget → HTML / JavaScript. Paste kode di bawah ini.

CSS

<style type="text/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;
}
</style>

MarkUp 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>

Keterangan Ganti tanda # dengan Username atau ID akun sobat.

Sekian tutorial ini, semoga bermanfaat dan mempercantik tampilan blog sobat.