Membuat Social Profile Widget Metro UI

Alhamdulillah setelah sebelumnya saya posting tutorial membuat modifikasi pada widget profil blogger, kali ini saya ingin mengetengahkan cara membuat widget profil sosial networking menarik dengan colored style. Widget ini dinamai Metro UI oleh designernya Vinay Prajapati. 

Fitur

  • Meliputi 7 jejaring social yang paling sering digunakan
  • Efek hover dan desain yang elegan,
  • Sangat rapi dan bersih
  • Tidak ada JavaScript, No Jquery, murni dengan CSS
Untuk menginstal widget ini ke blog sangat mudah, baik blog anda dengan flatfrom blogger, wordpress atau layanan blogging lainnya dimana style CSS dan HTML diterima pada widget atau template. Anda hanya perlu menambahkan kode gadget/widget pada bagian HTML/JavaScript.
Step by step for blogger
  • Pada dasbor >> Masuk menu Tata Letak >> Tambah Gadget >> Pilih HTML/JavaScript
  • Copy dan paste kode berikut pada kolom konten: 


<div class='metro-social'>
<li><a class="fb" href=fb anda rel="nofollow"></a></li>
<li><a class="tw" href=twiter anda></a></li>
<li><a class="gp" href="https://plus.google.com/116123456789123456789"></a></li>
<li><a class="pi" href=http://pinterest.com/akun anda rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/akun anda rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/akun anda></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/akun anda rel="nofollow"></a></li>
</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:130px;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:130px;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>



Kustomisasi: Ganti link profil saya dengan link profil milik anda.


    

  • Simpan dan lihat hasilnya diblog anda. 
    • 


Demikian tutorial kali ini, cara membuat social profile widget pada blog. Semoga bermanfaat.


    Share artikel ke:
    Facebook
Google+
Twitter
Digg




























Label:































0
komentar:
        
















Posting Komentar




















        

      










Langganan:
Posting Komentar (Atom)