Untuk menginstal widget ini ke blog sangat mudah, baik blog anda dengan
flatfrom blogger, wordpress atau layanan blogging lainnya dimana style
CSS dan HTML diterima pada widget atau template. Anda hanya perlu
menambahkan kode gadget/widget pada bagian HTML/JavaScript.
- Pada dasbor >> Masuk menu Tata Letak >> Tambah Gadget >> Pilih HTML/JavaScript
- Copy dan paste kode berikut pada kolom konten:
<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/rifaldiblogs rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/rifaldiblogs></a></li>
<li><a class="gp" href="https://plus.google.com/115388735235347100167"></a></li>
<li><a class="pi" href=http://pinterest.com/rifaldiblogs rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/rifaldiblogs rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/rifaldiblogs></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/rifaldiblogs rel="nofollow"></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;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>
Note: Ganti tulisan berwarna
MERAH dengan milikmu sendiri
- Simpan dan lihat hasilnya diblog anda.