Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget HTML #1

Beranda / Panduan / Tutorial

Panduan lengkap cara mengubah style judul postingan Blogger

Posting Komentar
Cara Mengubah Style Judul Postingan Blogger Agar Lebih Keren [Panduan Lengkap 2024]
Tutorial Blogger › Kustomisasi CSS
Blogger CSS Tutorial

Cara Mengubah Style Judul Postingan Blogger Agar Lebih Keren [Panduan Lengkap 2024]

Panduan lengkap mengubah tampilan judul artikel di Blogger menggunakan CSS. Cocok untuk template Contempo, Soho, Emporio, dan Notable!

Update: Januari 2024 5 menit baca

Mengubah gaya (style) judul postingan pada template bawaan Blogger seperti Contempo, Soho, Emporio, atau Notable agar terlihat lebih keren dapat dilakukan dengan mudah menggunakan kustomisasi CSS.

Dalam tutorial ini, Anda akan mempelajari dua metode berbeda untuk mengubah tampilan judul artikel di Blogger, lengkap dengan contoh kode siap pakai yang bisa langsung Anda terapkan!

1 Cara 1: Menggunakan Fitur "Tambahkan CSS" (Paling Aman)

💡 Keuntungan: Cara ini tidak perlu mengedit HTML secara langsung, sehingga lebih aman untuk pemula.

Ikuti langkah-langkah berikut:

  1. 1
    Login ke Blogger

    Buka blogger.com dan masuk ke akun Anda.

  2. 2
    Pilih Tema (Theme)

    Klik tanda panah kecil di sebelah Sesuaikan (Customize) → pilih Edit HTML, atau langsung klik Sesuaikan → Tingkat Lanjut (Advanced).

  3. 3
    Pilih Tambahkan CSS (Add CSS)

    Di menu sebelah kiri, cari dan klik opsi "Tambahkan CSS".

  4. 4
    Masukkan Kode CSS

    Salin salah satu kode CSS dari contoh di bawah ke dalam kotak yang disediakan.

  5. 5
    Simpan Perubahan

    Klik ikon Simpan (floppy disk) di sudut kanan bawah.

📝 Contoh Kode CSS untuk Judul Postingan Keren

Salin dan tempel salah satu kode berikut ke dalam kotak CSS:

1️⃣ Gaya Modern & Bold

Tampilan profesional dengan aksen garis di sisi kiri.

Preview:

Contoh Judul Artikel Modern
CSS 
.post-title, .entry-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 32px;
    color: #2c3e50;
    text-transform: capitalize;
    letter-spacing: -1px;
    border-left: 5px solid #3498db;
    padding-left: 15px;
    line-height: 1.2;
}

2️⃣ Gaya Mewah/Elegant (Minimalist)

Tampilan elegan dengan font serif dan perataan tengah.

Preview:

Contoh Judul Artikel Elegant
CSS 
.post-title, .entry-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 36px;
    text-align: center;
    color: #333;
    letter-spacing: 1px;
    text-transform: uppercase;
}

3️⃣ Gaya dengan Highlight Warna

Tampilan eye-catching dengan gradient background.

Preview:

Contoh Judul Artikel Highlight
CSS 
.post-title, .entry-title {
    background: linear-gradient(to right, #ffedcc 0%, #ffffff 100%);
    padding: 10px;
    border-radius: 5px;
    font-family: 'Helvetica Neue', sans-serif;
    color: #e67e22;
}

2 Cara 2: Mengedit HTML Langsung (Lebih Bebas)

ℹ️ Info: Gunakan cara ini jika CSS melalui fitur "Tambahkan CSS" tidak berfungsi pada template Anda.

  1. 1
    Masuk ke Edit HTML

    Buka Tema → klik tanda panah di sebelah Sesuaikan → pilih Edit HTML.

  2. 2
    Buka Fitur Pencarian

    Klik di dalam editor kode, tekan Ctrl + F (Windows) atau Cmd + F (Mac).

  3. 3
    Cari Class Judul

    Cari kode: .post-title atau entry-title.

  4. 4
    Tambah/Ubah CSS

    Tambahkan atau ubah CSS di dalam kurung kurawal { ... }.

  5. 5
    Simpan Perubahan

    Klik tombol Simpan untuk menerapkan perubahan.

💡 Tips: Menyesuaikan Font dengan Google Fonts

Untuk membuat judul lebih keren, Anda bisa menggunakan font dari Google Fonts:

  1. 1. Buka Sesuaikan (Customize) → Tingkat Lanjut (Advanced) → Teks Latar/Body.
  2. 2. Pilih Font untuk Judul Postingan.
  3. 3. Pilih font seperti Poppins, Montserrat, Playfair Display, atau Open Sans untuk tampilan modern.
Poppins

Modern

Montserrat

Clean

Playfair

Elegant

Open Sans

Readable

⚠️ Peringatan Penting!

Pastikan untuk mem-backup template Anda terlebih dahulu sebelum mengedit HTML untuk menghindari kesalahan. Anda bisa melakukan backup dengan cara: Tema → Backup/Restore → Download.

✅ Kesimpulan

Mengubah style judul postingan di Blogger sangatlah mudah dengan menggunakan CSS. Anda bisa memilih antara:

  • ✓ Cara 1 (Tambahkan CSS) – Lebih aman dan mudah untuk pemula
  • ✓ Cara 2 (Edit HTML) – Lebih fleksibel untuk kustomisasi lanjutan

Pilih salah satu gaya CSS yang sesuai dengan tema blog Anda, dan jangan lupa untuk selalu backup template sebelum melakukan perubahan!

📚 Ingin Tutorial Blogger Lainnya?

Dapatkan tips dan trik seputar Blogger, SEO, dan desain web!

Terima Kasih Sudah Berkunjung!

Semoga artikel ini bermanfaat bagi Anda. Jangan ragu untuk meninggalkan komentar atau membagikan tulisan ini jika Anda menyukainya.

Posting Komentar untuk "Panduan lengkap cara mengubah style judul postingan Blogger "

Blog Subscription Banner
0%