Cara membuat Social Profile Widget Keren: Metro UI

Oleh Unknown

Rabu, 16 September 2015

Bagikan :

Tweet

Cara membuat Social Profile Widget Keren: Metro UI , widget ini sangat menarik dengan beberapa warna yang keren , dan banyak sekali memiliki beberaa feature, seperti jejaring sosial, Efek hover dan desain yang elegan, Bersih (clean), tidak ada javascrit, no jquery, pokonya murni menggunakan CSS.





Cara memasang  membuat Social Profile Widget Keren: Metro UI .

Untuk membuatnya widgetnya sanatlah mudah, baik menggunakan blogspot, wordpress atau layanan blogging yang lainn dimana style CCS dan HTML pasti diterima pada widget atau template. Caranya Anda tinggal meambahkan kode widget pada bagian HTML/JavaScript.

1. Masuk Pada Menu Tataletak> Tambahkan Gadget> Pilih HTML/JavaScript.
2. Copy kode 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.

Tag : Desain