Tampilkan postingan dengan label Template. Tampilkan semua postingan
Tampilkan postingan dengan label Template. Tampilkan semua postingan
5 Jul 2014

Template Blogger Responsif untuk Blog Personal

5 Jul 2014  Iskandar Dzulkarnain  15 komentar
Seiring berkembangnya internet, banyak sekali penemuan-penemuan baru di bidang website. Hal ini dipicu oleh banyaknya ponsel yang beredar di masyarakat.

Jika dulu orang banyak mengakses sebuah situs hanya melalui komputer, kini orang lebih banyak mengakses situs melalui ponselnya. Hal inilah yang mendorong banyak developer website untuk menjembatani pengguna ponsel agar mendapatkan tampilan situs yang prima ketika dikunjungi melalui ponsel.

Sejak tahun 2011 lalu banyak sekali situs yang mulai berevolusi dari tampilan biasa ke tampilan multiukuran, atau yang biasa dikenal dengan tampilan responsif. Hingga tahun 2014 ini tren tersebut seakan tidak meredam, malah menjadi-jadi. Jika dulu hanya beberapa situs-situs pribadi, kini banyak situs besar maupun pemerintahan yang didukung dengan tampilan responsif.

Hal inilah yang menggugah saya untuk membuat template responsif Blogger gratis. Meskipun tampilan blog ini (Iskael) masih belum responsif, apa salahnya saya membuat template responsif sederhana untuk dibagi-bagi ke khalayak umum. Karena tidaklah mudah mengubah tampilan blog yang sudah jadi menjadi tampilan responsif, banyak faktor yang membuat saya malas melakukan perombakan, hehe.

Baiklah, langsung saja pada intinya. Inilah template Blogger responsif gratis buatan saya. Tampilan yang sederhana ini sangat cocok untuk dipakai pada blog personal. Konsep responsif yang saya gunakan pada template ini agak berbeda dengan template responsif yang beredar di pasaran. Saya lebih cenderung mengubah posisi sidebar dengan menyembunyikannya saat pada resolusi di bawah 900px. Tak sabar, 'kan? Berikut ini tampilannya.

Template Blogger Responsif Keren

Template Blogger responsif itu saya beri nama dengan Takye. Kata "Takye" ini saya ambil dari bahasa Madura, yang berarti "Benar, kan?". Mengapa saya ambil dari bahasa Madura? Jujur, untuk melestarikan bahasa suku di mana mengalir darah di dalam diri saya ini.

Sudah menjadi ciri saya dalam membuat template, lebih suka meletakkan sidebar di sisi sebelah kanan. Hal ini dipicu oleh pandangan saya mengenai kebiasaan membaca. Umumnya, orang membaca artikel lebih nyaman apabila artikelnya berada di sebelah kiri.

Takye Responsive

Konsep sidebar yang saya buat pada ukuran di bawah 900px adalah dengan menyembunyikan sidebar. Untuk memunculkan sidebar, kamu bisa mengeklik ikon menu yang ada di sebelah kanan atas.

Takye di resolusi 500px

Setelah diklik, maka akan memunculkan sidebar yang sebelumnya tersembunyi. Di bawah ini adalah tampilannya.

Takye, setelah ikon menu diklik

Sudah mencari sebuah ciri tampilan responsif adalah tampilan yang didominasi dengan warna putih dan dikuatkan oleh penggunaan ikon. Selain itu, tampilan responsif terkesan lebih mementingkan/ menyuguhkan konten lebih dominan dibanding dengan isi pada sidebar.

Uji Responsive Template Takye

Jika kamu masih belum tahu apa itu responsif, kamu bisa menguji keresponsifan template Takye ini menggunakan salah satu dari beberapa Responsive Tools milik Mozilla Firefox yang pernah saya bahas di Iskael atau kamu bisa mencobanya dengan Responsive Tools milik Intikali.org.

Responsive Tools milik Intikali.org

Oh ya, URL demo untuk Takye Responsive, kamu bisa kunjungi tautan ini.

Download Template Responsive

Suka dengan template ini? Kamu bisa mengunduhnya di tautan ini.
Selengkapnya
18 Jan 2014

Template Blogger Pink Polkadot Menawan

18 Jan 2014  Iskandar Dzulkarnain  10 komentar
Dunia blogging memang didominasi oleh kaum laki-laki. Namun, bukan berarti perempuan juga tidak berperan serta loh. Bahkan, di beberapa tahun terakhir ini banyak muncul blogger yang notabene emak-emak yang sangat aktif menulis dan blogwalking. Justru menurut saya, blog yang diasuh oleh perempuan terkesan unik. Sangat berbeda dengan blog yang diasuh oleh blogger laki-laki, yang terkesan copas dan spamming.

Kali ini Iskael berkolaborasi dengan Koala Templates membuat template Blogger bernuansa pink dengan latar polkadot. Template ini sangat cocok sekali dengan blogger perempuan yang kalem. Penasaran bukan dengan penampakannya?

Pinklet, Template Blogger Pink Polkadot

Template Blogger ini bernama Pinklet. Kenapa Pinklet? Nama ini sebenarnya terinspirasi dari salah satu karakter teman dari Winnie The Pooh yang bernama Piglet. Nah, karena berwarna pink, maka diputuskan untuk diberi nama dengan Pinklet. Berikut ini adalah sekilas tampilan dari template Pinklet.

Download | Preview

Template Pinklet ini dipermanis dengan data tanggal yang dikustomisasi miring 45 derajat. Selain itu, heading dari widget-nya dihias dengan lambang love. Pemilihan font pun kami sengaja dengan memilih font-family Leckerli One yang berjenis Handwriting.

Jika kamu tertarik, kamu bisa mengunduh ataupun melakukan pratinjau template Pinklet ini dengan mengeklik tautan yang ada di sekilas tampilan Pinklet.
Selengkapnya
3 Jan 2014

Template Blogger Gratis dengan Fitur Auto Read More Besutan Iskael

3 Jan 2014  Iskandar Dzulkarnain  8 komentar
Bagi seorang Blogger, mencari template yang cocok untuk blog-nya adalah sesuai yang tidak remeh. Template pada blog bagai baju pada manusia. Bajunya bagus, bikin wajah makin cantik; begitu juga sebaliknya.

Kali ini, Iskael merilis template Blogger gratis dengan fitur "Auto Read More". Template ini bernama "Ayam Kekep", merupakan update dari template Blogger gratis Iskael yang bernama "Ayam Goreng". Berikut ini adalah gambar sekilas template Blogger Ayam Kekep.

Template Blogger: Ayam Kekep


Template Blogger Gratis - Ayam Kekep

Dengan fitur Auto Read More, Ayam Kekep tampil sederhana namun tetap memuat banyak rangkuman informasi. Gaya sederhana yang diusung tetap seirama dengan template sebelumnya, yaitu Ayam Goreng.

Auto Read More yang digunakan oleh Ayam Kekep sengaja dibesut oleh Iskael dengan menggabungkan dua script Auto Read More yang lazim di template Blogger. Hal ini dilakukan demi mendapatkan Cropping Thumbnail yang sempurna dan jumlah karakter Snippet/Excerpt yang bisa diatur sesuai keinginan pengguna.

Penasaran dengan bentuk yang sebenarnya? Kamu bisa mengunduhnya di sini.
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
11 Jun 2013

Template Blogger Gratis dari Iskael

11 Jun 2013  Iskandar Dzulkarnain  24 komentar
Kali ini Iskael berbagi template Blogger gratis. Template Blogger gratis tersebut bernama Free Iskael v1 dengan code name Ayam Goreng. Free Iskael merupakan program template Blogger gratis kolaborasi antara dua penulis di blog ini. Template ini sengaja dibuat sesederhana mungkin agar bisa diubah-ubah semau pemakainya nanti. Free Iskael ini juga akan mengalami update ke versi selanjutnya. Setiap versi memiliki fitur tambahan dibandingkan dengan versi sebelumnya.


Ayam Goreng Blogger Template

Tampilan template Ayam Goreng ini sederhana dengan memilih warna putih dan hijau kebiru-biruan. Font yang dipilih adalah Lobster sebagai heading-nya dan Trebuchet sebagai body-nya. Selain itu, template ini juga memiliki sidebar di sebelah kanan, karena pembaca biasanya membaca dari kiri ke kanan. Sehingga template ini mengarahkan pembaca untuk fokus pada konten .Berikut ini adalah tampilan template Free Iskael v1 Ayam Goreng.

Free Iskael v1 - Ayam Goreng

Fitur

Template Ayam Goreng ini sederhana namun terdapat keunggulan dibandingkan dengan template lainnya. Fitur tersebut adalah SEO Friendly dan mendukung Template Editor milik Blogger.

SEO Friendly

Dalam dunia SEO, semantik atau tidaknya sebuah situs memberi pengaruh yang sangat besar. Peletakan heading yang baik berpengaruh pada hasil pencarian. Template ini memiliki keunggulan antara lain adalah SEO Friendly. Secara bawaan, kebanyakan template biasanya pada halaman depan menggunakan H1 begitu pula pada halaman entri. Padahal hal ini kurang baik untuk SEO blog tersebut. Berbeda dengan template Ayam Goreng yang kami desain.  Pada halaman entri, judul blog akan berubah menjadi elemen nonheading dan judul entri menjadi H1. Dengan begitu, pada mesin pencari akan lebih optimal.

Fitur SEO Friendly lainnya adalah breadcrumb. Breadcrumb ini membuat blog lebih semantik. Blog akan terlihat lebih terstruktur dengan adanya breadcrumb layaknya struktural kategori pada WordPress.

Breadcrumb

Mendukung Template Editor

Bagi blogger yang awam dengan CSS, melakukan editing template merupakan hal yang melelahkan walaupun hanya mengedit warnanya saja. Dengan adanya fitur yang mendukung Template Editor ini, template Ayam Goreng lebih mudah dikostumisasi oleh blogger.

Template Editor milik Blogger

Download Template Blogger Gratis

Ingin tahu bagaimana pratinjau template Ayam Goreng? Kamu bisa kunjungi pratinjaunya di sini. Jadi tunggu apalagi, buat kamu yang tertarik dengan template ini, kamu bisa download secara gratis di sini.
Selengkapnya