Buat Template Sendiri Dari 0

Template
Kali ini saya akan berbagi pengalaman tentang pembuatan  template blogger yang mandiri, maksudnya eksklusif karena kita bikin sendiri. Saya awalnya iseng-iseng saja ingin membuat sebuah template atau lebih dikenal dengan theme untuk bisa diterapkan website self-hosted, tapi semakin lama saya makin tertarik dengan template ini, saya pun berpikir "Lagian saya gak punya ide/rencana untuk build website self-hosted mending pasang di blog", saya pun memilih untuk memasangnya di blog, dengan sedikit penyesuaian upload file script & css untuk di hosting, karena saya membuat template secara offline menggunakan sebuah aplikasi yang namanya Sublime Text 3.Aplikasi ini enak banget, pluginnya lengkap, dengan adanya plugin induk untuk memasang plugin atau yang lebih dikenal dengan package control, kawan dapat memasang banyak plugin secara bebas. Aplikasi ini juga sangat efisien, dimana disana tersedia plugin yang namanya emmet, plugin ini sangat meringankan waktu untuk membuat template, contohnya jika saya ingin  membuat sebuah kerangka untuk HTML 5, saya tinggal mengetik HTML:5 lalu tab, jengjeng kerangka terbentuk. Saya sangat merekomendasikan aplikasi ini untuk kawan-kawan.

html

html

Pembentukan Kerangka

Membuat kerangka blog ini harus kamu perhatikan juga tentunya, dan juga ini menurut saya menjadi dasar pembentukan template. Kamu harus tau, kamu mau buat template dengan berapa kolom, 1/2/3, dan juga penempatan atau pemasangan elemen seperti header, sidebar,  ataupun footer, saran saya buatlah sesuai fungsi blog. Dalam project ini saya hanya membuatnya secara sederhana dengan tampilan 1 kolom dengan hanya bagian penting yang akan saya desain. contohnya saya hanya mendesain tampilan homepage dan static page saja, jika seperti post-page saya abaikan karena saya sepertinya tidak saya tidak menggunakannya.  
Kenapa saya tidak menggunakan post-page ?
Nah ini, seperti yang sudah saya sampaikan diatas, buatlah sesuai fungsi dan kebutuhan, template ini rencananya akan saya gunakan untuk blog yang bertipe galeri atau apalah itu, jadi saya tidak membutuhkan post-page, karena saya akan menampilkannya di halaman depan tanpa harus masuk post-page untuk melihat gambar.
Untuk demonya, silahkan klik link dibawah


Penggunaan Framework Bootstrap

Untuk pembentukan template saya dibantu oleh bootstrap, Bootsrap menurut saya sangatlah efektif jika ingin menghemat waktu untuk membuat elemen yang responsif dan cepat, dan juga elemen class yang banyak sudah siap sedia didalam cssnya bootstrap yang ..../boostrap.min.css, dan jangan lupa juga dengan javascript yang sudah disediakan bootstrap, karena beberapa elemen responsif tidak akan jalan jika ini tidak dipasang seperti contohnya seperti menu navbar versi mobile yang menggunakan sistem yang saya gak tau namanya ini :D, pokoknya dia menggunakan sistem navigasi buka tutup gitulah. Berbagai fitur yang sangat membantu dari bootstrap, pencatuman bootstrap sangat direkomendasikan untuk blog sobat, 

Mengenal Lebih Dalam Kode Pembangun

Nah ini dia perbedaannya kamu desain template yang sudah ada dengan kamu membuat sendiri templatenya, kamu akan jauh lebih mengenal templatemu, penempatan serta seluk beluk blog udah dikenal jadi kalau mau desain lagi anda sudah tidak kerepotan mencari id ini mencari class ini dan js yang aneh-aneh ditanam di template.
Saya mulai tertarik untuk lebih mengenal javascript, karena mau tidak mau javascript gak lepas dari penulisan si builder template, jika kamu suka dengan effect-effect cantik di blog seperti effect dropdown menu yang suka memantul, membuat sebuah effect pada saat klik link tertentu dengan menggunakan event, kamu wajib tau atau sedikit tau tentang javascript, untuk penggunaan JSnya bisa tolong google carikan.

Coba-coba aja gan buat template sendiri siapa tau jadi, kalo udah jadi dijamin bakal senyum-senyum sendiri karena akan ada pertanyaan dalam batin "lah kok jadi yah ?", terutama bagi saya yang newbie hahahaha. 
BTW, saya butuh saran untuk template saya gan untuk lebih mengembangkannya lagi :D.
Oke sekian artikel saya, terima kasih.

Artikel Terkait

Previous
« Prev Post