Change Colors and Background

Guide to changing color and backgrounds easily without editing HTML template

Pada pembaruan terbaru Anda tidak perlu repot lagi untuk mengubah warna template, semua warna bisa Anda edit langsung dari Desainer Tema Blogger.

Fitur ini akan terus ditingkatkan di setiap pembaruan, akan ada banyak warna dan warna latar yang bisa Anda ubah pada pembaruan selanjutnya.

Template Standar

Untuk memulai merubah warna dan latar pada template Anda bisa langsung menuju Desainer Tema Blogger:

  • Pada dashboar Blogger, klik Tema > Sesuaikan
  • Anda akan diarahkan ke halaman baru dengan 3 menu pada bagian kiri: Latar Belakang, Lanjutan dan Gadget
  • Klik tab Lanjutan, tampilannya seperti di bawah ini:
    Blogger Customize

Perubahan tidak akan terlihat langsung pada preview, Anda harus menyimpan dan muat ulang blog Anda untuk melihat hasil perubahan

Semua warna sudah dikelompokkan berdasarkan bagian-bagian layout template, untuk merubah warna lain klik menu dropdown 'Theme Color' dan Anda akan menemukan beberapa kelompok warna yang bisa diubah seperti warna Address bar, Header, Footer dan lainnya.

Blogger Customize

Versi AMP

Cara di atas hanya bisa diterapkan pada template non-AMP. Bagi pengguna AMP, satu-satunya cara untuk merubah warna adalah melalui Editor HTML template.

  • Pada dashboard Blogger, klik Tema
  • Klik icon pada tombol Sesuaikan
  • pilih Edit HTML, Anda akan diarahkan kehalaman pengeditan
  • temukan kumpulan kode CSS yang mirip seperti di bawah ini:
    /* Variable color */
    :root{
    --headC: #08102b ;
    --bodyC: #08102b ;
    --bodyCa: #767676 ;
    --bodyB: #fffdfc ;
    --linkC: #0b57cf ;
    --linkB: #0b57cf ;
    
    ...
    
    ...
    
    }

Beberapa tema mungkin memiliki urutan kode warna berbeda, secara garis besar penulisannya hampir mirip dengan kode di atas.

In the latest update you won't have any trouble changing the template colors, you can edit all the colors directly from Blogger Theme Designer.

This feature will always be improved in every update, there will be more colors and background that you can change in the next update.

Standard Templates

To start changing colors and backgrounds on the template you can go directly to the Blogger Theme Designer:

  • On Blogger dashboard, click Themes > Customize
  • You will be directed to a new page with 3 menus on the left: Background, Advanced and Gadgets
  • Click Advanced tab as shown below:
    Blogger Customize

Any changes will not be visible directly in the preview, you must save and reload your blog to see the results

All colors have been grouped by parts of the layout template, to change other colors click the 'Theme Color' dropdown menu and you will find several color groups that can be changed such as Address bar, Header, Footer and others.

Blogger Customize

AMP Version

The method above can only be applied to non-AMP templates. For AMP users, the only way to change the colors is via HTML Editor.

  • On Blogger dashboard, click Themes
  • Click icon on the Customize button
  • select Edit HTML, you will be directed to the editing page
  • find a collection of CSS code similar to the one below:
    /* Variable color */
    :root{
    --headC: #08102b ;
    --bodyC: #08102b ;
    --bodyCa: #767676 ;
    --bodyB: #fffdfc ;
    --linkC: #0b57cf ;
    --linkB: #0b57cf ;
    
    ...
    
    ...
    
    }

Some themes may have a different order of color codes, in general the writing is almost similar with the code above.