Entri yang Diunggulkan

Program Trial 90 Hari Affinity Ada Lagi

Tampilkan postingan dengan label Tutorial Template. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Template. Tampilkan semua postingan
14 Feb 2014

Cara Membuat Tampilan Blog Responsif

14 Feb 2014  Iskandar Dzulkarnain  26 komentar
Tampilan responsif bagi sebuah website saat ini hampir seperti sebuah kewajiban. Di tahun 2011 lalu, developer website tidak begitu peduli dengan tuntutan ini. Mereka menganggap bahwa vendor ponsel lah yang bertanggung jawab dengan ukuran layar yang dibuat. Namun, seiring berjalannya waktu, tepatnya awal 2012, tren mulai berubah. Banyak website yang memakai tampilan responsif.

Developer website mau tidak mau harus memikirkan tampilan responsif ini. Bukan berarti ini adalah sebuah masalah yang besar. Banyak jalan yang bisa dilakukan untuk menghasilkan tampilan responsif. Namun, hingga saat ini masih belum banyak yang mengoptimasi ukuran gambar saat tampilan website menjadi responsif. Karena hal itu perlu konfigurasi server yang tidak mudah.

Di entri kali ini saya akan membagi inti dari bagaimana cara membuat tampilan responsif. Penasaran bukan?

Cara Membuat Tampilan Blog Responsif

Dulu saat pertama kali saya mengenal tampilan responsive, saya hanya menggunakan kueri media yang ada di CSS. Namun, ternyata hal itu hanya berlaku untuk perangkat besutan Apple saja, seperti iPhone dan iPad. Untuk Android, ternyata ada standar tersendiri yang harus ditambahkan.

Tambahkan meta tag berikut ini di antara <head> dan </head>

<meta content='width=device-width, initial-scale=1' name='viewport'/>

Jika di HTML5 hilangkan / sebelum tanda >. Kode di atas digunakan untuk template Blogger yang berbasis XML.

Setelah itu, tambahkan kueri media di kode CSS kamu. Misalkan kamu ingin membuat tampilan yang berbeda di ukuran lebih kecil dari 721px dan lebih besar dari 480px, berikut cara penulisannya.

@media screen and (max-width: 720px) and (min-width: 480px) {

 /*-- isi dengan kode CSS-mu di sini --*/

}


Begitu juga dengan ukuran-ukuran yang lainnya, kamu bisa mengubah kode "max-width" dan "min-width"-nya. Mudah, bukan?

Contoh Template Blogger Responsif

Jika kamu pengguna layanan Blogger, kamu bisa mencoba salah satu template Blogger yang responsif ini.

Respon-X Blogger Template

Tertarik, kamu bisa mengunduhnya di halaman Download Respon-X. Kamu juga mengetes template ini dengan Responsive Tools.

Mengetes Tampilan Blog Responsif

Jika kamu ingin mengetes apakah tampilan website/blog kamu yang sudah responsif, kamu bisa mengunjungi situs Responsive Tools ini.

Responsive Tools

Selamat mencoba :)
Selengkapnya
10 Jul 2013

10 Tips Membuat Template untuk Pemula

10 Jul 2013  Iskandar Dzulkarnain  16 komentar
Siapa sih yang tidak berkeinginan untuk bisa membuat template blog sendiri. Setiap blogger pasti punya rasa ingin bisa untuk membuat template blog sendiri yang sesuai dengan konten blog yang ditulis. Kadang, untuk melewati proses menyebalkan ini, banyak blogger yang akhirnya memutuskan untuk memakai template gratis atau membeli template berbayar. Sejauh ini, template merupakan bahasan yang hangat diperbincangkan oleh blogger, karena template bisa menyihir pengunjung untuk berlama-lama di blog yang memiliki template menarik. Lantas, bagaimana cara untuk membuat template? Membuat template membutuhkan waktu yang sangat lama untuk seorang pemula. Berikut adalah 10 tips membuat template untuk pemula agar memangkas waktu yang sangat lama menjadi agak lama.

1. Buat Kerangka Template

Untuk memulai, buat kerangka template yang ingin kamu buat. Hal ini dilakukan untuk mencegah lupa yang sering terjadi pada pembuat template karena pembuatan template yang memakan waktu lama. Bayangkan saja, terkadang untuk membuat template yang kompleks bisa membutuhkan waktu 2 minggu. Tak hanya itu, terkadang lupa datang karena terlalu fokus pada satu masalah yang terjadi saat pembuatan template. Berikut ini adalah salah satu contoh kerangka template.
Kerangka Template

2. Tentukan Warna dengan Palette

Setelah membuat kerangka template, tentukan warna yang ingin kamu gunakan. Kamu bisa menggunakan palette untuk memudahkan dalam pemilihan warna. Banyak situs yang menyediakan palette, salah satunya adalah www.colourlovers.com. Berikut adalah tampilan palette yang ada di situs tersebut.

Palette ColourLovers

3. Tentukan Fitur

Langkah ketika adalah tentukan fitur yang ada di template yang akan kamu buat. Menentukan fitur ini adalah untuk membatasi pengerjaan agar lebih tertarget dan cepat selesai. Kadang saat kita membuat template, kita memasukkan banyak fitur lalu lupa dengan tujuan template ini fungsinya untuk apa.

4. Tentukan Target Blog

Menentukan target blog sangat penting dalam pembuatan template. Template untuk blog personal sangatlah berbeda jauh dengan blog yang digunakan untuk jual beli. Adalah sebuah ide buruk apabila kamu ingin membuat template yang multitarget. Itu hanyalah akan menambah lama pengerjaan.

5. Tentukan Gaya Template

Gaya template amatlah penting untuk menentukan nuansa yang akan ditekankan di sebuah blog. Kamu bisa memilih gaya metro, iconic, atau bahkan sketsa. Setiap gaya template memiliki kelebihan dan kekurangan tersendiri.

6. Buat Kode Dasar

Buat kode dasarnya terlebih dahulu. Hal ini untuk memudahkan kamu melakukan penelusuran struktur template yang kamu buat. Jangan masukkan kode detail sebelum kamu yakin dengan struktur yang kamu buat. Memasukkan kode detail hanya menambah beban mata dan otakmu.

7. Buat Kode Detail

Setelah membuat kode dasar selesai, mulailan bangun kode detail untuk template yang akan kamu buat. Jangan lupa untuk memberikan penanda pada kode detail. Hal ini berfungsi untuk kemudian hari ketika kamu akan melakukan editing pada kode detail yang kamu masukkan di template.

8. Meminimasi Kode

Minimasi kode yang kamu buat. Hal ini untuk mempercepat akses pengunjung blog yang menggunakan template kamu. Banyak alat di internet yang memudahkan kamu untuk meminimasi kode. Salah satu situs yang bisa melakukan ini adalah htmlcompressor.com.

HTML Compressor

9. Evaluasi

Langkah selanjutnya adalah melakukan evaluasi. Biasanya template yang dibuat pasti belum sempurna dan mengalami banyak bug yang tidak terduga. Kamu pun kadang menyadari bug itu setelah mengunggahnya lalu menyebarkan di internet. Hal itu adalah wajar. Lakukan evaluasi yang matang sebelum mempublikasi template yang kamu buat. Setidaknya hal ini dapat mengurangi jatuhnya reputasi kamu sebagai pembuat template.

10. Pemversian

Lakukan pemversian pada template yang kamu buat. Template yang kamu buat tidak harus sempurna. Untuk menuju sempurna, membutuhkan waktu yang sangat lama. Jika kamu menunggu kondisi sempurna untuk mempublikasi template kamu, maka bisa-bisa karyamu di bidang template sangat sedikit, karena mengejar kesempurnaan.

Itulah 10 tips membuat template untuk pemula. Semoga tips tersebut berguna bagi kamu yang ingin mengembangkan template.
Selengkapnya