Cara Saya Mempercantik Fiksioner Blogger Template by Igniel

Alhamdulillah hari ini saya masih diberi kesempatan oleh Allah untuk mempercantik tampilan Fiksioner blogger template 😍

Iya, betul. Cantik di mata saya belum tentu cantik di mata teman2 semua. Tapi barangkali ada bagian yang mau disamain, bisa banget nyontek tutorialnya di postingan ini 😁

Ayo, kita mulai!

Pasang Header Blog

Awalnya blog ini mau dipasangi gambar format .png di header blog tapi saya urungkan.

Kendalanya cuma di fitur dark mode. Semisal dark mode diaktifkan, maka gambar header blog gak akan kelihatan.

Itu saja kendalanya.

Bagi teman2 yang mau mencobanya, buat saja gambar dengan nama blog, format .png, tembus pandang ke belakang, dengan lebar 300px dan tinggi 60px.

Mengecilkan Lebar Layar Blog

Nah, bagian ini yang paling krusial bagi saya karena saya gak suka template blogger lebar, sedangkan Fiksioner lebarnya "kebangetan" 😁

Cari kode berikut:

.mains, .footer-inner, .billboard {max-width: calc($(width.main + width.aside) + var(--gap) + calc(2 * var(--bodyGap)));}

"Isi" aslinya tuh seperti ini:

.mains, .footer-inner, .billboard {max-width: calc(980px + var(--gap) + calc(2 * var(--bodyGap)))

Jadi, lebar template blog Fiksioner itu berada di angka 980px. Terlalu lebar bagi saya. Oleh karena itu, saya turunkan di angka 880px.

Cara mengecilkannya, cari kode berikut:

<Variable name="width.main" description="Width Main Post" type="length" default="680px" min="300px" max="1200px" value="680px"/>

Pada angka default dan value, ganti yang awalnya 680px menjadi 580px. Nantinya seperti ini:

<Variable name="width.main" description="Width Main Post" type="length" default="580px" min="300px" max="1200px" value="580px"/>

Ok, selesai 😉

Teks Tebal (Bold) di Navigasi Menu Blog

Bagi saya, teks navigasi menu di template blog Fiksioner terlalu "kering" (light), gak ada tebal2nya sama sekali.

Caranya, cari kode berikut:

.header, #Header1 a, .menu a, .blog-title, .blog-title a, input.search-input {color: var(--headerTx);}

Selanjutnya tambahkan kode berikut, di dalamnya:

font-weight: bold;

Hasilnya akan seperti ini:

.header, #Header1 a, .menu a, .blog-title, .blog-title a, input.search-input {color: var(--headerTx);font-weight:bold;}

Ok simpan perubahan template blog.

Ganti Huruf (Font) di Template Blog Fiksioner

Saya baru sadar kalau template blog Fiksioner memakai Google Fonts yang bernama Noto Sans.

Bagi saya, Noto Sans Japanese jauh lebih menarik dan enak dipandang bila dibandingkan dengan "Noto Sans" biasa.

Memangnya Noto Sans dan Noto Sans Japanese itu beda ya?

Hapus kode di bawah ini, yang ada di area 

<link href='https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&amp;family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap' rel='stylesheet'/>

Ganti dengan kode di bawah ini:

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">

Perhatikan, pada kode di atas terdapat simbol "dan" yang berbentuk &. Ubah simbol & menjadi & agar dikenali oleh template blogger. Jangan lupa tambahkan garis miring / tepat sebelum kode berakhir.

Nantinya kode di atas akan tampak seperti ini:

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&amp;display=swap" rel="stylesheet"/>

Berikutnya, cari kode ini:

--fontBody: 'Noto Sans';--fontTitle: 'Noto Sans'

Ganti kode yang sudah ditandai di atas dengan kode di bawah ini:

--fontBody: 'Noto Sans JP';--fontTitle: 'Noto Sans JP'

Jika menurut teman2 jarak antar baris kalimat terlalu jauh, dan maunya agak berdekatan, maka di sini teman2 bisa "mendekatkannya" di bagian kode di bawah ini.

Cari kode ini:

.single .entry-content {line-height: 1.825em;margin-top: 3rem;}

Ganti angka 1.825em menjadi 1.625em. Ok! 😉

O iya, karena ukuran teksnya terlalu kecil sehingga sulit dibaca, kita bisa memperbesar teksnya, kok!

Cari kode berikut:

.single .entry-content, .comment-content, .comment-body {font-size: 1.175rem;}

Ganti angka 1.175rem menjadi 1.25rem.

Ganti Warna Permalink dari Cokelat ke Biru

O iya. Pada dasarnya, anchor text di Fiksioner berwarna kecokelatan (#946c5f), bukan berwarna biru (#48d) seperti biasanya.

Oleh karena itu, kita perlu mengganti warna permalink atau hyperlink dari warna cokelat ke warna biru.

Cari kode di bawah ini:

.single .entry-content {line-height: 1.625em;margin-top: 3rem;}

Tambahkan kode di bawah ini, setelah kode di atas (keduanya digabung).

.single .entry-content a:not([class*="btn"]){color: #48d;}

Hasil akhirnya seperti ini:

.single .entry-content {line-height: 1.625em;margin-top: 3rem;}.single .entry-content a:not([class*="btn"]){color: #48d;}

Warna cokelat (#946c5f) sulit sekali untuk dideteksi oleh mata. Jika dilihat, pasti terlewatkan begitu saja. Semestinya, jika bisa dilihat oleh mata, barangkali artikel itu mau dibacanya.

Jika dilihat dan dibacanya, artinya pembaca ini mau berlama2 di blog kita.

Singkatnya, pengunjung yang mau menghabiskan waktunya di blog kita, berlama2 dan bermain2 di blog kita, berpotensi meningkatkan pageviews untuk menurunkan bounce rate blog. Hal ini berkaitan dengan SEO, lho! 😁

Sejauh ini, hanya bagian2 di atas saja yang saya ubah (ganti). Selain itu, oke2 saja. Gak ada masalah sama sekali.

Teman2 "nyontek" di bagian yang mana, nih? Berhasil, kan? Kalau gagal, boleh banget bertanya di kolom komentar 😁

Labels: Blogger, Template Blog,
Terima kasih sudah membaca Cara Saya Mempercantik Fiksioner Blogger Template by Igniel! Bagikan artikelnya, ya!