Tips mengkustom tema Blogger.

Template Blog

Mengkustom template, memodifikasi tampilan blog atau mengedit tema , apapun istilahnya, beberapa persiapan yang mesti dilakukan sebelum mengedit template HTML blog akan dibahas disini. Terutama bagi pengguna template Blogger.

Jenis template

Dalam mengedit tema / mengkustom template blog selalu akan menemukan beberapa tantangan yang menguji kemampuan coding baik HTML, CSS maupun script. Dan itu tergantung pada jenis tema / template yang digunakan.
Terlebih jika menggunakan tema gratisan maupun berbayar selain tema bawaan Blogger. Tema tersebut biasanya banyak menggunakan script. Hal ini tentu menjadi tantangan atau kendala bagi blogger yang belum menguasai coding script.

Sebagai persiapan pertama sekaligus untuk meminimalisir kendala dalam mengkustom tema, disarankan supaya menggunakan salah satu tema bawaan Blogger yang disediakan. Pilih tema versi 3 yang sudah responsive misal tema Soho light.

Tema bawaan Blogger memiliki desain sederhana dan hanya sedikit menggunakan script sehingga kendala dalam mengkustom dapat diminimalisir.

Tips mengkustom tema.

Dalam prosesnya, mengkustomisasi template disarankan agar rutin melihat preview hasil custom disetiap perubahan yang dilakukan. Hal ini untuk memastikan tidak terjadi kesalahan kustom, namun akan memerlukan waktu lebih lama jika proses pemuatan halaman lambat.

Pemuatan halaman yang cepat sangat diperlukan, maka solusi mempercepat loading halaman ini menjadi penting tidak hanya pada saat mengkustom saja, tapi secara permanen.

Berikut ini tahapan sekaligus tips mempercepat loading halaman dalam mengkustom tema .

Cadangkan tema  Gunakan font sistem  Kecilkan CSS  Ganti script  Prioritaskan CSS  Gunakan ikon SVG  Ubah variable 

Cadangkan tema.

Jika tema yang digunakan sudah diubahsuaikan, sebaiknya lakukan pencadangan terlebih dahulu untuk menjaga kemungkinan terjadinya kerusakan tema / error.

Gunakan font system UI

Font system UI adalah font yang digunakan pada perangkat ponsel maupun laptop.
Font ini merupakan font bawaan sehingga tidak menghambat pemuatan halaman.
Cara memasang font system UI dalam template, copy CSS font-family dibawah ini:

body {

      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
      "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;

      }

Kecilkan (minify) CSS

Minify CSS atau mengecilkan CSS bisa dilakukan secara online.
Caranya:

1. Buka CSS minify
2. Copy atau disarankan untuk meng-Cut (Ctrl+x) seluruh CSS dalam template.
   Mulai dari body { sampai tanda " } " terakhir diatas tag </b:skin>
3. Lalu ke halaman CSS minifier, paste CSS dalam kolom.
4. Pada opsi Compression dibawah kolom, pilih High (moderate readability, smaller size)
5. Lalu klik tombol Minify CSS
6. Pada kolom hasil minify, klik lalu Copy semuanya (Ctrl+a)
7. Kembali ke template blog, paste dilokasi CSS semula, Simpan.
8. Preview dahulu halaman blog sebelum melanjutkan. Pastikan halaman ditampilkan tidak ada perubahan apapun.

Ganti fungsi script.

Fungsi script yang perlu diganti adalah terutama adalah hosted script (script yang berasal dari luar template), biasanya hosted script ini dipasang dalam template dengan tag :
<script src='https//url-host/script.js'/>.

Jika memungkinkan, letakkan script langsung didalam template alias mengubahnya menjadi script lokal dengan tag :

<script><![CDATA[


          // paste seluruh kode script disini.


]]></script>

Kelemahan menggunakan hosted script adalah, menghambat loading halaman atau bahkan memblokir render halaman sehingga pemuatan halaman tersendat.

Selain itu biasanya ukuran script biasanya besar dan berisi banyak kode sehingga menggunakan banyak spase dalam template blog. Ukuran besar ini juga mempengaruhi pemuatan halaman karena "beban" halaman menjadi bertambah.

Kelemahan lainnya dari hosted script adalah, dari 100% fungsi yang terdapat dalam script kemunkinan yang dipakai pada halaman kemungkinan hanya sekitar 2% - 10% saja. Sisanya menjadi kode yang tak terpakai (junk / sampah).

Itulah alasan kenapa mengganti fungsi hosted script menjadi local script sangat disarankan meskipun mungkin bagi beberapa blogger terutama pemula, tahap ini akan menjadi dilema.

Maksimalkan fungsi CSS.

Memaksimalkan fungsi CSS ini adalah salah satu cara alternatif untuk mengganti fungsi script pada poin diatas.

Tahap ini merupakan langkah paling baik apabila bisa melakukannya. Karena CSS sangat berbeda jauh dibandingkan script dari segi ukuran dan tingkat kesulitannya. CSS lebih ringan dan lebih mudah dikuasai daripada script.

Untuk menerapkannya pada blog, cari elemen-elemen yang tampilan atau fungsinya dijalankan dengan dukungan script. Pertimbangkan untuk menghapus elemen tersebut HANYA JIKA elemen tersebut dirasa memiliki fungsi yang sama dengan elemen lain (variasi dari elemen lain) yang sudah ada.

Cara lainnya adalah mencari script serupa tapi dengan ukuran yang lebih kecil, atau memang ditulis untuk satu fungsi tersebut. Sehingga tidak menyisipkan junk / sampah dalam template.

Gunakan ikon SVG.

Ikon yang umum digunakan dalam blog adalah Font Awesome terutama versi 4 dan 5. Ini adalah jenis ikon web yang penggunaanya mirip dengan penggunaan script. Efeknya juga menghambat pemuatan halaman.
Solusinya adalah, ganti ikon dengan versi terbaru (versi 6). Di versi terbaru Font Awesome, ikon dirender sebagai file SVG sehingga pemuatannya lebih ringan. Meskipun efeknya dalam pemuatan halaman masih ada.

Pilihan terbaik ditahap ini adalah menggunakan ikon SVG murni.

Ubah variable CSS.

Perhatikan kode variable CSS yang terdapat dalam template berikut:

Variable tersebut berfungsi untuk setelan penyesuaian template.

Tombol penyesuaian temlate.

Halaman penyesuaian template.

Kode variable ini sebenarnya tidak terdeteksi sebagai kendala dalam pemuatan halaman, namun membebani dokumen HTML template blog.
Karena variabel ini tidak secara langsung berdampak pada tampilan halaman melainkan hanya untuk mempermudah setelan bagi yang kurang menguasai coding HTML / CSS.

Selain itu, akibat dari penggunaan variabel ini, properti pada CSS akan banyak ditemukan kode seperti ini:

@media screen and (max-width:$(content.width + 240px)){}

        padding-$startSide:8px;

        margin-$endSide:0

        border-color:$(body.link.color);

        color:$(body.link.color);

Kode selektor dari variable tersebut menggantikan atribut CSS yang tentu saja ini akan menjadi kendala pengeditan CSS.

Apabila ingin menghapus kode variabel ini ikuti langkah-langkahnya berikut ini.

• Buka halaman blog yang dikustom, lalu lihat sumber halaman atau tekan Ctrl+u.
  Jika dengan Chrome browser bisa juga dengan mengetikkan di address bar :
  view-source:https://url-blog-kamu.blogspot.com
• Pada sumber halaman tersebut, semua kode dalam template dirender menjadi teks dan HTML murni. Namun fokus pada kode CSSnya.
• Copy semua kode CSS yang ditampilkan pastekan dalam template blog untuk menggantikan CSS yang berisi variabel.
• Lalu simpan. Setelah itu hapus semua kode Variabel yang terdapat dalam template dan Simpan.

Jangan lupa preview terlebih dahulu untuk memastikan kembali bahwa langkah ini tidak mempengaruhi tampilan.
Jika tampilan halaman tidak ada perubahan berarti langkah ini berhasil diterapkan.

⇐ Sebelumnya

Selanjutnya ⇒