Beberapa waktu lalu salah seorang pengunjung Chaidir.Web.ID ada yang bertanya kepada saya, mengenai Widget Ayo Berteman yang saya pasang pada sidebar blog ini. Sebenarnya itu adalah widget yang saya buat sendiri. Cuman dengan kode-kode HTML + CSS sederhana saja. Konsepnya saya ambil dari desain kotak-kotak Windows 8. ๐Ÿ™‚

Pada tutorial kali ini, saya akan jelaskan bagaimana cara saya membuat widget tersebut kepada Anda. Saya ingin Anda tidak hanya sekedar men-copy paste kode widgetnya saja, tapi mudah-mudahan Anda juga bisa mempelajari teknik cara buatnya. Agar nanti siapa tahu Anda bisa buat widget-widget keren yang lebih bagus dari punya saya.

1. Konsep Desain Kotak-kotak ala Metro UI Windows 8

Coba perhatikan gambar di bawah ini :

konsep-metro-ui-windows-8

Dalam coding HTML kita tahu ada istilah parent dan child, masih ingat?

Baca juga : Tutorial Template Blogger Part 4

Jadi, bayangkan pertama kita membuat kotak div (parent) bernama wrap-box berukuran persegi, yaitu yang paling besar terluar sebagai bungkus seluruh elemen (child). Lalu kotak tersebut dibagi dua atas dan bawah, menjadi persegi panjang bernama wide.

Kemudian elemen wide yang atas (parent) kita bagi lagi menjadi dua kanan dan kiri, menjadi persegi besar kita kasih nama large (child). Berulang kembali, elemen large sebelah kanan kita bagi dua atas dan bawah, menjadi bentuk persegi panjang bernama medium. Dan elemen medium yang atas kita bagi dua lagi kanan dan kiri, bentuknya persegi kita kasih nama small. Bisa dibayangkan? ^_^ Hehehe..

Okay, sekarang kita mulai proses coding dan deskripsi diatas jika diubah dalam bahasa HTML maka akan jadi seperti ini :

<div class='wrap-box'>
  <div class='wide-atas'>
    <div class='large-kiri'>
     ....
    </div>
    <div class='large-kanan'>
      <div class='medium-atas'>
        <div class='small-kiri'>
         ....
        </div>
        <div class='small-kanan'>
         ....
        </div>
      </div>
      <div class='medium-bawah'>
       ....
      </div>
    </div>
  </div>
  <div class='wide-bawah'>
   ....
  </div>
</div>

Mudah-mudahan sekarang Anda sudah mulai paham, gimana asal mula ceritanya kenapa sebuah kode-kode HTML yang rumit itu bisa tersusun dengan sedemikian rupa. Gak jauh beda caranya ketika nanti Anda ingin membuat sebuah template blog. Anda harus tahu kenapa harus menggunakan elemen div ini dan div ini.

2. Konsep Posisi Elemen, Menggunakan Teknik CSS Dasar

Lalu, gimana supaya bisa buat bagian yang ini di atas dan yang ini di kanan atau di kiri?

Baca juga : Belajar Menyusun Layout Template Blogger

Maka disinilah letak fungsi dari stylesheet atau kode-kode CSS. Masih ingat materi tentang gimana cara buat elemen dengan dua kolom? Disini kita akan menggunakan property display: inline-block dan float: left.

Jika elemen parent memiliki lebar 300px, dan dua child-nya punya lebar 150px maka dengan menggunakan kedua property tersebut kita sudah bisa membuat posisinya berada sejajar di kanan dan kiri dalam satu baris.

Ketika kedua elemen child-nya memiliki lebar yang sama dengan elemen parent, maka posisinya akan berada di atas dan bawah dalam satu kolom. Kira-kira begitulah prinsipnya. Paham? ๐Ÿ˜€

Coba pelajari kode CSS berikut ini :

.wrap-box{
  display:block;
  width:100%;
  height:300px;
  margin:0 auto;
  float:none;
}
.wrap-box div {
  display:inline-block;
  float:left;
}
.wide-atas, .wide-bawah {
  width:100%;
  height:150px;
}
.large-kanan, .large-kiri {
  width:50%;
  height:150px;
}
.medium-atas, .medium-bawah {
  width:100%;
  height:75px;
}
.small-kanan, .small-kiri {
  width:50%;
  height:75px;
}

Selanjutnya Anda tinggal menambahkan beberapa pengaturan CSS lainnya sesuai dengan kebutuhan, seperti warna background, ukuran font, efek transisi dan sebagainya. Hasilnya akan jadi seperti ini :

3. Tambahkan Link Sosial Media, Ikon Font Awesome, ataupun Gambar Profil

Tahap terakhir Anda tinggal menambakan beberapa pengaturan untuk tautan menuju link sosial media seperti Facebook, Twitter, Youtube atau apapun terserah Anda. Kalau mau tambahkan gambar profil juga bagus. ๐Ÿ™‚

Untuk menambahkan ikon, Anda bisa baca penjelesan mengenai Cara Memakai Font Awesome Icons yang sudah pernah saya publish sebelumnya.

Gimana? Sudah bisa kan?

Okay, saya kasih contoh lagi misalkan Anda mau ganti elemen small-kanan dengan link menuju ke akun twitter Anda. Maka, Anda tinggal mengganti elemen tersebut menjadi seperti ini :

<div class='medium-atas'>
  <div class='small-kiri'>
    ....
  </div>
  <a class="small-kanan twitter-sosmed" href="http://www.chaidir.web.id/go/twitter-chaidir/">
   <span class="fa fa-twitter"></span>
  </a>
</div>

Untuk selanjutnya, kira-kira iyaa sama seperti itu-itu juga caranya. Lihat disitu ada tambahan elemen span dengan class fa-twitter. Jika Anda sudah baca tutorial saya tentang penggunaan Font Awesome, pasti Anda sudah tahu itu artinya untuk apa. ๐Ÿ™‚

Kalau mau tambahkan gambar profil gimana? Iyaa sama caranya, seperti yang tambahan elemen span untuk ikon tadi. Tinggal Anda ganti saja seperti ini:

<img src="https://1.gravatar.com/avatar/75086dc378cc4e8127bb826f28148d2e?s=150" alt='profil-chaidir'>

Okelah, saya anggap Anda sudah cukup sangat mengerti dengan tutorial Cara Membuat Widget Sosial Media dengan Tema Windows 8 ini. Jika ada yang masih kurang jelas atau ada masalah saat Anda coba praktekkan langkah-langkah diatas, jangan ragu untuk bertanya melalui kolom komentar yaa!

Untuk yang mau terima hasil akhir, bisa download melalui link ini. (linknya masih belum aktif, mungkin besok saya update)