Bagi kalian yang sudah akrab dengan tampilan Metro UI, template satu ini pun pasti sangat cocok untuk kalian. Template Start Chaidir’s Web, saya buat dengan menggunakan desain flat kotak-kotak seperti yang sedang tren saat ini. Kebayang gak kalian bisa punya blog dengan desain tampilan seperti menu Start Screen Windows 8? Syukur template ini bisa saya selesaikan. Jadinya mulai sekarang kalian pun bisa memiliki blog dengan nuansa Windows 8. Keren kan?? 😀

Beberapa fitur yang sudah tersedia hingga tulisan ini dibuat ( Version 3.30 )  :
– Valid HTML5
– Page Speed grade A (gtmetrix & insight)
– Horizontal Scrolling
– 4 Sizes Tile Menu
– 20 Styles Background Color
– Grid System
– Available Font Awesome Icon
– Banner / Image / Adsense Space 250×250
– Feature Animation Hover (Pure CSS)
– Feature Charm Bar (Right Menu)
– For Landing Page
– For Bookmark Page
– Not Support Item Page
– Best View only 1366×768 piksel

Beberapa fitur yang akan segera ditambahkan untuk versi selanjutnya :
– Valid CSS3
– Parallax Scrolling Effect
– Support Item Page
– Support Responsive Design (All Screen)
– And many more..

speed-template-windows-8

Karna buatnya juga butuh usaha dan lumayan buat saya capek, makanya template ini saya jadikan PREMIUM. Nah, berhubung saya lagi berbaik hati saya sedang mengadakan promo Free Order. Baca infonya disini.

INGAT!
Penawaran GRATIS ini hanya berlaku sampai akhir SEPTEMBER 2014

Untuk Anda yang sudah memiliki Template Start Chaidir’s Web, berikut ini akan saya jelaskan beberapa pengaturan penting yang harus Anda ketahui. Secara bawaan pertama kali di-install tampilan template ini akan sama persis dengan blog Demo milik saya. Nah, untuk bisa mengatur tampilannya sesuka hati yang Anda mau, petunjuk dibawah ini mudah-mudahan bisa membantu.

Oke, langsung aja baca penjelasan dibawah ini. Khusus untuk Anda yang sudah Order, tulisan ini WAJIB kalian baca sampai habis. Semisal nanti Anda masih merasa kurang sreg juga, boleh langsung hubungi saya. Saya berikan GARANSI seminggu jika ada fitur yang mau ditambahkan, tapi tidak ada di dalam panduan ini. 😀

Panduan Instalasi Template

install-template-windows8
  1. Buat blog baru. Karna untuk versi 3.30 ini saya masih belum menyiapkan tampilan untuk halaman Artikel. Jadi hanya bisa digunakan untuk halaman statis saja.
  2. Masuk ke halaman Dashboard . Pilih pengaturan Template. Matikan opsi tampilan seluler dan klik Simpan. Setelah itu, masuk ke halaman editor template dengan meng-klik menu Edit HTML.
    template-seluler-windows8
  3. Ekstrak file yang sudah kalian Download. Buka file Start Chaidir’s Web.xml menggunakan aplikasi editor text seperti Notepad, Wordpad, Notepad++, Dreamweaver atau yang sejenis lainnya.
  4. Cari tulisan seperti ini <!– Redirect Menuju Homepage Blog –>. Dibawahnya saya ada pasang script pengalihan. Silahkan ganti dengan link URL blog Anda masing-masing. 
  5. Pilih semua lalu Copy, kemudian masuk kembali ke Dashboard  dan Paste-kan source template Anda di kotak menu editor HTML yang tersedia. 
  6. Klik Simpan Template. Instalasi selesai. Sampai tahap ini tampilan blog Anda akan sama seperti tampilan blog Demo milik saya. Untuk mengubah tampilan ikuti saja beberapa panduan dibawah ini. Selamat berkreasi!! ^_^

Menentukan Jumlah Grup Menu dan Kolom

menu-tata-letak-template-windows8

Secara default, saya mengatur template yang Anda download dengan format 2 Group Menu. Yang mana Menu 1 berisi 4 kolom dan Menu 2 berisi 2 kolom. Jika Anda melihat preview dari blog saya, mungkin Anda heran kenapa punya saya beda jumlahnya. Sebenarnya template ini bisa diatur sebebas mungkin. Mau dibuat dengan jumlah Menu dan Kolom berapa saja bisa.

Awalnya saya mau kasih tahu cara merubahnya dipanduan ini. Tapi saya khawatir nanti malah jadi terasa agak sulit untuk yang belum mengerti tentang HTML. Jadi saya skip aja yaa! 😀

Bagi kalian yang merasa kurang puas dengan format bawaan template ini. Bisa langsung hubungi saya. Nanti akan saya buatkan format khusus. Misal, Anda cuman mau ada 1 (satu) Grup Menu saja, bisa! Mau ada 2? Bisa! Mau banyak pun bisa. Terus untuk jumlah kolom di tiap menu. Mau ditambahkan atau dikurangi juga? Bisa! Sekarang Anda mau yang seperti apa? Tinggal pesan aja ke saya. Gampang kan?

Memasang 4 Macam Ukuran Tile

Masing-masing Tile bisa kalian atur sendiri isinya mau dibuat apa. Caranya mudah. Masuk ke menu Tata Letak. Pilih di kolom berapa dan di menu yang mana yang mau ditambahkan. Klik edit. Setelah terbuka jendela Gadget, silahkan letakkan kode HTML dengan pilihan tile yang diinginkan.

Format dasar untuk membuat tile baru:

<a href='http://www.chaidir.web.id/' target='_blank'>
<div class='block large'>
<span>Chaidir's Web</span>
<span class='subname'>Personal Weblog</span>
</div>
</a>

Yang diatas adalah contoh tile dengan ukuran large. Untuk ukuran lain juga sama tinggal yang perlu diganti adalah class-nya. Seperti untuk ukuran wide menjadi seperti ini :

<div class='block wide'>
....
</div>

Kalau untuk medium tinggal ubah menjadi :

<div class='block medium'>
....
</div>

Untuk small karna ukurannya paling kecil jadi agak beda. Dia butuh elemen tambahan yang saya sebut bungkus luar. Ada dua macam bungkus luar yang bisa kalian gunakan. Yaitu bungkus wide dan medium. Contoh :

<div class='wrap medium'>
<a href='http://www.chaidir.web.id/' target='_blank'>
<div class='block small'>
</div>
</a>
</div>

Jadi, elemen dengan class wrap tidak akan muncul. Cuman sebagai batas ruang saja. Kalau elemen dengan class block, akan muncul berupa tile dengan warna biru sebagai warna default-nya. Silahkan coba sendiri untuk sekedar berkreasi. 🙂

Menggunakan 20 Macam Background Warna

Setelah menentukan ukuran dari tile yang ingin ditampilkan. Selanjutnya Anda juga mesti menentukan warna apa yang cocok dengan tile tersebut. Caranya mudah. Sama seperti langkah menentukan ukuran diatas. Hanya yang perlu Anda ketahui adalah macam-macam class warna apa saja yang tersedia dalam template ini. Bisa Anda lihat contoh penggunaan 20 macam backgorund warna dari halaman Demo Template. Disana lengkap saya cantumkan nama class-nya apa.

Misalkan Anda mau background warna kuning. Tinggal pasang class wana kuning yaitu yellow. Untuk warna yang lain juga sama caranya. Berikut ini hanya bentuk contoh. Kode lengkapnya lihat format dasar yang saya kasih sebelumnya.

<div class='block medium yellow'>
....
</div>

Menggunakan Gambar Ikon Font Awesome

Untuk menampilkan gambar ikon pada tile, caranya juga masih sama seperti langkah diatas. Anda tinggal lihat daftar pilihan ikon yang tersedia disini. Setelah itu pasang class-nya seperti berikut ini:

<div class='block medium yellow fa fa-users'>
....
</div>

Jangan lupa selalu gunakan class fa sebelum class ikon yang Anda inginkan. Contoh lain:

<div class='block wide blue0 fa fa-facebook'>
....
</div>

Menambahkan Efek Lighting Saat Hover

Yaitu dengan menambahkan class lighting pada tile yang mau ditambahkan efek ini. Contoh:

<div class='block medium yellow fa fa-users lighting'>
....
</div>

Menambahkan Efek Berputar Saat Hover

Saya sarankan untuk memilih salah satu antara kedua efek ini. Kalau sudah dipasang lighting tidak usah pake putar-putar segala. Kalau udah diputar jangan dipakek lighting lagi. Sebenarnya bisa aja sih, tapi jelek lah. Kalau Anda mau, iyaa silahkan dicoba. ^_^

Caranya sangat mudah. Tinggal tambahkan class spinner pada tile yang mau diputar-putar. Contoh:

<div class='block medium yellow fa fa-users spinner'>
....
</div>

Efek ini lebih cocok digunakan hanya untuk ukuran medium dan small.

Menggunakan Background Gambar / Banner

Caranya yaitu dengan menambahkan CSS background pada div tile tersebut. Yang saya maksud adalah seperti ini:

style='background-image: url(http://info.chaidir.web.id/file/images/admin.jpg);'

Tambahkan saja kode tersebut setelah atribut class. Contoh :

<div class='block large darken lighting' style='background-image: url(http://info.chaidir.web.id/file/images/admin.jpg);'>
</div>

Sekiranya ukuran gambar kalian ternyata kurang pas, bisa gunakan tambahan properti background-size. Kalau bisa sih, sebelum kalian pasang siapkan dulu gambar dengan ukuran yang sesuai. Berikut ukuran yang cocok digunakan :
Large ukuran 250×250 piksel.
Wide ukuran 250×118 piksel.
Medium ukuran 118×118 piksel.
Small ukuran 52×52 piksel.

Setelah gambarnya kalian siapkan, tinggal di-upload ke hosting lalu ambil URL-nya. Bisa dengan meng-upload ke blogspot. Caranya buat entri tulisan baru, kemudian upload gambar seperti biasa. Dari tampilan Compose pindah ke HTML. Disana akan terlihat URL dari gambar yang kalian upload. Setelah itu, tutup halaman postingan. Tidak usah di-publish cukup simpan saja.

Sekedar saran, kalau kalian pasang gambar sebaiknya tidak usah pakek Judul dan Keterangan. Hapus saja bagian ini.

<span>Judul</span>
<span class='subname'>Keterangan</span>

Memasang Slot Iklan Adsense 250×250

Caranya, masukkan saja Script iklan kalian di dalam elemen tile yang diinginkan. Letaknya menggantikan bagian Judul dan Keterangan. Dan tidak usah dipasang Anchor Link. Formatnya seperti ini:

<div class='block large'>
<!-- Letakkan JavaScript Adsense Disini -->
</div>

Memasang Fitur Media Iframe

Untuk menambahkan media seperti video Youtube, musik dari Soundcloud dan lain-lain. Caranya juga sama seperti mau menampilkan iklan. Tinggalkan pasangkan saja kode iframe di dalam elemen tile yang diinginkan.Nah, disini kalau kalian mau tambahkan Anchor LinkJudul dan Keterangan boleh.

<a href='http://www.chaidir.web.id/' target='_blank'>
<div class='block large red1 lighting'>
<iframe src='http://www.youtube.com/'></iframe>
<span>Chaidir's Web</span>
<span class='subname'>Personal Weblog</span>
</div>
</a>

Mengatur Pilihan Menu Charm Bar

Kalian bisa menyesuaikan menu yang ada pada bagian Charm Bar. Tahu kan yang mana? Yang kalau mouse diarahkan ke pojok samping kanan akan muncul menu. Untuk mengaturnya buka gadget Charm Bar dari menu Tata Letak. Gunakan format kode HTML berikut ini:

<a href='http://start.chaidir.web.id' target='_blank'>
<div class='control fa fa-windows'>
<span>Start</span>
</div>
</a>

Kalian bisa atur link-nya menuju kemana. Gambar ikonnya mau dibuat apa bisa pakai pilihan dari Font Awesome. Jangan lupa kasih judul menu. Kalau kalian butuh 2 menu tinggal tambahkan satu lagi menggunakan format yang sama. Bagusnya cukup pasang 5 menu saja.

*****

Btw, kalian belum punya template ini? Lhah, tunggu apa lagi? Yuuk, buruan download gan!! ^_^

Untuk kalian yang mau upgrade ke versi terbaru, bisa download ulang dari email yang saya kirimkan kemarin. Filenya akan terus saya perbarui. Jadi, emailnya jangan kalian hapus. Jaga baik-baik template ini yaa, sob! Selamat Berkreasi!

Salam Semangat,
[email protected]