Kostumisasi UI

Sesuaikan Style, warna, dan latar belakang tema dengan mudah..

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:

Post padding, untuk mengatur ruang di sekitar konten elemen, di dalam batas yang ditentukan.
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.
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 color, untuk menentukan warna teks.
Post background, untuk mengatur warna latar belakang.
Post border-width, untuk mengatur ketebalan border dengan rentang 1-2px, defaultnya adalah 0px.
Post border-radius, untuk mengatur radius sudut komponen, nilai maksimum untuk opsi ini adalah 20px.
Post border-color, untuk mengatur warna garis tepi, opsi ini tidak berfungsi jika nilai border-width adalah 0px.
Post box-shadow, untuk mengatur warna bayangan komponen, disarankan untuk menggunakan warna abu-abu terang.
Post box-shadow(hover), mengatur warna bayangan ketika kursor melayang di atas komponen, disarankan untuk mengaktifkan opsi ini jika opsi box-shadow aktif.

Dengan kustomisasi yang tepat Anda dapat membuat berbagai macam gaya postingan, berikut adalah beberapa contoh gaya postingan yang dapat dibuat:

CSS Variable

Tidak semua kustomisasi tersedia di Editor Tema Blogger, sebagian besar harus diedit melalui HTML seperti teks default, ukuran font posting, dll. Versi AMP juga tidak mendukung pengeditan melalui Theme Editor, jadi Anda harus pergi ke Edit HTML untuk kustomisasi yang lebih lengkap.

Lihatlah pada bagian CSS tema, Anda akan menemukan kode variabel serupa di bawah ini:

/* Variable */
:root{
/* var: Font */
--fontSize: $(fontSize) ;
--fontHead: 'Noto Sans', sans-serif ;
--fontBody: 'Noto Sans', sans-serif ;
--fontBody-alt: 'Fira Sans', sans-serif ;
--fontCode: 'Fira Mono', sans-serif ;

--head-H1: 2rem ;
--head-H2: 1.8rem ;
--head-H3: 1.7rem ;
--head-H4: 1.6rem ;
--head-H5: 1.5rem ;
--head-H6: 1.4rem ;
--head-fontWg: 400 ;
}
.nB{

/* var: Light-mode */
...

/* var: Dark-mode */
...

/* var: Theme */
...

/* var: Basic, button, input */
...

/* var: Icons */
--iconWidth: 35px ;
--iconHeight: 35px ;

/* var: Pop-up */
--closeHeight-phone: 60px ;

/* var: Header */
...

/* var: Sidenav */
...

/* var: Sidebar */
...

/* var: Content */
...

/* var: Footer */
...

/* var: Post style */
...

/* var: Post font */
--postTitle-font: 2.6rem ;
--postTitle-fontPhone: 2rem ;
--postTitle-fontWg: 400 ;
--postTitle-fontItems: 1.2em ;
--postTitle-fontItemsPhone: 1.1em ;
--postDescription-font: 1.13rem ;
--postDescription-fontPhone: 1.072rem ;
--postBody-font: 1.143rem ;
--postBody-fontPhone: 1.072rem ;

/* var: Post typo */
--postBreak: 3em ;
--postImageBd-radius: 2px;
--lineHeight: 1.7 ;
--lineSpacing: 1.8em ;
--tableBg-color: rgb(246 246 246 / 80%) ;

/* var: Post thumbnail */
--thumbnailRatio: 56.25% ; /* According to aspect-ratio 16:9 (divide 9 by 16 = 0.5625) */
--thumbnailRatio-box: 100% ;

/* var: Post syntax */
--synC: #2f3337 ;
--synBg: #f8f9fa ;
--synOrange: #b75501 ;
--synBlue: #015692 ;
--synGreen: #54790d ;
--synRed: #f15a5a ;
--synGray: #656e77 ;
--synGold: #72621d ;
--synPurple: #803378 ;
--synBd-line: 1px ;
--synBd-radius: 4px ;
--synBd-color: #d2d3d7 ;

/* var: Post component */
--noteAfter: '\002A'  ;
--warnAfter: '\0021' ;
...

/* var: Widget */
--widgetTitle-font: 1.072rem ;
--widgetTitle-fontWg: 400 ;
--widgetTitle-afterD: inline-block ;
--widgetTitle-afterWd: 10px ;
--widgetTitle-afterC: var(--themeBd-color) ;
--widgetTitle-space: 20px ;

/* var: Widget notify */
...

/* var: Widget slider */
--sliderBd-radius: 4px ;
--sliderRatio: 43.75% ;

/* var: Widget featuredPosts */
--thumbnailSize: 300px ;

/* var: Widget mobileMenu */
...

/* var: Widget ToC */
...

/* var: Transition */
--tDuration: .1s ease ;
--tShowHide: opacity var(--tDuration), visibility var(--tDuration) ;

/* var: Bookmark */
--addBookmark: 'Save' ;
--removeBookmark: 'Saved' ;
--bookmarkTextLenght: 90px ;

/* var: Custom text */
--free: 'Free!' ;
--new: 'New!' ;
--breadcrumbs: '\005C' ;
--noImage: 'Null' ;
--labelComa: 'and' ;
--closeButton: 'Close' ;
--pageNext: 'Next' ;
--pagePrev: 'Back' ;
--latestUpdate: '\21BB' ;
--reply: 'Reply' ;
--replies: 'Write a reply...' ;
--readtimeBefore: '\00B7' ;
--readtimeAfter: 'min read' ;
--copyLink: 'or copy link' ;
--copied: 'Copied!' ;
--tableToc: 'Contents' ;
}

Anda dapat mengubah jenis font pada variabel /* var: Font */, teks kustom /* var: Custom text */, ukuran ikon /* var: Icons */, ukuran thumbnail /* var: Post thumbnail */ bahkan durasi transisi /* var: Transition */ dan banyak hal lainnya.

Bagaimana Cara Mengganti atau Menambahkan Font Baru

Mendapatkan dan Menyematkan Kode @font-face

Pertama-tama, buka Google Fonts dan temukan font yang ingin Anda gunakan dalam tema. Sebagai contoh, kami menggunakan font Aref Ruqaa untuk menampilkan teks Arab di blog, di bawah ini adalah link yang kami dapatkan dari Google Fonts:

<link href='https://fonts.googleapis.com/css2?family=Aref+Ruqaa&display=swap' rel='stylesheet'>

Kemudian buka url yang ditandai pada kode di atas melalui browser untuk mendapatkan kode CSS @font-face seperti berikut:

/* arabic */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/arefruqaa/v21/WwkbxPW1E165rajQKDulIIIoVeo5.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}
/* latin-ext */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/arefruqaa/v21/WwkbxPW1E165rajQKDulIIkoVeo5.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF,
 U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/arefruqaa/v21/WwkbxPW1E165rajQKDulIIcoVQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
 U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Salin dan tempelkan kode di atas tepat sebelum ]]></b:skin> atau /*]]>*/</style>. Cara termudah untuk menambahkan CSS adalah melalui Editor Tema Blogger:

Di dasbor Blogger, buka Tema › Sesuaikan.
Klik tab Lanjutan.
Klik menu dropdown, gulir ke bagian bawah untuk menemukan menu Tambahkan CSS.
Tempelkan kode CSS di kolom yang tersedia, lalu klik Simpan.

Menggunakan Font Baru

Setelah menyematkan kode @font-face, font tersebut dapat langsung digunakan hanya dengan menuliskan nama font-family dengan CSS. Pada Google Fonts, Anda akan mendapatkan instruksi untuk menuliskan nama font-family, pada tutorial kali ini kami menggunakan font Aref Ruqaa, berikut kode yang kami dapatkan dari Google Fonts:

font-family: 'Aref Ruqaa', serif;

Anda dapat menuliskan kode CSS secara langsung (inline) atau memanggilnya dengan className, berikut adalah contoh penulisan CSS secara langsung menggunakan atribut style="" beserta hasil rendernya:

<p style="font-family: 'Aref Ruqaa', serif;">السلام عليكم ورحمة الله وبركاته</p>

السلام عليكم ورحمة الله وبركاته

Alternatif lainnya adalah dengan menggunakan className, ini merupakan cara yang lebih mudah untuk diterapkan, sebagai contoh kita tuliskan CSS className seperti ini:

.arabicFont{font-family: 'Aref Ruqaa', serif;}

Berdasarkan kode di atas, font baru dapat dipanggil dengan menggunakan class='arabicFont', misalnya:

<div class='arabicFont'>السلام عليكم ورحمة الله وبركاته</div>

.arabicFont{font-family: 'Aref Ruqaa', serif;}

السلام عليكم ورحمة الله وبركاته

Anda juga dapat menggunakan tag lain seperti <p>, <span> dll.

Mengganti Font Bawaan pada Tema

Anda mungkin ingin menggunakan font baru sebagai font utama dan menggantikan font default, untuk menerapkannya, cari variabel CSS /* var: Font */ seperti di bawah ini:

/* var: Font */
--fontSize: $(fontSize) ;
--fontHead: 'Noto Sans', sans-serif ;
--fontBody: 'Noto Sans', sans-serif ;
--fontBody-alt: 'Fira Sans', sans-serif ;
--fontCode: 'Fira Mono', sans-serif ;

Keterangan:

--fontHead, digunakan untuk judul artikel atau judul postingan.
--fontBody, digunakan untuk konten atau isi artikel.
--fontBody-alt, font alternatif yang digunakan pada judul atau kalimat tertentu.
--fontCode, digunakan untuk menulis kode syntax.

Ganti salah satu font di atas dengan font baru yang sudah disematkan, beberapa tema mungkin memiliki font yang berbeda.

Jika Dokumentasi mengenai "Kostumisasi UI" ini menurut anda Cukup maka beri "Thumbs-Up". namun jika artikel ini kurang meyakinkan beri kami rating "Thumbs-down".