Sabtu, 06 Juli 2013

Tampilan Widget Metro-UI blogger ini diadopsi dari Tampilan Windows-8 milik Microsoft, karena tampilannya keren dan mudah dipasang pada blog, paling pas dipasang di sidebar dengan ukuran sidebar 300px. Jika ingin memodifikasi bentuk dan warnanya tidak dirubah bagian kode CSS nya. Atau jika ada yang tidak ingin digunakan tinggal dihapus saja bagian yang tidak ingin ditampilkan. Ingin memasangnya di template blogger tidak susah kok. Cara membuat Widget Sosial Profile bergaya Metro-UI ini ikuti saja langkah sederhana dibawah ini:

cara membuat widget social profile blogger

1. Login ke Blogger.com
2. Dashboard ---> Layout ( tata letak ) ---> add gadget ( tambah Gadget )
3. Copy semua kode dibawah ini:

<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/aspal.putih rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/cybermales></a></li>
<li><a class="gp" href="https://plus.google.com/113426109161769700032"></a></li>
<li><a class="pi" href=http://pinterest.com/your-pin rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/# rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/your-account></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/cybermales rel="nofollow"></a></li>
</div>
<style>
.metro-social{width:300px}
.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(http://goo.gl/PmrKh) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(http://goo.gl/rrPYG) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(http://goo.gl/bAJOi) no-repeat center center #da4a38}
.metro-social .pi{background:url(http://goo.gl/3rxg3) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(http://goo.gl/uwmHW) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(http://goo.gl/wVju1) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(http://goo.gl/Bq5xR) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(http://goo.gl/PmrKh) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(http://goo.gl/rrPYG) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(http://goo.gl/bAJOi) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(http://goo.gl/3rxg3) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(http://goo.gl/uwmHW) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(http://goo.gl/wVju1) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(http://goo.gl/Bq5xR) no-repeat center center #e9a01c}
</style>

4. Save template, selesai

Silahkan ubah masing masing profile saya dengan punya sobat. Selamat mencoba,  semoga berguna.



4 komentar:

  1. Tidak sulit toh, makasih sudah berkunjung...

    BalasHapus
  2. artikel nya bagus ijin nyobak gan jangan lupa mampir balik
    http://the-kampung-cyber.blogspot.com

    BalasHapus
  3. posting yg bagus izin nyobak gan follow back ya gan http://the-kampung-cyber.blogspot.com

    BalasHapus

Follow by Email

Blog Archive

Site Info

Total Kunjungan Ke Blog Ini