CARA MEMBUAT WIDGET SOCIAL PROFILE KEREN DI BLOG
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
- 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
0 komentar: