Cara merubah ukuran font Sidebar template Iconic One

Bagaimana cara merubah ukuran font Sidebar template Iconic One? – Template Iconic One merupakan template yang sangat simpel, baik pada tampilan dekstop maupun mobile.

Desainnya sangat bersih sehingga terasa sangat ringan jika digunakan untuk blog yang menggunakan hosting dengan kecepatan standar.

Akan tetapi menurut saya ada satu kekurangan dari template ini, yaitu memiliki font yang terlalu kecil sehingga kurang nyaman dibaca.

Tak hanya saya, mbah Google melalui Google Webmaster beberapa kali memperingatan jika penggunaan font pada blog yang memakai template Iconic One terlalu kecil.

Dari alasan tersebut banyak pengguna template ini ingin memperbesar font. Namun masalahnya, fitur typografi untuk memperbesar font tidak ada pada template ini.

Perlu kalian ketahui bahwa Fitur Typografi untuk mengetur ukuran font pada template Iconic One memang tidak ada, baik versi gratis maupun versi pro (berbayar).

Jadi untuk memperbesar atau memperkecil ukuran font artikel atau konten website kita harus menggunakan cara manual.

Selain memperbesar ukuran font artikel, tentunya kita juga harus memperbesar ukuran font pada heading, sub heading serta sidebar template.

Caranya sama, kita harus melakukannya dengan memasukkan kode CSS secara manual ke template..

Artikel Terbaru  Mengatasi text/html di widget WordPress tidak muncul

Cara memperbesar ukuran Font Sidebar, judul artikel dan sub judul template

Meskipun tidak ada fitur typografi, kita dapat menggunakan Add CSS. Yaitu menambahkan custom CSS pada template tersebut dengan cara:

  1. Buka dashboard WordPress
  2. Appearance
  3. Customize Iconic One
  4. Additional CSS
  5. Selanjutnya, isikan kode CSS dan Publish untuk menyimpan.
cara memperbesar font iconic one

Berikut kode CSS yang mengetur ukuran font judul, sub judul dan sidebar template Iconic One.

CSS untuk mengatur font sidebar

Kode CSS ini untuk merubah teks pada widget. Ubah sesuai selera kamu

.widget-area .widget li,
.widget-area .widget .textwidget {
	font-size: 15.5px;}

CSS untuk merubah ukuran font Heading konten

Untuk memperbesar judul artikel gunakan kode CSS dibawah ini.

.entry-header .entry-title {
	font-size: 23px;
	line-height: 1.2;
	font-weight: bold;
	margin-bottom:20px;
}

Kode diatas sudah saya ganti menjadi bold, jadi judul pada artikel atau konten akan tebal. Kamu juga bisa pilih, Italic, atau normal.

CSS ntuk merubah ukuran Sub Heading konten

Untuk merubah judul dalam postingan seperti H1, H2, H3 atau H4. Bisa gunakan kode CSS berikut ini:

.entry-content h1,
.comment-content h1 {
	font-size: 23px;
	line-height: 1.5;
}

.entry-content h2,
.comment-content h2,
.mu_register h2 {
	font-size: 22px;
	line-height: 1.5;
}

.entry-content h3,
.comment-content h3 {
	font-size: 18px;
	line-height: 1.8;
}
.entry-content h4,
.comment-content h4 {
	font-size: 16px;
	line-height: 1.8;
}

Font bisa disesuaikan dengan kebutuhan. Ganti nominal pada Fon-Size.

Cara memerepat halaman Website menjadi AA di Gtmatrix

Cara untuk mempercepat loading halaman halaman website salah satunya yaitu, menambahkan Add Expires Header agar mendapatkan score AA di indikator GtMetrix.com.
cara memperbaiki Expires headers google analytics
Nah, berikut ini cara memberbaiki add Expires Google Analytic…

Kesimpulan

Cara tersebut dapat digunakan pada template lain yang ada fitur Adding CSS style. Tinggal cari saja kode CSS yang ada di Sytle.CSS melalui edit template.

Artikel Terbaru  Mengatasi pesan Contact Form tidak terkirim ke email

Mungkin ada cara yang lebih gampang, seperti menggunakan plugin atau langsung mengedit Style.CSS menggunakan software tertentu. akan tetapi beberapa plugin dan cara lain yang saya coba kurang efektif.

Karena, saya sendiri tidak menguasai bahasa php dan CSS jadi saya otak-atik sendiri menggunakan cara paling sederhana tersebut, meskipun trial error.

Pada forum-forum website bahkan forum luar negeri, template Iconic One tidak banyak dibahas. Mungkin saja kebanyakan para blogger sudah tahu cara edit template.

Saya tidak menemukan tutorial tersebut meskipun menggunakan kata kunci inggris “How to re-Size font Iconic One Templete” dan “How to Enlarge Sidebar font Iconic One”.

Nah, dengan artikel sederhana ini mudah-mudahan dapat membantu temen-temen blogger yang menggunakan template Iconic One.

Cukup sekian semoga bermanfaat….

Penulis eldya.com

Leave a Comment