Translate

Jumat, 07 Juni 2013

Cara Membuat Widget social profile Metro Style Windows 8

Caranya :

  • Login ke Bloger
  • pilih Tata Letak
  • klik Tambah Gadget
  • pilih HTML/Java scrip
  • lalu Copy & Paste kode di bawah ini.

<div class="MH" id="MH">
<ul id="MH-social">
<li><a class="fb" href="FACEBOOK"></a></li>
<li><a class="tw" href="TWITTER"></a></li>
<li><a class="gp" href="GOOGLE PLUS"></a></li>
<li><a class="fd" href="RSS FEED"></a></li>
</ul>
</div>
<style>
#MH-social{width:305px;float:left;margin-top:10px}#MH-social li{position:relative;cursor:pointer;padding:0!important}#MH-social .fb,.tw,.gp,.fd{position:relative;-moz-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out;z-index:5;display:block;float:left;margin:1px}#MH-social .fb{width:150px;height:152px;background:url(//goo.gl/6xmUk) no-repeat center center #3b5998}#MH-social .tw{width:150px;height:74px;background:url(//goo.gl/oyiFK) no-repeat center center #3b5998}#MH-social .gp{width:150px;height:74px;background:url(//goo.gl/oT0kF) no-repeat center center #3b5998}#MH-social .fd{width:302px;height:74px;background:url(//goo.gl/ncoLY) no-repeat center center #3b5998}#MH-social li:hover .fb{-moz-transition:all .1s ease-in-out;-webkit-transition:all .1s ease-in-out;background:url(//goo.gl/MH8AP) no-repeat center center #3468b6}#MH-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #4099ff;-moz-transition:all .1s ease-in-out;-webkit-transition:all .1s ease-in-out}#MH-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #e44524;-moz-transition:all .1s ease-in-out;-webkit-transition:all .1s ease-in-out}#MH-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #f60;-moz-transition:all .1s ease-in-out;-webkit-transition:all .1s ease-in-out}
</style>

NB : Ganti tulisan berwarna orange dengan link anda.

0 komentar:

Poskan Komentar

Leave comments but don't spam

Related Posts Plugin for WordPress, Blogger...

Perhatian!

Tidak Semua Game yang ada disini saya coba, mohon di maklumi jika ada kekurangan.