Judul Artikel Menjadi HURUF BESAR Dengan CSS text-transform

Assalamu'alaikum Wr Wb

Pada kesempatan kali ini saya akan membagikan tutorial mengubah Judul artikel menjadi KAPITAL atau huruf BESAR SEMUA tanpa harus mengubahnya satu persatu pada setiap judul postingan. Karena ini menggunakan properti CSS text-transform yang akan langsung mengeditnya di html template. Perubahannya akan menyeluruh ke semua Judul yang diberi text-transform.

Judul Artikel Menjadi HURUF BESAR Dengan CSS text-transform

Judul Artikel Menjadi HURUF BESAR Dengan text-transform

Apa itu text-transform?
Terkadang kita ingin mengubah sebuah judul di dalam blog menjadi huruf besar semua, atau kecil semua. Untuk keperluan seperti ini, kita bisa mengubahnya dengan memanfaatkan properti CSS text-transform, melalui edit HTML Template. Di bawah ini properti CSS text-transform yang disediakan:

Mengubah tampilan teks menjadi huruf besar semua (uppercase),
Menjadi huruf kecil semua (lowercase),
Setiap kalimat huruf awal menjadi huruf besar (capitalize).

Di dalam properti text-transform memiliki (4 nilai):

uppercase.
lowercase.
capitalize.
none.

Khusus untuk nilai none, nilai ini artinya tidak ada atau tidak diatur, yang mana dapat mengubah semua efek dari text-transform menjadi tidak ada.

Seperti apa contoh penggunaan text-transform?

Berikut adalah contoh penggunaan properti text-transform dalam HTML dan CSS:

<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS text-transform</title>
<style type="text/css">
   .besar-semua { text-transform: uppercase; }
   .kecil-semua { text-transform: lowercase; }
   .besar-awal   { text-transform: capitalize; }
</style>
</head>
<body>
<h2>Belajar CSS text-transform</h2>
   <p class="besar-semua">ini ibu Budi: UPPERCASE</p>
   <p class="kecil-semua">ini ibu Budi: lowercase</p>
   <p class="besar-awal">ini ibu Budi: Capitalize</p>
</body>
</html>

Jadinya akan seperti ini:

Preview Text-transform

Bagaimana penerapan judul text-transform di Blogger?

Saya akan memberikan contoh untuk template yang saya gunakan yaitu "Viomagz".

Buka dashboard blogger.com,
Pilih Tema -> Edit HTML, cari kode h1.post-title { dan h2.post-title {,

h1 adalah judul postingan di halam artikel, h2 adalah judul postingan di beranda.

Masing - masing tambahkan text-transform: uppercase;

Lebih jelasnya lihat gambar di bawah ini:

Simpan perubahan dan lihat hasilnya.

Hasilnya nanti seluruh judul artikel anda akan menjadi huruf kapital semua seperti blog saya ini.

Mengedit gaya huruf dengan CSS text-transform sering digunakan untuk kepentingan website seperti judul artikel, judul navigasi, atau sidebar. Hasilnya efek ini akan memberikan kesan judul menjadi seragam dan rapih.

Catatan:
Efek ini mungkin hanya berlaku pada tampilan blog atau web saat di kunjungi. Tidak berlaku pada hasil penelusuran Google. Hasil penelusuran Google menampilkan dan/atau mengikuti penulisan asli judul artikel yang ditulis.

Selebihnya jika ada yang kurang faham silahkan tinggalkan pertanyaan di kolom komentar.
Terimakasih.

2 komentar

sufyan Yaan 12 Januari 2021 pukul 07.34

Kalau judul blog ini pakai style uppercase atau img? Soalnya ada logonya tu... CSS bisa membentuk pola , warna dan animasi, tapi tidak bisa membentuk objek visual yang detil..
1. Lutfi Syafii 12 Januari 2021 pukul 10.38
  
  Kalau judul blog pakai img mas... Hanya tambahin border dengan CSS.

Dilarang spam