Cara Membuat Template Blogger Sendiri Dari 0 [PART 1]

Cara Membuat Template Blogger? - WOW. Pernah terbayang, belum ya? Terus terang saja, membuat template blogger masih meninggalkan banyak misteri. Yang paling membuat penulis bertanya-tanya adalah, apa benar semua itu "dibuat"? atau hanya dimodifikasi? Menurut survey yang telah dilakukan secara pribadi, ditemui fakta bahwa mayoritas template blogger yang beredar di internet adalah bentuk modifikasi dari template yang sudah ada sebelumnya. Sementara itu, sampai saat ini belum ada satupun artikel yang membahas tentang cara pembuatannya.

Terkait akan hal ini, pernah suatu kali penulis membaca artikel Q&A dari situs forum resmi Google, dan ternyata beberapa praktisi yang ahli dibidangnya menyarankan untuk memulai dengan template bawaan dari blogger.

Tidak heran, sih, kenapa bisa demikian. Memang faktanya referensi untuk membuat template blogger ini sangat sulit dijumpai. Jadi, berbekal pengalaman web programming saya selama ini, saya mencoba memulai eksperimen untuk membuat template blogger. Sebenarnya tidak sepenuhnya membuat, namun menggunakan template bawaan blogger, mengikuti saran praktisi dari forum tadi. Yuk, disimak tulisannya.

Khusus, pada tahapan ini, kita akan membatasi bahasan topik yang akan dipelajari. Topik ini akan secara spesifik membahas mengenai hal-hal berikut; pengenalan elemen dasar dalam template blogger, menyederhanakan desain blogger, menghilangkan kompatibilitas tampilan mobile dan mengubah desain menjadi responsive.

Untuk melewati seluruh bahasan ini dengan baik, ikuti tutorial berikut dengan urut. Untuk kode hasil eksperimen, silahkan download di link berikut

1. Pilih Template Dasar
Ada banyak template yang bisa dippilih, setiap grup template (Sederhana, PT Keren Sekali, ...) memiliki varian yang berbeda-beda; namun jika diamati, struktur semua template tidak banyak berbeda, terkecuali yang dari grup Tampilan dinamis.

Anda bebas memilih bahan desain anda, namun selain yang dari grup Tampilan Dinamis, ya. Penulis sendiri, telah memilih layout dasar dari salah satu template grup PT Keren Sekali. Mungkin jika masih belum paham betul mengenai script yang digunakan template blogger, ikuti saja setiap instruksi dengan sama persis.

Setelah terpilih, anda bisa klik Sesuaikan->Tata Letak. Pastikan template hanya memiliki 1 sidebar sebelah kanan dan 3 buah footer. Jangan lupa disimpan setelah itu.

2. Sederhanakan
Saya akui, template blogger ini masih terlalu kompleks jika harus diedit secara keseluruhan. Jadi, agar lebih sederhana, ikuti trik yang saya lakukan.

- Hapus semua element dengan nama class cap-... , faux... beserta semua css yang mewakili elemen-elemen ini.

Misalnya elemen-elemen seperti ini:

<div class='tabs-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>

Hati, hati, jangan sampai elemen yang nama classnya berbeda ikut terhapus. Contohnya, jika seperti ini...
<div class='fauxborder-left header-fauxborder-left'>
  <div class='fauxborder-right header-fauxborder-right'/>
  <div class='region-inner header-inner'>
<b:section ...>
 <b:widget ...>
...
 </b:widget>
</b:section>
  </div>
</div>

Hapus sebagian, hingga menjadi
<div class='region-inner header-inner'>
<b:section ...>
  <b:widget ...>
...
  </b:widget>
</b:section>
</div>

Tips dari saya, gunakan editor notepad++ dengan highlight kode XML untuk memudahkan dalam menghapus tag-tag tersebut. Setiap telah menghapus/mengubah banyak bagian kode, sesekali luangkan waktu untuk menguji template. Jika berhasil disimpan dan dapat teruji berjalan dengan normal, simpan sebagai backup. Jangan sampai ada elemen pernting yang terhapus, tapi sudah terlalu banyak kode yang berubah. Jika sudah begini harus mulai dari awal, kan.

Perlu diketahui juga, saat ini apabila template diuji, sidebar akan turun di bagian bawah. Tapi jangan kawatir, nanti kita akan fix masalah ini.

- Hapus Includable untuk tampilan mobile
Temukan semua blok elemen ber-tag <includable ...>. Apabila ia memiliki atribut id dengan awalan mobile-, jangan sungkan sungkan untuk menghapus SELURUH blok tersebut. Misalnya:
<b:includable id='mobile-index-post' var='post'>
  <div class='mobile-date-outer date-outer'>
    ...
  </div>
</b:includable>

Sekedar catatan, setelah template disimpan di Blogger, sistem akan otomatis mengembalikan includable untuk mobile yang terhapus. Sebenarnya tujuan utama dari menghapus includable ini hanya untuk menyederhanakan proses editing.

Seperti namanya, includable secara kasar dapat diartikan "dapat disisipkan/dipasang". Jadi, secara gampangnya bagian ini adalah blok kode yang dapat disisipkan di beberapa sisi lain di konten blog kita. Penyisipan ini dilakukan dengan tag <include ...>.

Selain tag includable yang berkaitan dengan tampilan mobile, sekarang anda juga harus menghapus semua script CSS yang terkait mobile juga. Ini contohnya...
/* Mobile
----------------------------------------------- */
body.mobile {
background-size: $(mobile.background.size);
}
.mobile .body-fauxcolumn-outer {
background: $(mobile.background.overlay);
}
*+html body.mobile .main-inner .column-center-inner {
margin-top: 0;
}
...

Selanjutnya, secara opsional, anda bisa menghapus bagian ini.
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

sehingga berubah menjadi:
<body expr:class='&quot;loading&quot;'>

Bagian di atas secara otomatis akan diupdate sesuai lingkungan browser agar ukuran elemen dapat menyesuaikan diri dengan benar. Tapi kita tidak memerlukan ini lagi, karena konsep desain kita kali ini adalah tentang pentingnya desain responsive.

Nah, sampai di tahap ini saya harap anda sudah sedikit paham dengan if-else-end if. Programmer pasti sudah tahu dong. Sekarang ini, anda harus menghapus semua pernyataan kondisi yang memilih antara mobile dan desktop. Ubahlah dengan teliti dan hati-hati, sehingga hasilnya hanya akan mengeksekusi aksi untuk tampilan desktop saja. Contohnya, ubah kode di bawah ini:

<b:if cond='data:mobile'>
<div id='header-inner'>
  <div class='titlewrapper' ...>
<h1 ...>
 <b:include name='title'/>
</h1>
  </div>
  <b:include name='description'/>
</div>
<b:else/>
<div ... id='header-inner'>
  <div class='titlewrapper' ...>
<h1 class='title' ...>
 <b:include name='title'/>
</h1>
  </div>
  <b:include name='description'/>
</div>
</b:if>

Menjadi:
<div ... id='header-inner'>
  <div class='titlewrapper' ...>
<h1 class='title' ...>
 <b:include name='title'/>
</h1>
  </div>
  <b:include name='description'/>
</div>

Jika sudah selesai, pastikan juga kode include mobile-main ini hilang
...
<b:include name='mobile-main'/>
...

3. Desain Awal
Simpan/upload kode yang baru dimodifikasi ke blogger. Jalankan blog, maka akan terlihat layout blog kali ini jauh lebiih berantakan. Namun, justru sekarang adalah waktu yang tepat untuk mulai mendesain blog anda. Untuk itu, coba analisa setiap elemen dengan fitur inspect element dengan menekan shortcut CTRL+ALT+F11 (Firefox) atau  F12(Chrome). Agar, desainnya menjadi reponsif ubah atau buat CSS baru seperti berikut.

body {
    min-width: 240px;
}
.column-center-outer {
    width: 69.999%;
    box-sizing: border-box;
    float: left;
}
.column-right-outer {
    float: right;
    box-sizing: border-box;
    width: 29.999%;
}

Awalnya, body memiliki min-width 940px, sehingga layoutnya tidak akan menyesuaikan diri dengan tampilan mobile. Untuk itu, kita harus mengubahnya ke nilai lebih kecil.

Bagian column-center-outer adalah bagian konten tengah, dimana seluruh konten berada. Sementara itu, column-right-outer adalah tempat sidebar dan seluruh widget di dalamnya bernaung. Apabila sebelumnya memilih tampilan 2 sidebar, anda juga akan menemukan column-left-outer juga. Khusus untuk penjelasan nilai kedua atribut ini,silahkan baca artikel mengenai desain responsif part pertama saja:

Membuat Desain Web Responsive Part 1

Yap, sekarang, tampilan blog ini dapat responsif, meski sebagian besar masih berantakan.

Masih ada beberapa tahap lagi, kali ini ubah  semua style CSS dalam template yang masing menggunakan nilai merujuk variabel. Misalnya ini:

.footer-outer {
margin: -$(shadow.spread) 0 -1px;
padding: $(shadow.spread) 0 0;
color: $(footer.text.color);
overflow: hidden;
}

Untuk mempebaiki dan menyesuaikan desain template, kamu dapat bebas sesuka hati menambahkan ataupun menghilangkan CSS rules default dari template awal. Proses ini kadang perlu ketelatenan dan kesabaran. Jika bisa melewatinya, insyaAllah hasilnya memuaskan kok.

Jika sudah banyak diubah, seluruh tag <variabel ...> pada bagian CSS sebaiknya juga dihapus apabila sudah tidak diperlukan. Meski variabel ini digunakan dalam penyesuaian template secara instan (Melalui desain yang diakses dari tombol "Sesuaikan"), umumnya template blogger yang beredar di internet saat ini tidak terlalu memperdulikannya. Tidak masalah sih. Lagipula, menyesuaikan prinsip desain template dengan pengaturan instan tidaklah mudah, terkadang justru sampai membuat desain kita yang buruk terlihat jauh lebih buruk.

O iya, coba juga kode template yang link nya ada di atas tadi. Berikut penjelasan tiap filenya:
1 -> Kode yang bagian cap-... dan faux... sudah terhapus.
2 -> Semua bagian terkait mobile sudah terhapus
3 -> Hasil akhir yang sudah dapat berjalan responsive (juga masih berantakan)

Contoh yang sudah jadi:
- http://jaura-v1.blogspot.com
- http://youseome.blogspot.com

LIHAT JUGA : Cara Membuat Template Blogger Sendiri Dari 0 [PART 2]

Sekian dulu tutorialnya. Entah apa yang akan dibahas selanjutnya, yang jelas PART 1 ini masih belum cukup. Kita masih perlu mengatur agar postingan halaman pertama teringkas secara otomatis (fitur read more), membuat navigasi halaman, optimalisasi SEO, dan masih banyak lagi. Keep tune dengan Komputoo untuk menunggu PART selanjutnyaa, ya.

See you..