Cara Memasang Tombol Share Metro UI Windows 8 Di Blog

Cara Memasang Tombol Share Metro UI Windows 8 Di Blog

sumber:http://rizkyekoyblog.blogspot.com

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/SHINIGAMI_blog rel="nofollow"></a></li>

<li><a class="tw" href=http://twitter.com/SHINIGAMI_blog></a></li>

<li><a class="gp" href="https://plus.google.com/SHINIGAMI_blog"></a></li>

<li><a class="pi" href=http://pinterest.com/SHINIGAMI_blog rel="nofollow"></a></li>

<li><a class="in" href=https://www.linkedin.com/in/SHINIGAMI_blog rel="nofollow"></a></li>

<li><a class="yt" href=http://www.youtube.com/SHINIGAMI_blog></a></li>

<li><a class="fd" href=http://feeds.feedburner.com/SHINIGAMI_blog 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.

Related Posts:

Tweet