Widget Sosial Media Metro Style


Widget Sosial Media Metro Style
Sosial Media Metro Style memiliki tampilan yang dinamis dan stylish.
Berikut ini tutorial membuat Widget Social Media Metro Style di blogspot.
Demo langsung dapat sobat lihat diakhir artikel ini.
Tutorial Membuat Widget Sosial Media Metro Style Untuk Blog
Buka dasboard blog ▬►Tatak Letak ▬►Add gadget HTML
Seperti pada gambar dibawah
Lalu masukan kode berikut pada add gadget HTML tersebut.

Social Media Metro Style
<div class="metro-social">
<li><a class="fb" href="http://www.facebook.com"></a></li>
<li><a class="tw" href="http://twitter.com"></a></li>
<li><a class="gp" href="https://plus.google.com"></a></li>
<li><a class="pi" href="http://pinterest.com"></a></li>
<li><a class="in" href="https://www.linkedin.com"></a></li>
<li><a class="yt" href="http://www.youtube.com"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com"></a></li>
</div>
<div style="text-align: center;">
<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>
Jangan lupa mengganti url berikut
http://www.facebook.com ▬►di ganti dengan URL Facebook sobat
http://twitter.com ▬►di ganti dengan URL Twitter sobat
https://plus.google.com  ▬►di ganti dengan URL Akun Google sobat
http://pinterest.com ▬►di ganti dengan URL Pinterest sobat
https://www.linkedin.com ▬►di ganti dengan URL Linkedin sobat
http://www.youtube.com ▬►di ganti dengan URL Youtube sobat
http://feeds.feedburner.com ▬►di ganti dengan URL Feed Blog sobat
 
  
Widget Sosial Media Metro Style
Live Demo










  • Ditulis Oleh : Robby Armansyah

    DMCA.com Protection StatusAnda baru saja membaca artikel dengan judul Widget Sosial Media Metro Style. Di tulis oleh Robby Armansyah. Hak cipta di lindungi DMCA dan UUD
    URL laman ini.

    1 comments:

    avatar
    ×

    Thanks sob untuk informasinya :)
    http://goo.gl/fSVyKh