Menambah Widget Social Profile Keren Ala Windows 8 : Metro UI

Setelah sekian lama saya 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: Jangan lupa mengganti 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…