Menambah Widget Social Profile Keren Ala Windows 8 : Metro UI - Hallo sahabat Rumah Musafir Ilmu, Pada Artikel yang anda baca kali ini dengan judul Menambah Widget Social Profile Keren Ala Windows 8 : Metro UI, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogspot, Artikel Widget, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Menambah Widget Social Profile Keren Ala Windows 8 : Metro UI
link : Menambah Widget Social Profile Keren Ala Windows 8 : Metro UI

Menambah Widget Social Profile Keren Ala Windows 8 : Metro UI

Setelah sekian lama Tutorial Jitu Akhbar Islam berdiam diri, kini tiba saatnya saya memberikan Tutorial yang benar-benar Jitu untuk dipraktekkan. Bagi anda yang ingin melihat artikel sebelumnya, silahkan baca Widget Cantik Untuk Menampilkan Artikel Terbaru Pada Label Tertentu yang mungkin juga anda butuhkan saat ini.

Baiklah, apa itu Widget Social Profile Keren Ala Windows 8 / Metro UI? adalah social button keren yang colourful seperti halnya Windows 8 yang juga digunakan oleh Tutorial Jitu Akhbar Islam. Silahkan lihat gambar berikut untuk contoh tampilannya:

Fitur dari Widget Metro UI ini:

• Meliputi 7 Jejaring Social yang paling sering digunakan
• Efek hover yang cantik dan elegan.
• Rapi dan tidak cacat.
• Tanpa Javascript, Jquery (Murni dengan CSS)

Langsung saja berikut Tutorial Jitunya:

1. Pada Dasbor blog, pilih menu Tata Letak>>Tambah Gadget>> Pilih Html/Javascript
2. Masukkan code berikut ini kedalamnya:

<center>
<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/akhbarislam rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/firexserv></a></li>
<li><a class="gp" href="https://plus.google.com/112279697963351586867"></a></li>
<li><a class="pi" href=http://pinterest.com/linkanda rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/linkanda rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/linkanda></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/tutorialakhbarislam rel="nofollow"></a></li>
</div>
<style>
.metro-social{width:350px}
.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:161px;height:183px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:89px;height:91px}
.metro-social .gp{width:90px;height:91px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:89px;height:90px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:90px;height:90px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:161px;height:90px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:181px;height:90px}
.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>
</center>

Catatan: Ganti yang berwarna dengan link jejaring social milik anda.

3. Simpan dan lihat hasilnya pada blog anda.

Akhirnya selesai juga menulis artikel tentang Menambah Widget Social Profile Keren Ala Windows 8 : Metro UI. Jika menemukan masalah dalam pemasangan widget ini, silahkan berkomentar ria di bawah. Jika berhasil, jangan lupa ucapkan al-hamdulillah...

Demikianlah Artikel Menambah Widget Social Profile Keren Ala Windows 8 : Metro UI

Sekianlah artikel Menambah Widget Social Profile Keren Ala Windows 8 : Metro UI kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Menambah Widget Social Profile Keren Ala Windows 8 : Metro UI dengan alamat link http://bismillah-go.blogspot.com/2013/05/menambah-widget-social-profile-keren.html