Home » » Cara Membuat Widget Social Profile Keren : Metro UI

Cara Membuat Widget Social Profile Keren : Metro UI

Ditulis oleh Dicky Fajriansyah pada Sabtu, 11 Mei 2013 | 04.18


Hai sobat blogger.... Kali ini Dicky's akan menshare Tips Blog yang berjudul Cara Membuat Widget Social Profile Keren : Metro UI | Widget yang Dicky's share ini bukan social share media ya, tapi widget ini social profil. Widget ini sangat keren sobat, melebihi widget social yang biasanya kita pakai dengan fitur efek hover dan desain yang elegan, sangat rapi dan bersih, tidak ada JavaScript, No Jquery, murni dengan CSS. Ya, langsung ini Tips-nya.

Berikut Cara Membuat Widget Social Profile Keren : Metro UI :

  • Login ke Blogger, atau klik disini
  • Pilih Tata Letak --> Tambahkan Gadget --> HTML/JavaScript
  • Copy kode dibawah ini dan letakkan ke kolom HTML/JavaScript
<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/ID Facebook Sobat rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/ID Twitter Sobat></a></li>
<li><a class="gp" href="https://plus.google.com/ID Google+ Sobat"></a></li>
<li><a class="pi" href=http://pinterest.com/ID Pinterest Sobat rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/ID Linkedin Sobat rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/ID YouTube Sobat></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/ID FeedBurner Sobat 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 sudah tercantum dikode

  • Simpan

Semoga Tips Blog yang berjudul Cara Membuat Widget Social Profile Keren : Metro UI bisa bermanfaat......
dan selamat mencoba.......
Dilarang menduplikasi dan menyerbarluaskan artikel tanpa menyertakan sumbernya. Jika melanggar, berarti telah melanggar UUD 1945 No. 19 Tahun 2002 Tentang Hak Cipta dan akan dijatuhi denda.
thumbnail Title: Cara Membuat Widget Social Profile Keren : Metro UI
Posted by:Dicky Fajriansyah
Published :2013-05-11T04:18:00-07:00
Rating: 5
Reviewer: 100 Reviews
Cara Membuat Widget Social Profile Keren : Metro UI

0 komentar:

Posting Komentar