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 :
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)
Allan
Ane bingung gan bikin yg udah jadi aja gan,…
ยทtq….
rey andrany
mananih gan linknya kirain udah aktif ? ๐
ยทfollback blog aneya gan,,heheh newbieminta bantuan ๐
Chaidir
Saya belum sempat update link downloadnya. Sebenarnya isinya sama kok dengan kode HTML yang saya tulis di atas. Jadi copy aja dari tutorial.
ยทrey andrany
sedang di nantikan nih gan link ny,,,sekalian buat pembelajaran biar lbih paham klo dah complete source code ny ๐ hehe
ยทChaidir
Yaa segera setelah saya ada waktu saya akan update link nya. ๐
ยทTauKo Tembung
Keren, tapi masih bingung, ntar di cobain deh…. tapi mesti baca ilmunya dari awal ne…
ยทChaidir
Ayo dicobain, kalau bingung nanti kita diskusiin. ๐
ยทruslan
di tunngu mas linknya ๐
ยทsaya masih bingung aja,
kok iconnya kecil ya setelah di masukkan,
solusinya gan ๐
Chaidir
Maaf Mas Ruslan saya masih belum banyak update. Nanti segera saya kasih linknya. ๐
ยทKalau iconnya kecil, iyaa dibesarin aja Mas. Pakek CSS font-size
ruslan
oke mas , udah solved ๐
ยทnambah cantik nih blogku, makasih sebelumnya ๐
Chaidir
Mantab Mas Ruslan, udah bisa bikin widget sendiri di blognya. ๐
ยท