Membuat judul blog 2 warna menggunakan CSS

Membuat judul blog 2 warna menggunakan CSS

  11 November    Andika

---

Sebagian besar judul blog atau Site Title yang saya temukan hanya menggunakan gambar untuk membuat judul blog tersebut terlihat menggunakan dua warna. Maka dari itu untuk kesempatan kali ini saya ingin berbagi cara membuat judul blog 2 warna tanpa menggunakan gambar.

Jika kita pemburu skor web yang maksimal (bukan saya ya.. namun menggunakan gambar sebagai site-title, maka kita akan tersandung pada masalah Leverage browser caching bagi yang menggunakan Sub-domain, Masalah hilangnya attribut ALT dan TITLE serta masalah dimensi/resolusi dan kapasitas/ukuran gambar.

Dari ke empat masalah tersebut, saya hanya bisa menyelesaikan 3 masalah kecuali masalah Leverage browser caching. Ini karena saya hanya menggunakan Sub-domain. 3 kendala yang bisa di tanggulangi yakni, Masalah hilangnya attribut ALT dan TITLE, masalah dimensi/resolusi dan kapasitas/ukuran gambar.

Solusinya adalah menggunakan Web Font Icon sebagai penganti Site-Title. Namun karena kapasitas Web Font Icon tidak mungkin bisa menggantikan Site-title sepenuhnya, maka solusi yang paling akurat adalah Teks seperti biasa dengan penyesuaian (customize) CSS.

Langsung saja. Hal pertama yang kamu bisa lakukan adalah dengan menetapkan judul blog pada setelan dasar. Jika ingin di ubah, silahkan masuk ke Dashboard » Setelan » Dasar. Tetapkan judul utama dari blog kamu di sini, perlu di ketahui judul blog yang kamu tulis di sini sangat berpengaruh ke pada mesin pencari.

Jika hal ini di rasa tidak di butuhkan, lewati.

Sekarang masuk ke Dashboard » Template » Edit HTML. Tentukan jenis font, ukuran font, style font, warna teks utama dan lain-lain pada element yang berfungsi sebagai judul blog. Contoh (Warna teks utama),

.site-title {
    color:#FFF;
 }

Kemudian tambah sebaris kode CSS di bawahnya. Contoh,

.site-title2 {
    color:#00F;
 }

Sekarang cari kata kunci (Header). Jika kesulitan, tekan Ctrl + F pada keyboard dan ketikan (Header) pada kolom pencarian lalu tekan ↲ Enter.

Klik pada ikon panah kecil di sisi kiri (▶).

Dan klik ... (Titik-titik) yang ada antara <b:includable id='title'> dan </b:includable>.

Isinya kurang lebih seperti ini,

<b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>

Sekarang hapus <data:title/> pada <a expr:href='data:blog.homepageUrl'><data:title/></a> dan ganti dengan kalimat yang kamu inginkan. Baik judul blog itu sendiri maupun kalimat yang lainnya.

Contoh, <a expr:href='data:blog.homepageUrl'>Blognya <span class='site-title2'>Andika Xp</span></a>

Simpan dan lihat hasilnya.

Cara paling mudah adalah dengan melewati penerapan kode CSS di atas dan mengganti <data:title/> dengan Blognya <span style='#Kode-Warna'>Andika Xp</span>. Namun hal ini mungkin akan menjadi masalah saat Validasi blog.

Selain itu kamu juga bisa membuat judul blog dengan efek pelangi menggunakan Alat ini untuk mempermudah pembuatannya. Namun tentu saja ini akan butuh kode CSS tambahan yang lebih banyak. Namun saya yakin, itu akan bekerja!