Cara Mudah Membuat Social Profile Widget Metro UI Gaul Untuk Blog

Cara Ngeblogku - Di posting yang berjudul "Cara Mudah Membuat Social Profile Widget Metro UI Gaul Untuk Blog" kali ini Cara Ngeblogku akan berbagi / share ilmu dan pengetahuan, bagaimana caranya membuat Social Profile Widget pada Blogspot. Cara Ngeblogku akan posting cara membuat widget profil sosial networking yang gaul dengan colored style. Widget untuk Blogspot ini diberi nama Metro UI. Widget Metro UI adalah hasil karya dari Vinay Prajapati.

Fitur - fitur dari Widget Metro UI :

• Terdiri dari 7 (tujuh) jejaring social yang paling disukai
• Memiliki Efek hover dan desain yang elegan
• Penampilannya Sangat rapi dan bersih
• Tidak ada JavaScript, No Jquery, murni dengan CSS

Cara menambahkan Widget Metro UI ke Blog :

Untuk setting / pemasangan Widget Metro UI ini ke blog sangat mudah, baik blog kamu dengan Platfrom blogger, wordpress atau layanan blogging yang lain, dimana style CSS dan HTML diterima pada widget atau template. Kamu hanya perlu menambahkan kode Gadget/Widget pada bagian HTML / JavaScript.

Langkah-langkah cara membuat Widget Metro UI di Blogger :

• Silahkan Login ke Account Blogger kamu
• Silahkan kamu masuk ke Dashboard
• Silahkan kamu pilih menu Tata Letak / Layout
• Silahkan kamu pilih Add a Agdget / Tambah Gadget
• Silahkan kamu pilih HTML / JavaScript 
• Copy dan paste kode berikut di kolom content

<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/suparno.parno.33483 rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/varnow></a></li>
<li><a class="gp" href="https://plus.google.com/116090557164528367635"></a></li>
<li><a class="pi" href=http://pinterest.com/id pinterest kamu rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/id linkedin kamu rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/id youtube kamu></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/id feedburner kamu 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: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>

• Dan Silahkan kamu ganti code HTML / JavaScript link profil yang saya warnai dengan link profil punya kamu
• Simpan / Save dan kamu bisa melihat hasilnya di blog kamu

Semoga tutorial cara membuat social profile widget pada blog ini berguna dan bermanfaat buat kamu. Terima kasih.