Cara Memasang Tombol Share Metro UI Windows 8 Di Blog

Mau tampilan tombol share anda seperti yang di atas caranya gampang kok lihat saja di bawah ini :


1. Pada dasbor >> Masuk menu Tata Letak >> Tambah Gadget >> Pilih HTML/JavaScript
2. Copy dan paste kode berikut pada kolom konten:

<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/rizkyblog rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/rizkyblog></a></li>
<li><a class="gp" href="https://plus.google.com/u/0/102027820109898512345/"></a></li>
<li><a class="pi" href=http://pinterest.com/rizkyblog rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/rizkyblog rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/rizkyblog></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/rizkyblog 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>

Kustomisasi: Ganti tulisan yang berwarna dengan alamat profil anda anda.

3. Simpan dan lihat hasilnya diblog anda.

Demikian tutorial kali ini, cara membuat tombol share berbentuk metro UI widget pada blog. Semoga bermanfaat.

Ditulis Oleh : Rizky

Sobat sedang membaca artikel tentang Cara Memasang Tombol Share Metro UI Windows 8 Di Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini. Silakan di rubah dan sesuwekan sesuka selera sobat <a href="http://rizkyekoyblog.blogspot.com/2013/08/cara-memasang-tombol-share-metro-ui.html" target="_blank">Cara Memasang Tombol Share Metro UI Windows 8 Di Blog</a>

:: Kunjungi Sumbernya ::