Membuat widget keren social Profile Metro UI - Sahabat MW bagaimana kabarnya... semoga baik-baik aja. gini Gan kali ini saya ingin memposting kan cara membuat widget keren social Profile Metro UI supaya widget ini bisa membuat blog sahabat MW semakin keren sebelum ke tutorialnya saya kasih Preview nya di bawah ini :
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.
Step by step for blogger
Step by step for blogger
- 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/mwalidain.blog rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/MustaidulW></a></li>
<li><a class="gp" href="https://plus.google.com/101560192906077776792"></a></li>
<li><a class="pi" href=http://pinterest.com/MWalidain rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/MWalidain rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/MWalidain></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/MWalidain 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>
Keterangan : Tulisan yang berwarna di tulis sesuai akun yang anda miliki<li><a class="fb" href=http://www.facebook.com/mwalidain.blog rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/MustaidulW></a></li>
<li><a class="gp" href="https://plus.google.com/101560192906077776792"></a></li>
<li><a class="pi" href=http://pinterest.com/MWalidain rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/MWalidain rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/MWalidain></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/MWalidain 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>
- Kemudian disimpan dan lihat hasilnya.
.
