Customization Guide

Guide to easily change font, layout width, color and background and more

In the latest update, we have made optimizations to make it easier for users to customize the theme they are using, now some basic colors, font size, component length can be adjusted through the Blogger Theme Editor. We will continue to work to enhance this feature with every update.

Blogger theme Editor

Open the Blogger Theme Editor, click here if you forgot how.

Change address bar color (mobile only)

In the first group with 'Address bar' title you can change the color bar on mobile browsers, for now the supported browsers are only Chrome and Safari, we don't know if other browsers support this feature or not.

When the default color scheme is Dark, the address bar color will also change, this cannot be avoided.

Change default font-size and link color

In the advanced tab, you will find the 'Basic and color' group which collects all the basic settings including font size and color of text, links, background as well as border color. We use a base font-size of 14px with a maximum of 18px, try to customize the color according to your taste.

Change background-color

The background colors are separated into groups, each component has its own background color, changes to one component will not affect the others.

Change darkMode color scheme

This may not seem that important, but not everyone has the same taste in colors, so we open up the opportunity for those of you who want to try changing the color of Dark Mode. We recommend colorhunt.co for color scheme reference.

Change the width/height component

Not only colors, you can also change the width or height of components such as Header height, Sidebar width, Post width, etc. All are collected in different groups based on the component type.

Resize header logo image

Now you don't have to complain about small header image size, you don't need to edit HTML to adjust the header image size, go to the 'Logo' group and set the maximum image size according to your taste.

Change the post layout style

This is the best part of our improvements, we've had a lot of questions about how to change the style of posts. In response, we're giving users flexibility to customize the appearance according to their own tastes.

First of all, head over to 'Post: Style' group, you will find several options such as changing padding or background color. To make it easier for you to understand how this works, here we explain the function of each option:

  1. Post padding, to set space around the element content, within the specified borders.
    Post padding
  2. Post padding (mobile only), the same as the first option but only works for mobile displays, conveniently the first option will be replaced with this when the page is accessed through mobile.
  3. Post content padding, sets the space between content and the side of components, unlike the first option, this option only sets the distance for text content, not for thumbnails.
    Content padding
  4. Post color, to specify the text color.
  5. Post background, to set the background color.
  6. Post border-width, to set the border thickness with a range of 1-2px, the default is 0px.
  7. Post border-radius, to set the corner radius of the component, the maximum value for this option is 20px.
  8. Post border-color, to set the border color, this option doesn't work if the border-width value is 0px.
  9. Post box-shadow, to set the shadow color of the component, it's recommended to use a light gray color.
  10. Post box-shadow(hover), sets the shadow color when the cursor hovers over the component, it's recommended to enable this option if the box-shadow option is active.

CSS Variable

Pada update terbaru, kami telah melakukan optimasi untuk memudahkan pengguna dalam melakukan kustomisasi tema yang mereka gunakan, kini beberapa warna dasar, ukuran font, panjang komponen dapat disesuaikan melalui Blogger Theme Editor. Kami akan terus berupaya menyempurnakan fitur ini di setiap pembaruan.

Editor Tema Blogger

Buka Editor Tema Blogger, klik di sini jika Anda lupa caranya.

Mengubah warna address bar (hanya di mobile)

Pada grup pertama dengan judul 'Address bar' Anda dapat mengubah warna bar pada browser mobile, untuk saat ini browser yang didukung hanya Chrome dan Safari, kami tidak tahu apakah browser lain mendukung fitur ini atau tidak.

Ketika skema warna default adalah Gelap, maka warna address bar juga akan berubah, hal ini tidak dapat dihindari.

Mengubah ukuran font dan warna link bawaan

Pada tab lanjutan, Anda akan menemukan grup 'Basic and color' yang mengumpulkan semua pengaturan dasar termasuk ukuran font dan warna teks, tautan, latar belakang, serta warna perbatasan. Kami menggunakan ukuran font dasar 14px dengan maksimum 18px, coba sesuaikan warna sesuai selera Anda.

mengubah warna latar

Warna latar belakang dipisahkan ke dalam beberapa kelompok, masing-masing komponen memiliki warna latar belakangnya sendiri, perubahan pada satu komponen tidak akan memengaruhi komponen lainnya.

Mengubah skema warna darkMode

Hal ini mungkin tampak tidak terlalu penting, tetapi tidak semua orang memiliki selera warna yang sama, jadi kami membuka kesempatan bagi Anda yang ingin mencoba mengubah warna Mode Gelap. Kami merekomendasikan colorhunt.co untuk referensi skema warna.

Mengubah lebar/tinggi komponen

Tidak hanya warna, Anda juga bisa mengubah lebar atau tinggi komponen seperti tinggi Header, lebar Sidebar, lebar maksimal Postingan, dll. Semua dikumpulkan dalam kelompok yang berbeda berdasarkan jenis komponen.

Mengubah ukuran logo header

Sekarang Anda tidak perlu mengeluh dengan ukuran gambar header yang kecil, Anda tidak perlu mengedit HTML untuk mengatur ukuran gambar header, cukup masuk ke grup 'Logo' dan atur ukuran gambar maksimal sesuai selera Anda.

Mengubah gaya tata letak postingan

Ini adalah bagian terbaik dari pembaruan kami, kami memiliki banyak pertanyaan tentang cara mengubah gaya postingan. Untuk menjawabnya, kami memberikan fleksibilitas kepada pengguna untuk menyesuaikan tampilan sesuai dengan selera mereka.

Pertama-tama, pergilah ke grup 'Post: Style', Anda akan menemukan beberapa opsi seperti mengubah padding atau warna latar belakang. Untuk memudahkan Anda memahami cara kerjanya, berikut ini kami jelaskan fungsi masing-masing opsi:

  1. Post padding, untuk mengatur ruang di sekitar konten elemen, di dalam batas yang ditentukan.
    Post padding
  2. Post padding (mobile only), sama seperti opsi pertama namun hanya berfungsi untuk tampilan seluler, dengan mudahnya opsi pertama akan digantikan dengan opsi ini ketika halaman diakses melalui seluler.
  3. Post content padding, mengatur jarak antara konten dan sisi komponen, tidak seperti opsi pertama, opsi ini hanya mengatur jarak untuk konten teks, tidak untuk thumbnail.
    post padding content
  4. Post color, untuk menentukan warna teks.
  5. Post background, untuk mengatur warna latar belakang.
  6. Post border-width, untuk mengatur ketebalan border dengan rentang 1-2px, defaultnya adalah 0px.
  7. Post border-radius, untuk mengatur radius sudut komponen, nilai maksimum untuk opsi ini adalah 20px.
  8. Post border-color, untuk mengatur warna garis tepi, opsi ini tidak berfungsi jika nilai border-width adalah 0px.
  9. Post box-shadow, untuk mengatur warna bayangan komponen, disarankan untuk menggunakan warna abu-abu terang.
  10. Post box-shadow(hover), mengatur warna bayangan ketika kursor melayang di atas komponen, disarankan untuk mengaktifkan opsi ini jika opsi box-shadow aktif.

CSS Variable