Modifikasi Warna Background Teks Yang Diseleksi

Secara default, warna bckground teks artikel blog yang yang diseleksi atau diblock adalah biru. Entah sejak kapan warna biru tersebut menjadi standard warna teks seleksi, saya kurang begitu paham, padahal tidak sedikit pilihan warna yang ada, entah itu kuning, ungu muda, hijau daun, merah delima, atau mungkin pink. Terlepas dari semua itu, menurut saya warna biru memang lebih baik jika dibandingkan dengan warna janda kembang (ungu).

Gambar 1

Sebelum saya terlalu jauh berbicara tentang hal-hal yang sedikit ngelantur dan keluar dari pokok pembahasan, saya akan sesegera mungkin membagikan trik tentang cara mengganti warna background teks artikel blog yang diseleksi menggunakan kode CSS. Memang tutorial mengganti warna background teks seleksi ini bukanlah hal yang baru, ini adalah tutorial usang yang semakin hari semakin terhimpit, terjepit, hingga mencicit seperti tikus kecepit s*lit. Dan saya berkeinginan untuk membangkitkan sesuatu yang terhimpit tersebut.

Kali ini saya akan berbagi dua metode untuk menampilkan warna yang teks yang diblock menggunakan kode CSS. Anda bebas memilih menggunakan cara yang mana yang menurut Anda paling mudah.

1. Menyisipkan Kode CSS Menggunakan HTML Editor Blogger

Jika Anda menggunakan metode ini, hal pertama yang harus Anda lakukan adalah membuat cadangan template -backup template blogger-, sebagai antisipasi jika nanti terjadi kesalahan modifikasi, meskipun hal ini bisa dibilang sebagai pekerjaan yang sangat mudah karena hanya menyisipkan beberapa baris kode CSS, namun membiasakan diri melakukan backup template sebelum melakukan langkah modifikasi saya rasa bukanlah suatu pekerjaan yang dilarang oleh agama.
baca tutorial: Cara Membuat Cadangan Template Blogger

Setelah Anda selesai membuat cadangan template blogger, selanjutnya pada halaman Template, klik Edit HTML kemudian temukan kode ]]></b:skin>

Salin dan tempel potongan kode CSS berikut di atas kode ]]></b:skin> kemudian simpan.

::selection {
color: #FFF;
background-color: #00CC00;
}
::-moz-selection {
color: #FFF;
background-color: #00CC00;
}

2. Meyisipkan Kode CSS Menggunakan Gadget HTML/JavaScript

Berbeda dengan langkah pertama yang rumit, langkah kedua ini sangatlah mudah dan minim kesalahan karena ketika menyisipkan -menambahkan- kode CSS-nya kita tidak perlu terjun langsung ke HTML Editor Blogger dan cukup memanfaatkan fitur gadget HTML/JavaScript Blogger.

Masuk ke halaman Tata Letak -Layout Blogger-, klik Tambahkan Gadget pilih HTML/JavaScript kemudian salin dan tempel potongan kode CSS berikut pada formulir gadget HTML/JavaScript.

<style type='text/css'>
::selection {
color: #FFF;
background-color: #00CC00;
}
::-moz-selection {
color: #FFF;
background-color: #00CC00;
}
</style>

Keterangan:

Selector	Property	Value	Remark
::-moz-selection	color	#FFF	Warna teks ketika diblok
	background-color	#00CC00	Warna latar belakang teks ketika diblok
::selection	color	#FFF	Warna teks ketika diblok
	background-color	#00CC00	Warna latar belakang teks ketika diblok

Penutup:

Silahkan berkreasi dengan kode CSS di atas sesuai dengan imajinasi Anda Sendiri. Semoga apa yang saya tulis kali ini bermanfaat bagi kita semua. Happy Blogging.

—ς∞ς—

Tweet

Postingan terkait:

Ditulis EM — Tuesday 18 June 2013 — Add Comment — Blogger Tutorials, CSS3