Mengubah Warna Seleksi/Block Teks di Blogger

Cara Mudah Mengubah Warna Seleksi/Block Teks di Blogger

Pada posting kali ini saya akan membahas mengenai cara mengubah warna teks yang diblok dengan menggunakan kode CSS pad Blogger. Kegiatan menyeleksi atau blok teks di Blogger adalah kegiatan yang sering dilakukan oleh pengunjung blog. Baik itu untuk menyalin teks kode, menjadikan kata kunci, atau dijadikan sebagai sumber referensi, dan sebagainya.

Namun terkadang ada pula pemilik blog yang mengatur agal teks pada blog tersebut tidak bisa diseleksi atau tidak bisa diblok. Terkadang hal tersebut dilakukan dengan tujuan agar orang lain tidak menyalahgunakan hak cipta orang lain. Seperti dengan menyalin tulisan orang lain tanpa izin dan diakui sebagai karya tulisan sendiri. Saya sendiri tidak setuju dengan tindakan seperti itu. Menghargai hak cipta orang lain adalah sesuatu yang penting. Lebih baik menyertakan sumber tulisan.

Namun di sisi lain ada hal menarik yang kadang ditemukan saat menyalin teks dari sebuah situs blog. Yaitu warna teks yang unik ketika diseleksi. Itu bisa menjadi daya tarik tersendiri bagi pengunjung blog. Untuk mengubah warna teks yang diblok sebenarnya cukup sederhana. Yaitu hanya dengan menggunakan kode CSS.

Mengubah warna blok teks

Pertama-tama buka dashboard blogger sobat, pilih Template > Edit HTML. Setelah itu cari kode ]]></b:skin> kemudian letakkan kode berikut diatasnya.

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

Perhatikan kode warna diatas, silahkan ganti semua kode warna #EAF514 dengan warna background teks ketika diblok, dan ganti semua kode warna #F65A96 dengan warna teksnya ketika diblok. Ada hal yang perlu sobat perhatikan dimana kedua kode warna tersebut sebaiknya merupakan warna yang saling kontras, artinya kedua warna yang digunakan (background & text color) harus tampak berbeda agar teks terlihat jelas bahkan saat di seleksi atau diblok. Silakan coba seleksi teks dibawah untuk melihat contohnya.

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.

Sedangkan jika sobat ingin menggunakan warna untuk kelas atau ID tertentu sobat bisa menggunakan kode CSS (misal untuk kelas .header) sobat bisa menggunakan kode :

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

Penutup

Mungkin cukup itu saja, sangat singkat bukan. Namun semoga itu bisa berguna untuk sobat, jika ada yang ingin ditanyakan silahkan sampaikan di kotak komentar dibawah atau melalui halaman contact yang bisa dibuka di menu blog paling atas. Terima kasih dan sampai jumpa!

Related Posts

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel