Change Text Selection ColorClick here to get more tutorials!

Jika anda mencoba untuk mengcopy text pada sebuah blog/web, maka bagian teks yang anda pilih akan berubah background dan warnanya. Dengan memanfaatkan kode css, background dan warna default text selector ini dapat dirubah sesuai selera. Anda bisa merubah warnanya saja atau sekaligus background-nya. Kode css simpan di atas kode ]]></b:skin> yang letaknya sedikit di atas tag penutup head (</head>).

D E M O

Coba pilih teks dan cobalah untuk copy teks tersebut di posting dan di recent posts. Pada halaman posting teks akan berwarna biru tanpa background (sudah dirubah dg kode css) sedang yang di recent posts adalah default text selection color.

Cara membuat Text Selection Color

1. Login ke Blogger
2. Dasbor (Dasboard)
3. Template
4. Backup/Restore Template. Panduannya bisa dibuka disiniKlik untuk mengikuti panduan cara melakukan backup/restore template.
5. Edit HTML
6. Template › Edit HTML
   • Procced (Lanjutkan)
   • Cari Kode : ]]></b:skin>
   • Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.
   • Copy kode css yang ada di bagian bawah dan pastekan di atas kode ]]></b:skin>
7. Selesai...
8. Buka blog dan lihat hasil perubahan yang terjadi pada teks yang terpilih.

CSS-1 : Hanya merubah warna teks tanpa background

::selection{color:blue;}  /*Opera, Chrome, Safari */
::-moz-selection{color:blue;}  /*  Ubah warna bila diperlukan - Mozilla */

CSS-2 : Hanya merubah warna teks dan background

::selection{color:yellow;background:red;}  /*Opera, Chrome, Safari */
::-moz-selection{color:yellow;background:red;}  /*  Ubah warna bila diperlukan - Mozilla */

CSS-3 : Selection Color berfungsi di bagian tertentu

<style type="text/css">
.sip::selection{color:yellow;background:red;}  /*Opera, Chrome, Safari */
.sip::-moz-selection{color:yellow;background:red;}  /*  Ubah warna bila diperlukan - Mozilla */
</style>

<div class="sip">
Tuliskan teks di sini!
</div>

Keterangan :

1. Kode yang langsung dapat digunakan dan disimpan di atas kode ]]></b:skin> hanya kode css-1 atau css-2. Kode css yang ke-3 harus disesuaikan dengan tag tertentu dimana selection color difungsikan.
2. Kode css yang pertama dan ke-2 akan berfungsi disemua bagian blog (kecuali widget tertentu yang berupa iframe).
3. Untuk kode css yang ke-3 digunakan bila anda hanya ingin menggunakan perubahan text selection color di bagian tertentu saja.