Senin, 05 Agustus 2013

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 13

Selladrt 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

:: Kunjungi Sumbernya ::

Tidak ada komentar:

Posting Komentar

Followers

Top Komentar

Total Tayangan Halaman

Playboy Pink