Sahabat kenal dengan gambar diatas? Bagi pengguna Windows 8 pasti tidak asing. Itu adalah tampilan menu Start dari Windows 8.1. Gambar itu memang asli dari laptop saya sendiri susunan dan tampilannya memang begitu. Kalau dengan Windows 8, agak berbeda memang. Saya udah sempet ngerasain kedua versinya. Makanya tahu. Kalau pun misal dibandingkan dengan pendahulunya yaitu OS windows 7, saya lebih suka dengan yang yang sekarang. Menurut saya yaa. 😀 Kalau menurut sahabat sendiri gimana?

Untuk yang sekarang ini, antara windows 8 dan windows 8.1 pun ada beberapa perbedaan sedikit baik dari fitur maupun tampilannya. Kalau yang terbaru ini tile atau ubinnya bisa sampai empat macam ukuran. Kalau di-versi sebelumnya belum ada ukuran large dan small. Terus bedanya lagi, warna tile tersebut bisa menyesuaikan dengan warna dasar Icon-nya. Pokoknya iyaa lebih keren laah. Wallpaper di menu start juga bisa dibuat sama dengan wallpaper desktop.

Eksperimen Membuat Template Windows 8

Bicara soal tampilan windows 8 yang keren ini, kemarin saya malah jadi dapat ide untuk buat desain template baru. Awalnya sih saya cuman sekedar lagi nyoba-nyoba buat template di localhost. Setelah jadi susunannya, saya lihat-lihat. Ternyata agak mirip dengan windows 8 (pikir saya). Kayaknya bisa nih dibuat untuk template. Nah, dari situlah saya jadi kepikiran untuk lanjutin desainnya dengan konsep Metro UI ini.

Sebenarnya disini pun saya cuman lagi pengen mainin CSS aja. Hitung-hitung latihan juga. Caranya gimana? Pertama, saya buat file index.html.

Untuk kode CSS-nya karna ini untuk belajar jadinya saya buat terpisah. Yaitu file bernama style.css. Setelah itu saya buat satu folder images khusus untuk narok gambar. Untuk file, udah cuman itu aja yang dibutuhkan. Untuk senjatanya saya pakek yang sederhana saja. Notepad++ aplikasi untuk nge-coding manual (ngetik baris per baris). Terakhir browser andalan Chrome. Selanjutnya tinggal berpusing-pusing ria dengan kode-kode HTML dan CSS tersebut. ^_^ hehe

Percobaan membuat template nuansa windows 8 pun siap dimulai. Otak-atik sana sini, singkat cerita jadilah tampilannya seperti ini. Taraaaa…. 😀

Gimana mirip?? Pasti enggak kan?? ^_^ heheh…Susunan kotak-kotaknya bisa lah. Kalau dibilang mirip secara keseluruhan, iyaa enggak mirip.

Bisa sahabat lihat dari gambar itu. Awalnya saya itu mau bikin template untuk File Manager hosting web saya. Bukan untuk di-publish sih. Untuk saya pribadi aja. Disitu kelihatan saya kasih judul File Chaidir. Dan menu-menu pilihannya ada CSS, Font, Template, Ebook, Video, Demo, Music dan Images. Iyaa awalnya cuman delapan folder saja. Tampilan pertamanya gak seperti gambar diatas itu. Lebih polos cuman ada delapan kotak berjejer empat diatas empat dibawah.

Kalau kalian pernah pakek layanan hosting mungkin kenal gambar dibawah ini kan?

Itu dia cuman bisa diakses kalau pas login aja. Jadi saya mau eksperimen. Buat supaya file manager ini bisa dilihat dengan URL subdomain saya langsung. Makanya saya nyobain buat templatenya. Cuman hanya karna si Windows 8, tujuan saya jadi teralihkan. Malah jadi lebih penasaran dan asyik bereksperimen dengan yang lain. (.__.)

*****

Oke, jadi lewat tulisan ini saya mau bagiin pengalaman seputar eksperimen tersebut. Gimana caranya supaya bisa buat tampilan seperti Start Windows 8 diatas. Anggap saja ini sebagai bonus materi untuk seri Tutorial Membuat Template Blogger yang sedang saya buat kemarin. Walaupun episode tutorial itu sekarang masih nyangkut di episode #6. Hehehe. Maklum laah yaa. Saya masih nunggu waktu yang pas. Lumayan repot juga itu buatnya. Jadi mesti mood-nya OK baru bisa.

“Banyak alasan lu, dir!! Bilang aja kalok lagi malas.”

Konsep Layout Tampilan Windows 8

Ada dua versi yang sempat terpikirkan oleh saya. Karna ini asli hasil ide sendiri. Tanpa ada contek dari sumber mana pun. Jadinya saya cuman bisa ngandalin imajinasi saya saja. Untuk mengira-ngira gimana cara nyusun tampilan yang seperti itu. Awalnya, saya menemukan jawaban seperti ini.

Struktur elemen kalau dalam penulisan HTML kan dari atas ke bawah. Dalam hal ini yang mau dibuat ada delapan block elemen, yang letaknya dalam format dua baris dan empat kolom. Jadi, saya pikir susunannya adalah seperti ini :

Secara ringkas kode HTML tampilan diatas seperti berikut:

<div class="content"><div class="menu">
<div class="ubin block green"><span class="nama">1</span></div>
<div class="ubin block magenta"><span class="nama">2</span></div>
<div class="ubin block red"><span class="nama">3</span></div>
<div class="ubin block blue"><span class="nama">4</span></div>
<div class="ubin block yellow"><span class="nama">5</span></div>
<div class="ubin block purple"><span class="nama">6</span></div>
<div class="ubin block teal"><span class="nama">7</span></div>
<div class="ubin block orange"><span class="nama">8</span></div>
</div></div>

Dan pengaturan CSS-nya dibawah ini:

/* Pengaturan Layout */.content {width:400px;                            /* Kalau ada 2 menu didalam content, lebarnya (menu) x 2 = (width) */height:auto;margin:0 auto;                          /* Supaya layout keseluruhan berada di tengah */}
/* Ini adalah elemen bungkus seperti yang sudah saya jelaskan 
disini
 */.menu {width:400px;                            /* karna mau dibuat empat kolom jadi lebarnya 100 x 4 = 400 */height:200px;                           /* karna mau dibuat dua baris jadi tinggi 100 x 2 = 200 */display:inline-block;float:left;color:#fff}
/* Pengaturan Text pada Menu */.menu span {display: block;font-size:15px;height:20px;margin:5px 0;text-align:center;margin-top:33px;line-height: 20px;text-transform:uppercase;}
/* Pengaturan Ukuran Tile */.ubin {width:88px;                                /* Lebar 100px dikurangi margin 6px dikurangi border 6px */height:88px;                               /* Tinggi supaya bentuk kotak dibikin sama */}
.block {margin:3px;border:3px solid transparent;              /* Normal gak ada border, tapi jaraknya tetap ada */display:inline-block;                      /* Supaya block berada dalam satu baris */float:left;                                /* Supaya block tersusun dari kiri ke kanan */cursor:pointer;}
.block:hover {-webkit-filter:grayscale(0.2);              /* Saat mouse hover warna background redup */border:3px solid #ccc;                      /* Saat mouse hover border kelihatan karna dikasih warna */}
/* Pengaturan Warna Background */.green {background-color: #00a000;}.magenta {background-color: #ff0097;}.purple {background-color: #a100a8;}.teal {background-color: #00aba9;}.blue {background-color: #008ad2;}.yellow {background-color: #ffc40d;}.orange {background-color: #da532c;}.red {background-color: #bc1d49;}

Contoh diatas sebenarnya hanya untuk satu ukuran tile. Belum lagi untuk empat macam ukuran. Tapi jika kalian paham konsep yang satu untuk ukuran lain sebenarnya sama saja. Baiknya kalian baca dulu Tutorial saya kemarin yang episode #5 tentang Penggunaan CSS dasar. Karna ini adalah point penting yang harus dimengerti untuk bisa menciptakan tampilan seperti diatas.

Sedang untuk memahami struktur elemen HTML-nya, lanjut baca yang episode #6. Disana saya sudah bahas gimana cara membuat template dengan layout dua kolom. Nah itu dia dasarnya. Sangat mudah, kan? ^_^

Sebenarnya saya buat tulisan ini supaya kalian bisa lebih termotivasi untuk lanjut Belajar Membuat Template bareng saya. Mumpun saya lagi berbaik hati lhooh mau ngajarin ilmu seperti ini. Kalau kalian tergabung sebagai Member di web Info Chaidir. Saya akan lebih senang untuk membimbing kalian sampai bener-bener bisa. Istilahnya kalian bisa private langsung. Saya sudah siapkan Forum untuk belajar template ini.


Ayo GABUNG sekarang!

Saya lanjutkan cerita diatas yaa. Setelah tampilannya jadi menggunakan konsep pertama diatas, saya sempet share gambarnya di Facebook. Bisa kalian lihat disini. Ada salah satu temen yang kasih saran, bagus lagi grid-nya bisa di-drag. Saya pikir iyaa juga sih. Tapi untuk buat itu butuh JavaScript khusus. Ah, nanti dulu deh. Seperti niat diawal ini kan cuman untuk latihan CSS.

Nah, dari situ malah saya jadi dapat satu ide pengaturan layout yang baru. Soalnya saya perhatikan lagi tampilan menu Start di windows. Rupanya saya salah persepsi soal urutan grid-nya. Dan juga soal pengaturan jarak dan margin masih belum bisa dikatakan sempurna. Sempurna disini maksud saya, kalau mau ditambah grid baru dan misal ukurannya diubah-ubah dari large ke medium, tata letak susunan tetep rapi. Konsep pertama diatas ternyata masih berantakan.

Maka, saya pun melakukan revisi jadi seperti ini kira-kira :

Kelihatan gak perbedaannya dengan yang pertama? ^_^

Oke lah saya rasa cukup. Sebenarnya ini kalau saya jelasin bener-bener detail cara pembuatannya, mungkin bisa jadi beberapa episode lagi nih tulisan. Panjang. Mudah-mudahan yang diatas udah cukup untuk menambah wawasan baru untuk Sahabat Blogger. Kalau memang sekiranya masih ada yang tertarik, pengen lanjut dengerin cerita dari saya ini, bilang saja di komentar tulisan ini. Atau boleh gabung dulu jadi Member, nanti biar saya buatkan thread khusus di Forum Info Chaidir. Gimana?

Template Start Chaidir’s Web Premium Versi 2.6

Dan akhirnya eksperimen ini sudah berhasil saya taklukkan. Berikut ini hasilnya :

Gimana kalau yang sekarang udah mirip belum? :-DCoba kalian scroll lagi ke atas. Bandingkan dengan gambar yang ada diawal tulisan ini.

Dan mulai sekarang, template ini akan saya pakai sebagai halaman Start Chaidir’s Web. Emang laptop aja yang bisa ada menu startnya. Saya juga gak mau kalah dong. Hehehe..
Kalian bisa kunjungi alamat
start.chaidir.web.id

Sekedar info, tadinya kan template ini saya buat untuk di-hosting sendiri. Tapi karna ini sudah menjadi bagian dari keluarga subdomain blog saya, jadinya saya buatin aja untuk versi template -nya. Kira-kira sahabat ada yang tertarik gak untuk buat tampilan seperti ini? Atau kalian mau nyoba buat halaman Start juga? 🙂

Kalau memang mau, saya akan bagikan secara GRATIS untuk kalian pengunjung setia Chaidir’s Web. Tapi ada syaratnya. Dan penawaran ini pun saya batasi sampai akhir bulan September 2014. Ikuti syarat-syarat dibawah ini :

  1. Silahkan Follow blog utama saya ini. Bisa lewat kolom Berlangganan
     di sidebar. Atau disini.
  2. Like Fanspage Chaidir’s Web lewat akun Facebook kalian. Bisa lihat disini.
  3. Wajib daftar sebagai member Info Chaidir, biar kita bisa terus sharing dan belajar bareng. Klik disini.
  4. Bantu promosikan template ini, dengan cara boleh dari Facebook Share status yang disini. Atau bisa dari Twitter Retweet disini. Pilih salah satu atau dua-dua terserah.

Setelah keempat syarat diatas terpenuhi, silahkan langsung PM saya lewat Facebook. Kirim aja pesan seperti ini :

“Saya mau template Start Chaidir’s Web. Mana linknya?”

Jika kalian lebih sering main BBM. Boleh chat saya langsung lewat pin 73F64857. Atau bisa langsung scan barcode pin BBM yang ada di sidebar blog ini. Nanti akan saya kirimkan templatenya lewat email kalian. Bahkan saya akan buat panduan khusus untuk cara penggunaannya. Dan kalian bisa berkreasi sendiri dengan Template Start Chaidir’s Web ini. Kalau misalkan nanti ada pembaruan versi, akan saya umumkan lewat forum. ^_^


PENTING!
Penawaran gratis ini hanya berlaku sampai akhir SEPTEMBER 2014
Ayoo buruan sikat!! Mumpung ada tawaran GRATIS ini lhoh. Template Premium, sob!

Semoga tulisan hari ini bermanfaat buat Sahabat . Terimakasih sudah berkunjung.
Salam Semangat,
[email protected]