Widget Metro Style Social Icon Untuk Blogspot

Kali ini saya akan share cara buat widget icon social media metro style di blog. Widget ini hanya CSS tanpa javascript apapun, widget ini juga dilengkapi dengan efek hover, sehingga terlihat keren & elegan. Berikut Penampakan Ikon Social Metro Style-nya.

Widget Metro Style Social Icon

Saya menemukan widget ini waktu mengunjungi blog barunnya mbak +Dian Anarchyta. Widget ini berisi 7 ikon situs social media terkenal, yaitu Facebook, Twitter, Google+, Pinterest, Linkedin, Youtube & RSS Feeds. Cara memasang widget tersebut ke blog anda juga tidak susah alias gampang! Bagi anda yang ingin memasang widget keren ini ke Blog anda, silahkan ikuti tutorial ini :

Tutorial Memasang Widget Metro Style Social Icon Di Blog :

1.) Masuk ke Dasbor Blogger, setelah itu pilih "tata letak"

2.) Klik "Tambahkan Gadget" di tempat widget ini akan di pasang, lalu pilih "HTML/Javascript".

3.) Masukkan Code di bawah ini :

<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>
<div class='metro-social'>
<li><a class="fb" href="https://www.facebook.com/ID_FB" target="blank" rel="nofollow"></a></li>
<li><a class="tw" href="https://twitter.com/Username_twitter" target="blank" rel="nofollow"></a></li>
<li><a class="gp" href="https://plus.google.com/ID_Google+" target="blank" rel="nofollow"></a></li>
<li><a class="pi" href="https://pinterest.com/ID_pinterest" target="blank" rel="nofollow"></a></li>
<li><a class="in" href="https://www.linkedin.com/in/ID_linkedin" target="blank" rel="nofollow"></a></li>
<li><a class="yt" href="https://www.youtube.com/Id_Youtube" target="blank" rel="nofollow"></a></li>
<li><a class="fd" href="https://feeds.feedburner.com/Id_Feedburner" target="blank" rel="nofollow"></a></li>
</div>

4.) Ganti teks berwarna Merah dengan link social media kalian, lalu klik simpan & selesai :)

Semoga Bermanfaat :)

Widget Metro Style Social Icon Untuk Blogspot 2014-10-28T17:04:00+07:00 Rating: 4.5 Diposkan Oleh: Anonymous