Membuat Social Profile Widget Keren: Metro UI -Assalamu Alaikum WR.WB Hallo sahabat TrikMITOS-blog seputar informasi, islami,kesehatan, kecantikan Tips dan Trik android kord gitar dll, Pada Artikel yang anda baca kali ini dengan judul Membuat Social Profile Widget Keren: Metro UI, saya telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya, yang mungkin bermanfaat buat anda. mudah-mudahan isi postingan Artikel Blogger Tutorials, Artikel Blogger Widgets, Artikel Sosial Bookmarking, yang saya tulis ini dapat anda pahami, karna mungkin dari beberapa pengunjung bahasa atau tulisan saya ini agak sulit di mengerti...hehehe benarkah??!!!. baiklah, tanpa panjang lebar dan bertele-tele lagi selamat membaca, jangan lupa baca juga artikel lainnya, karena masih banyak artkel yang menarik lainnya yang menurut saya pribadi sangat bermanfaat

Judul : Membuat Social Profile Widget Keren: Metro UI
link : Membuat Social Profile Widget Keren: Metro UI
Gambar dibawah ini

Membuat Social Profile Widget Keren: 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.
View Demo

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

Cara menambahkan widget ini ke blog

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=http://www.facebook.com/amatullah.syukur rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/amatullahsyukur></a></li>
<li><a class="gp" href="https://plus.google.com/116382152511220195182"></a></li>
<li><a class="pi" href=http://pinterest.com/amatullahsyukur rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/amatullahsyukur rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/amatullahsyukur></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/amatullahsyukur 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>

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.

Demikianlah Artikel Membuat Social Profile Widget Keren: Metro UI

Sekianlah artikel Membuat Social Profile Widget Keren: Metro UI kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya jangan lupa tinggalkan komentar anda dan share yang banyak....heheheh.

Anda sekarang membaca artikel Membuat Social Profile Widget Keren: Metro UI dengan alamat link https://trikmitos.blogspot.com/2013/05/membuat-social-profile-widget-keren.html