Cara Pasang Social Icon Metro Style

Metro Style saat ini sedang menjadi trend tesendiri dalam dunia design website, dan metro style sendiri bermula dari lahirnya windows 8 yang menjadi UI interface dari operating sytem tersebut.

Social Icon metro Style juga merupakan adaptasi dari bentuk metro stylenya windows 8 namun di kemas untuk blog dalam bentuk Social Icon..

Silahkan sobat lihat hasilnya di blog ChekMad yang lainnya di SINI

Sobat bloger tertarik untuk membuatnya, ikuti cara chekmad di bawah ini.

1. Masuk ke Blogger ini yang paling utama dan penting
2. Pilih TATA LETAK  > Buat Widget Baru / Add Widget / HTML/Javascript 
3. Masukan kode dibawah ini dalam HTML/Javascript

 <style type="text/css">
.metro-social {max-width: 300px;}
.metro-social li {position: relative; cursor: pointer; padding: 0; list-style: none;}
.metro-social .fb,.tw,.gp,.fd {float: left; margin: 1px; position: relative; display: block;}
.metro-social .fb {width: 140px; height: 144px;background: url(//goo.gl/6xmUk) no-repeat center center #1f69b3; }
.metro-social .tw {width: 68px; height: 70px; background: url(//goo.gl/oyiFK) no-repeat center center #43b3e5; }
.metro-social .gp {width: 69px; height: 70px; background: url(//goo.gl/oT0kF) no-repeat center center #da4a38;}
.metro-social .fd {width: 140px; height: 69px;background: url(//goo.gl/lhBP1) no-repeat center center #e9a01c; }
.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 .fd {background: url(//goo.gl/CjzDP) no-repeat center center #e9a01c;}
</style>

<div class='metro-social'>
<li><a class="fb" href="https://www.facebook.com/#" target="blank" rel="nofollow"></a></li>
<li><a class="tw" href="https://twitter.com/#" target="blank" rel="nofollow"></a></li>
<li><a class="gp" href="https://plus.google.com/#" target="blank" rel="nofollow"></a></li>
<li><a class="fd" href="https://feeds.feedburner.com/#" target="blank" rel="nofollow"></a></li>
</div>

  Simpan dan silahkan lihat hasilnya .

 Semoga bermanfaat buat Sobat bloger semua