Mengubah Warna Teks yang di-blok/Seleksi di Blogger

Mengubah Warna Teks yang di-blok/Seleksi di Blogger ― Pada posting kali ini saya akan membahas mengenai cara mengubah warna teks yang diblok dengan menggunakan kode CSS pad Blogger. Text selection atau yang biasanya kita sebut dengan blok teks merupakan hal yang cukup sering dilakukan, termasuk ketika melakukan browsing di internet. Khususnya jika kita ingin menyali/copy suatu teks, maka kita perlu seleksi dulu teks yang mau disalin. Tentunya hal tersebut bukanlah sesuatu yang asing bagi kebanyakan orang.

Ketika kisa memilih/selection sebuah teks di internet, secara umum di komputer, teks yang terpilih biasanya akan ditandai dengan background yang berwarna biru dan teks yang berubah jadi warna putih. Terkadang ada beberapa orang yang bertanya-tanya mengapa warna teks yang di blok harus background biru!? Pada dasarnya tidak ada aturan khusus yang mengatur mengapat background teks yang diseleksi berwarna biru, namun pada beberapa forum online mengatakan bahwa warna biru dipilih karena lebih netral dan lebih mudah dilihat dibandingkan warna-warna yang lain. Jadi tidak ada alasan khusus mengapa warna teks yang di-blok berwarna biru.

Mengenai warna teks yang diseleksi atau di-blok, sebenarnya sebagai pemilik/pengelola website di internet, dalam hal ini khususnya Blogger, kita mempunyai kebebasan untuk memilih sendiri warna apa yang diinginkan sebagai background maupun warna teks ketika teks diblok. Namun hal tersebut hanya berlaku pada halaman situs itu saja, tidak secara keseluruhan. Jadi kita bisa mengatur warna teks yang di blok pada halaman blog kita di Blogger.

Mengubah warna text selection di Blogger

Untuk melakukan hal tersebut sebenarnya cukup mudah, karena sudah ada fitur yang memudahkan dan memungkinkan untuk mengubah warna teks yang diseleksi hanya dengan menggunakan kode CSS. Mengubah warna teks yang di blok ini pada dasarnya tidak berpengaruh secara langsung pada kualitas dari blog, hanya saja hal ini bisa menambah nilai seni dan membuat pengunjung blog lebih tertarik saat mengunjungi blog. Jadi untuk kamu yang ingin mencobanya, kamu bisa mengikuti langkah-langkah berikut ini.

1. Buka Blogger lalu pada bagian Tema klik tombol Sesuaikan.

2. Setelah itu pada Desainer Tema Blogger, pilih Lanjutan lalu buka Tambahkan CSS

3. Kemudian tambahkan kode berikut pada kotak teks yang ada. Menu ini kadang tergantung dari template yang kamu gunakan, jika menu "Tambahkan CSS" tidak dapat kamu temukan silakan buka menu Edit HTML lalu temukan kode ]]></b:skin> dan letakkan kode berikut di atasnya.

::selection {background:#EAF514;color:#F65A96;}
::-moz-selection {background:#EAF514;color:#F65A96;}
::-webkit-selection {background:#EAF514;color:#F65A96;}

4. Klik tombol Terapkan ke Blog dan lihat hasilnya di blog kamu.

Memilih warna text selection di Blogger

Perhatikan kode warna yang telah kamu tambahkan tadi, kamu bisa ganti semua kode warna #EAF514 dengan warna background dan warna #F65A96 bisa kamu ganti untuk warna teksnya. Tetapi dalam memilih warna, ada beberapa hal yang sebaiknya kamu perhatikan, yaitu tampilan warna yang kamu pilih. Untuk menghasilkan kombinasi warna text selection yang baik, sebaiknya kamu pilih warna yang saling kontras. Jadi misalnya background cenderung gelap, maka warna teks sebaiknya cenderung cerah. Kamu bisa lihat-lihat contoh warna teks berikut ini.

Contoh

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.

Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.

Fusce est. Vivamus a tellus.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede.

Mauris et orci. Aenean nec lorem.

Menerapkan Warna text selection untuk teks tertentu

Berdasarkan cara di atas, yaitu dengan menggunakan kode CSS, maka tentunya kamu bisa mengatur agar warna custom tersebut hanya berlaku pada bagian tertentu saja. Misalnya untuk blockquote atau untuk heading saja, dll. Jadi untuk melakukan hal tersebut kamu bisa menggunakan kode berikut ini:

.h1::selection {
    background: #EAF514;
    color: #F65A96;
}

Kamu cukup mengganti .h1 dengan nama class yang kamu inginkan atau dengan nama id yang kamu gunakan. Silakan sesuaikan dengan kebutuhan kamu selama kamu memahami cara penggunaan class dan id di CSS.

Penutup

Itulah cara yang bisa kamu gunakan untuk memasang custom color text selection di Blogger yang bisa mempercantik tampilan blog kamu dengan hanya menggunakan kode CSS. Semoga tulisan ini bisa bermanfaat untuk kamu, jika ada hal-hal yang kurang jelas atau terdapat kekeliruan pada tulisan ini, silakan sampaikan pada kolom komentar di bawah atau melalui halaman contact. Terima kasih dan sampai jumpa!