Membuat social profile Metro UI

Kali ini santri balaghy akan share trik blogger membuat social profile Metro UI. Seperti apa triknya, nih langsung aja

Demo widget

1. Masuk ke akun blogger

2. Pilih menu tata letak ]]> klik Tambah gadget

3. Cari pilihan Html JavaScript kemudian masukkan script di bawah ini

<div class='metro-social'> <li><a class="fb" href=http://www.facebook.com/santri.balaghy rel="nofollow"></a></li> <li><a class="tw" href=http://twitter.com/elbalaghy></a></li> <li><a class="gp" href="https://plus.google.com/112650595202697016520"></a></li> <li><a class="pi" href=http://pinterest.com/ rel="nofollow"></a></li> <li><a class="in" href=http://id.linkedin.com/pub/muhamad-irsyad/76/71a/a5b rel="nofollow"></a></li> <li><a class="yt" href=http://www.youtube.com/channel/ucifemz_8rvdxnklb9-jyx2a></a></li> <li><a class="fd" href=http://feeds.feedburner.com/ 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>

4. ganti social profile dengan milik sahabat balaghy.
Langkah terakhir simpan template

Sekian trik blogger membuat social profile Metro UI semoga bermanfaat.

Selamat mencoba,
Salam Sahabat Balaghy!

Sumber: tipstrikblogging