Langsung ke konten utama

Tutorial CSS : Mengubah Warna Select Text / Blok Text

Pada website kita sering memblok atau menselect tulisan yang mana menurut kita tulisan itu memiliki arti, entah tulisan itu yang sedang kita cari ataupun tulisan tersebut sedang kita tandai agar tidak susah untuk mencarinya.

Tutorial CSS : Mengubah Warna Select Text / Blok Text

Tapi pernahkah kita kepikiran untuk merubah warna tulisan yang diselect atau tulisan yang sedang diblok pada website dengan warna yang lain, dalam hal ini biasanya blok atau select standar pada website adalah berwarna biru dan tulisan menjadi warna putih. Selain memiliki "ciri khas" tersendiri pada website kita, juga fungsinya agar terlihat lebih indah dipandang mata. Karena dengan latar yang bagus akan memberikan kesan tersendiri bagi pengunjungnya, itu juga termasuk dalam dunia maya ini salah satunya Blogging.

Merubah warna blok / select di website blog

Untuk Merubah warna blok / select di website blog kita akan menambahkan fungsi didalam css blog/website kita. Css Merubah warna blok / select di website blog adalah berupa ::selection. Untuk menambah pemahaman tentang fungsi ini baiknya kita langsung praktek saja.

Silahkan salin kode dibawah ini dan letakkan pada file css kawan untuk Blogger bisa di dalam tag <b:skin>
Merubah warna blok / select di website blog
::selection {background:#16a085;color:#ffffff;}
::-moz-selection{background:#16a085;color:#ffffff;}
code::selection {background: #16a085;color:#ffffff;}
code::-moz-selection {background: #16a085;color:#ffffff;}
pre::selection {background: #16a085;color:#ffffff;}
pre::-moz-selection {background: #16a085;color:#ffffff;}

Dan coba simpan file css yang sudah ditambahkan css diatas.
Sekarang coba select / blok tulisan yang ada diwebsite kawan, apakah warna berubah menjadi hijau seperti diwebsite ini ?.
Untuk merubah warna select/blok pada tulisan diweb silahkan ganti #16a085 dengan kode warna lain misalnya #000000 untuk warna hitam atau #ffffff agar background menjadi warna putih.

Terima kasih telah membaca sebuah artikel Merubah warna blok / select di website blog. Baca lebih banyak lagi artikel tentang CSS atau tentang HTML pada website ini. Dan jangan lupa untuk berbagi yang ada dibawah artikel ini. Jika masih ada kesulitan tentang penerapan CSS pada website bisa menggunakan komentar dibawah. Salam.

Komentar

  1. Ternyata lumayan mudah cara menerapkannya ya...hanya sedikit mengganti kode selection color dan background color...

    BalasHapus
    Balasan
    1. Iya mas, tinggal TMT > Tiru Modifikasi Terapkan :D

      Hapus
  2. oke fix ini keren^^ terimakasih infonya :D

    BalasHapus

Posting Komentar

Komentar dan Kritik kawan diperlukan agar dapat membangun pemula belajar kedepannya. Terima Kasih

Postingan populer dari blog ini

Tutorial Lengkap Membuat Short Link Sendiri Dengan PHP Mysql

Hallo kawan, berjumpa lagi nih sama toturial www.pemulabelajar.com. Kali ini kita akan membahas cara membuat short link sendiri . Pernah dong kawan menjumpai namanya short link, contoh sederhananya saja goo.gl . goo.gl akan membuat url site kita menjadi lebih pendek misalnya saja : http://www.pemulabelajar.com bisa menjadi goo.gl/Jiahs . Begitu juga tutorial kita membuat short link kali ini. Karena membuat short link kita sekarang menggunakan PHP Mysql maka kawan disarankan untuk membuat hosting untuk website yang akan dijadikan website short link kita sendiri, kawan bisa menggunakan layanan gratis seperti 000webhosting.com atapun idhostinger.com (recomended) selain gratis, pembuatan databasenya juga termasuk mudah dan juga tutorialnya sangat banyak digoogle kalau ada waktu saya akan membuatkan tutorial membuat hosting gratis untuk kawan. Membuat Short Link Saya anggap saja kawan sudah membuat hosting disalah satu tempat hosting diatas. Maka langkah a...

Belajar Power Design - Cara Membuat Project Menjadi Gambar

Cara Membuat Project Menjadi Gambar - Artikel ini akan membahas sedikit tentang Power Design dan Bagaimana merubah project power design menjadi sebuah gambar . Masalah ini sering dialami oleh pemula khususnya saya yang bingung bagaimana merubah sebuah project power design menjadi berupa gambar agar mudah dimuat ke sebuah karya tulis. Baca juga : Membuat Teks Rotasi Dengan Photoshop Apa itu Power Design ? Power design adalah sebuah paket program desain tools yang digunakan untuk membuat Visualisasi, dokumentasi dan mendesain suatu sistem perangkat lunak. Paket ini meliputi Process analyst Model (PAM), Data architect tools, Aplication modeler tools, dan Metawork tools. Power Design ini juga sering digunakan menjadi software untuk membuat Diagram Flow Diagram atau DFD . Bagaimana Merubah Project Menjadi Gambar ? Untuk merubah sebuah project pada power design menjadi sebuah gambar cukup mudah. Secara singkatnya kawan cukup memilih semua object yang akan dijadikan sebuah gambar, s...

Belajar Web - Membuat Website Responsive CSS

Sebelum kita meneruskan tutorial selanjutnya yaitu Belajar Membuat Website Responsive baiknya kita pelajari terlebuh dahulu apa aja yang akan kita bahas. Karena yang akan kita bahas selanjutnya adalah responsive web, maka diwajibkan mengerti fungsi script css yang ada di Belajar Desajn Website di html / php toturial sebelumnya. Apa itu float ? Apa itu width ? Apa itu height ? Apa itu clear: both ? Responsive ini memakai @media(max-width) atau @media(min-width) yang memiliki arti lebar maximal style dan lebar minimal yang kita masukkan di dalam @media tersebut. Sebelum memperlajari responsive menu sebaiknya lita pelajari dulu float, clear dan lain-lain. Karena @media tersebut hanya mengganti script css dari css global. Apa itu css global ? Nanti anda penjelasannya masing-masing. Apakah anda sudah ngerti dengan coding css diatas ? Jika belum, ada baiknya anda harus pelajari dulu scriptnya di toturial sebelumnya. Cara memperbaiki jika terjadi error atau kesalahan penulidan pada d...