Cara Membuat Widget Media Sosial Versi Metro UI
Jika anda pernah melihat Metro UI windows 8, maka anda akan familiar dengan tampilan widget ini. hal yang menonjol dari windows 8 yaitu munculnya Metro UI (User Interface). Metro adalah nama internal untuk bahasa desain yang di pergunakan oleh Microsoft.
Dalam posting kali ini, saya akan membagikan cara membuat widget media sosial seperti tampilan metro ui. widget ini di gunakan untuk membuat link media sosial anda, sebagai penunjang seo off page. untuk model tampilannya mirip dengan gambar di bawah ini.
Cara Membuat Widget Media Sosial Versi Metro UI
Cara memasangnya cukup mudah, yaitu dengan cara menambahkan widget di blogger anda, dan kemudian pilih "HTML/Javascript" setelah itu copy paste kode di bawah ini. oh iya, jangan lupa mengganti url yang saya warnai merah dengan url media sosial anda. lalu untuk mensetting lebar widged editlah warna tulisan yang bewarna hijau.
<div class='metro-social'>
<li><a class="fb" href=ganti dengan url FB anda rel="nofollow"></a></li>
<li><a class="tw" href=ganti dengan url Tweter anda rel="nofollow"></a></li>
<li><a class="gp" href=ganti dengan url google plus anda rel="nofollow"></a></li>
<li><a class="pi" href=ganti dengan url pinterest anda rel="nofollow"></a></li>
<li><a class="in" href=ganti dengan url linkedin anda rel="nofollow"></a></li>
<li><a class="yt" href=ganti dengan url youtube anda rel="nofollow"></a></li>
<li><a class="fd" href=ganti dengan url feedburner anda rel="nofollow"></a></li>
</div>
<div><small>Ingin widget seperti ini, lihat <a href="http://www.kalautau.com/2016/07/cara-membuat-widget-media-sosial-versi-metro-ui.html">
di sini
</a></small></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>
