Cara menciptakan Social Profile Widget Keren: Metro UI , widget ini sangat menarik dengan beberapa warna yang keren , dan aneka macam mempunyai beberaa feature, menyerupai jejaring sosial, Efek hover dan desain yang elegan, Bersih (clean), tidak ada javascrit, no jquery, pokonya murni memakai CSS.Cara memasang membuat Social Profile Widget Keren: Metro UI .
Untuk membuatnya widgetnya sanatlah mudah, baik memakai blogspot, wordpress atau layanan blogging yang lainn dimana style CCS dan HTML niscaya diterima pada widget atau template. Caranya Anda tinggal meambahkan isyarat widget pada bab HTML/JavaScript.
1. Masuk Pada Menu Tataletak> Tambahkan Gadget> Pilih HTML/JavaScript.
2. Copy isyarat dibawah ini pada kolom konten.
<div class="metro-social">
<br />
<li><a class="fb" href="http://www.facebook.com/contohblogspot" rel="nofollow"></a></li>
<li><a class="tw" href="http://twitter.com/contohblogspot"></a></li>
<li><a class="gp" href="https://plus.google.com/contohblogspot"></a></li>
<li><a class="pi" href="http://pinterest.com/contohblogspot=" nofollow=""></a></li>
<li><a class="in" href="https://www.linkedin.com/in/contohblogspot=" nofollow=""></a></li>
<li><a class="yt" href="http://www.youtube.com/contohblogspot"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/contohblogspot" 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>
Ingat ganti Link warna Merah Dengan Profil Milik Anda.
3. Klik Save.
Demikian cara membuat membuat Social Profile Widget Keren: Metro UI . Dengan mudah.
Sumber http://contohblogspotnih.blogspot.com/