Cari Apa?

Download Template MinMax

Download Template MinMax

Cover tulisan tentang template MinMax

Memilih template blog yang tepat, saat ini merupakan sesuatu yang urgen karena bisa mempengaruhi SEO. Oleh karena itulah, banyak developer website yang berlomba-lomba membuat template Blogspot yang memenuhi kaidah SEO. Aku pun demikian. Makanya, aku membuat template ini.

Blog ini menggunakan template MinMax.

Template ini bernama MinMax, artinya bagaimana caranya template blog yang aku buat ini seminimalis mungkin dan memiliki dampak yang maksimal. Nah, apa aja yang kubuat seminimalis mungkin dan menghasilkan fitur yang maksimal? Berikut ini adalah daftarnya:

Edit Template Tanpa Edit HTML

Yap, kamu bisa menggunakan Blogger Customizer untuk mengedit template ini. Jadi, nggak perlu utak-atik Edit HTML lagi untuk mengubah-ubah tampilan blognya. Misalnya aja mau mengubah size konten seperti mengedit size judul, h2, h3, h4:

Ubah size konten di template MinMax

Bisa juga kalau mau mengubah warna header:

Ubah warna header di template MinMax

Bisa juga mengubah warna credit:

Mengubah warna credit di template MinMax

Tanpa Menggunakan Framework CSS

Yap, tepat sekali. Aku nggak menggunakan framework CSS sama sekali. Sebagaimana yang kita tau ya, jika kita menggunakan framework CSS, maka akan banyak style yang nggak digunakan. Dan itu bagiku, merupakan sesuatu yang mengganjal. Lebih baik memiliki style dengan size yang besar, misalnya 2 MB, tapi dipakai semua, daripada kecil, misal 10 KB, tapi banyak style yang digunakan.

Banyak developer website yang menggunakan Bootstrap dalam mengembangkan tampilan websitenya. Nah, berapa sih ukuran dari Bootstrap? Kalau untuk versi minimizenya, Bootstrap memiliki ukuran 164 KB. Padahal, banyak style (class-class) yang nggak digunakan. Misal, kita hanya ingin menggunakan style grid atau flex, maka otomatis style-style yang lain, seperti card, media object, list, alert, dan sebagai macamnya, mubazir karena nggak digunakan.

Lalu, dengan cara apa aku mengembangkan template Blogspot ini? Aku nggak mengetik CSS manual ya karena itu juga membuat capek dan sulit untuk debug karena banyak teksnya. Aku menggunakan Windi. Contoh dari kode Windi itu seperti ini:

<style lang="windi">
  .cover-postingan {
    @apply w-full;
    object-fit: cover;
    aspect-ratio: 10 / 4;
  }
  .judul-artikel {
    @apply text-center p-5 text-2xl;
    font-family: cursive;
  }
  .konten {
    @apply p-5 py-0
  }
</style>

Lalu, ketika diolah menjadi CSS biasa, hasilnya akan seperti ini:

<style>
  .cover-postingan {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 10/4;
  }
  .judul-artikel {
    font-size: 1.5rem;
    line-height: 2rem;
    padding: 1.25rem;
    text-align: center;
    font-family: cursive;
  }
  .konten {
    padding: 1.25rem;
    padding-top: 0;
    padding-bottom: 0;
  }
</style>

Terlihat kan, bahwa dari kode yang singkat, yaitu Windi, bisa diolah menjadi CSS biasa. Jadi, memang kode CSS yang dibutuhkan aja, yang ditampilkan di blog yang dipasang template ini.

Tiada Kode Tersembunyi

Tentu karena niatnya memang aku buat template ini open source, nggak ada sedikit pun kode yang tersembunyi. Bahkan, jika kamu pencet Ctrl u (melihat source code), semua kodenya akan terlihat jelas, bahkan menggunakan bahasa Indonesia untuk penamaan variabelnya (jika nggak kena minify). Jadi, prosesnya pun akan lebih cepat pengolahannya di browser dan bisa kamu pelajari.

Kenapa kok aku nggak menyembunyikannya? Ya karena template ini nggak untuk komersial, aku nggak menjualnya. Jadi, siapapun bisa menggunakannya, siapapun bisa memodifnya. Tapi ingat, link blogku yang di footer jangan dihapus ya. Karena hanya dari situ, aku mengharapkan keuntungan dari adanya template blog ini.

Template blog ini nggak hanya diam sampai di sini, dia akan terus dikembangkan karena blog ini yang merupakan wadah menjalankan template ini, akan terus aku gunakan. Jadi, di versi-versi setelahnya, akan ada fitur yang lebih canggih dan tentunya tetap ringan.

Template blog MinMax nggak pakai jQuery dan Bootstrap

Nggak Pakai jQuery

Penggunaan jQuery untuk website itu termasuk overkill. Soalnya, banyak fitur JavaScript native yang bisa menggantikan jQuery. Misalnya aja, untuk mendapatkan data JSON, kita bisa menggunakan fitur Fetch API yang merupakan bawaan browser. Kemudian, untuk manipulasi DOM, kita bisa dengan mudah menggunakan querySelector dan querySelectorAll.

jQuery itu makan kuota 90 KB (sama besarnya dengan Vue JS versi 2). Padahal, fitur-fitur yang sama, bisa kita jalankan tanpa menggunakan jQuery. Kan, itu namanya mubazir.

Tapi, nggak mungkin sih aku lepas dari yang namanya framework JavaScript walaupun tanpa menggunakan bundler seperti Rollup maupun Webpack. Maka, aku pun menggunakan Petite Vue untuk beberapa fitur di blog ini seperti menu dan pencarian.

Petite Vue sendiri ukurannya adalah 16 KB. Lumayan sih, tapi nggak masalah jika kita bisa menggunakan fitur yang lebih baik. Dengan Petite Vue, kita bisa menulis kode seperti framework Vue, sehingga nggak capek-capek menulis kode JavaScript yang panjang hanya untuk mengolah state.

Navigasi Halaman Lebih Cepat

Aku menggunakan Quicklink untuk navigasi lebih cepat. Jadi, cara kerja Quicklink adalah dia akan mendownload semua link yang berada di halaman sebelum kamu mengkliknya. Jadi, saat kamu mengkliknya, dia akan memuat lebih cepat karena halaman itu sudah didownload sebelumnya oleh Quicklink.

Kamu juga bisa menggunakan Quicklink dengan kode seperti ini:

<script src="https://cdnjs.cloudflare.com/ajax/libs/quicklink/2.2.0/quicklink.umd.js"></script>
<script>
  window.addEventListener("load", () => {
    quicklink.listen();
  });
</script>

Kode itu kamu letakkan di atasnya </body>.

Mengatur Menu

Template MinMax ini memiliki satu menu yaitu tombol burger di kiri atas. Jika diklik, menunya muncul:

Menu di template MinMax

Untuk mengeditnya, kita cukup buka Tata Letak:

Tata letak menu

Daftar link di template blog MinMax

Seperti yang terlihat di contoh di atas, jika kita ingin membuat submenu, tinggal tambahkan underscore di depannya judul link.

Yuk Download Sekarang Juga

Untuk mendownload template MinMax, klik aja https://raw.githubusercontent.com/mzaini30/template-blogspot-gratis/master/minmax/template.xml 

{{ x.judul }}

  1. Pas kebetulan nih, entar diambil ya gan. Buat satu blog lagi

    BalasHapus
  2. Review templatenya blog ini ya bang?

    BalasHapus
  3. Wih tulisannya panjaaangggg... Contoh tampilan/versi demonya ada bang?

    BalasHapus
  4. lagi mencerna....nuwun suhu

    BalasHapus
  5. Ingin unduh sekalian modifikasi templat ini karena font untuk code dan pre masih menggunakan sans/sans-serif. Jadi harus diubah dulu.

    BalasHapus