wiBlogger.com

FreshOptimz Update v6 (6.40)

Fix: Muncul karakter <!-- tepat dibawah tag <body> yang disebabkan oleh sistem script adsense terbaru

EasyAdsPage Update v1.1

Fix Config redirectUnknowPages yang tidak bekerja, Optimasi kode

Definisi dan penggunaan

Atribut class adalah salah satu atribut yang sering digunakan pada elemen HTML. Atribut class umumnya digunakan untuk kemudahan dalam mengakses elemen baik itu untuk kebutuhan konfigurasi CSS (CSS Selektor) ataupun untuk kebutuhan javascript (getElementsByClassName).

Type atribut

Atribut Global HTML

Sintak

<elemen class='nama-class'>

Keterangan

nama-class adalah berupa kombinasi karakter huruf (a-z), underscore (_), hyphen (-), dan nomor (0-9).
nama-class harus dimulai dengan huruf, underscore, atau hyphen.
Jika karakter pertama adalah hyphen, karakter kedua harus berupa huruf atau underscore. Contoh: -redcolor, -_redcolor
nama-class setidaknya terdiri dari 2 karakter
Setiap elemen bisa memiliki beberapa class yang dipisahkan dengan spasi (spasi, tab, dll). Contoh: redcolor bluecolor
Berbeda dengan atribut ID, nama-class tertentu bisa digunakan pada lebih dari satu elemen.

Tambahan

Berikut adalah kasus umum yang sering diselesaikan dengan atribut class:

Menerapkan konfigurasi style tertentu untuk banyak elemen.
Untuk kebutuhan ini, class digunakan sebagai selektor dalam konfigurasi CSS. Pada contoh berikut, class digunakan pada element-elemen yang hendak diatur dengan warna text merah.
```
<div class='redcolor'>Konten</div>
<p class='redcolor'>Konten</p>
<p>Konten</p>
```
```
.redcolor {
  color:red;
}
```
Konten

Konten

Konten
Menambahkan identitas tambahan pada elemen
Selain digunakan sebagai pemegang banyak elemen, class juga sering digunakan untuk memberikan identitas tertentu pada elemen. Misal, pengembang hendak menambahkan class tertentu yang mengidentifikasikan jumlah kolom pada elemen.
```
<b>Tabel 2 kolom</b>
<div class='tabel-like col2'>
  <div>Konten 1</div>
  <div>Konten 2</div>
  <div>Konten 3</div>
  <div>Konten 4</div>
</div>

<b>Tabel 4 kolom</b>
<div class='tabel-like col4'>
  <div>Konten 1</div>
  <div>Konten 2</div>
  <div>Konten 3</div>
  <div>Konten 4</div>
</div>
```
```
.tabel-like {
  display:flex;
  flex-wrap:wrap;
}
.tabel-like > *{
  border:1px solid #000;
  box-sizing:border-box;
  text-align:center;
}
.tabel-like.col2 > * {
  width:50%;
}
.tabel-like.col4 > * {
  width:25%;
}
```
Tabel 2 kolom

Konten 1

Konten 2

Konten 3

Konten 4

Tabel 4 kolom

Konten 1

Konten 2

Konten 3

Konten 4
Dengan contoh penerapan diatas, kita bisa memberikan konfigurasi CSS berbeda untuk class col2 dan col4 yang mengatur jumlah kolom untuk elemen yang bersangkutan.

Bukankah bisa dengan menggunakan ID ?

Ya bisa. Namun, ID harus bersifat unik dan hanya boleh digunakan pada satu elemen saja. Penggunaan class untuk mengatasi keterbatasan ini, jadi identifier yang bersangkut bisa digunakan lagi pada elemen lainnya jika dibutuhkan.

Update Script Sitemap

Fix error yang disebabkan oleh string (tag-like) pada post title

Mengatasi muncul <div dir="ltr" style="text-align: left;" trbidi="on"> pada pembuat Posting dan Laman Blogger

Masalah

Muncul <div dir="ltr" style="text-align: left;" trbidi="on"> setiap kali hendak membuat Posting dan Laman baru.

Menghilangkan <div dir="ltr" style="text-align: left;" trbidi="on">

Penyebab

Fitur Transliterasi diaktifkan.

Solusi

Nonaktifkan fitur Transliterasi. Caranya, menuju menu Setelan > Bahasa dan Pemformatan > Aktifkan transliterasi > pilih Dinonaktifkan.
Simpan pengaturan.
Refresh browser dengan cara tutup tab browser dan kembali buka Dashboard blog anda.
Selesai !

CSS priority: Mengatahui konfigurasi CSS yang dipilih oleh browser

Pada konfigurasi CSS, suatu properti terkait elemen tertentu mungkin terdapat pada lebih dari 1 blok kode. Perhatikan contoh CSS berikut:

p {
  color:blue;
  text-decoration:underline;
}

p {
  color:red;
}

<p>Paragraf</p>

Paragraf

Pada CSS diatas, terdapat 2 blok kode yang mengatur elemen p. Pada setiap blok kode, terdapat properti yang mengatur warna text (color). Berkaitan dengan kasus diatas, kode CSS tetap valid (benar), namun, browser hanya akan menerapkan 1 konfigurasi yang paling diprioritaskan. Seperti yang terlihat pada tab hasil, browser memilih konfigurasi yang terdapat pada blok kode ke-2 untuk menentukan warna text (red).

Pada halaman ini, kita akan mengetahui tentang mana konfigurasi CSS yang akan digunakan oleh browser terkait elemen tertentu.

Prioritas CSS ditentukan berdasarkan beberapa hal, beberapa hal ini adalah penempatan, selektor, dan !important suffix pada value.

Prioritas 1: !important suffix

Bowser akan memilih properti yang memiliki suffix (akhiran) !important sebagai prioritas utama.

p {
  color:green;
}

p {
  color:red!important;
  text-decoration:underline;
}

p {
  color:blue;
}

<p>Paragraf</p>

Paragraf

Bagaimana kalau tidak terdapat satupun properti dengan akhiran !important ?

Browser akan menerapkan aturan selanjutnya yaitu mengecek Inline CSS.

Prioritas 2: Inline CSS

Ketika terdapat inline CSS pada elemen, konfigurasi lainya (Internal dan eksternal) akan diabaikan.

Contoh:

p {
  color:blue;
  text-decoration:underline;
}
.myparagraf {
  color:green;
}

<p class='myparagraf' style='color:red'>Paragraf</p>

Paragraf

Prioritas 3: Selektor yang lebih spesifik

Seberapa spesifik selektor ditentukan oleh jenis selektor itu sendiri serta berapa banyak selektor yang terlibat.

Berdasarkan jenis selektor

Setiap jenis selektor memiliki tingkat (score) prioritas yang berbeda. Berikut adalah tingkatan prioritas berdasarkan jenis selektor.

Selektor berdasarkan ID (#id)
Selektor berdasarkan class atau atribut (.class atau [atribut="value"])
Selektor berdasarkan nama elemen (elemen)

Contoh:

#myparagraf {
  color:red;
  text-decoration:underline;
}
.myparagraf {
  color:green;
}

<p class='myparagraf' id='myparagraf'>Paragraf</p>

Paragraf

.myparagraf {
  color:green;
}
#myparagraf {
  color:red;
  text-decoration:underline;
}

<p class='myparagraf' id='myparagraf'>Paragraf</p>

Paragraf

Keterangan Seperti yang terlihat pada tab hasil, konfigurasi yang terpilih adalah konfigurasi yang terdapat pada blok kode dengan selektor berdasarkan ID. Ya, karena selektor berdasarkan ID memiliki prioritas lebih tinggi dibandingkan selektor berdasarkan class, tidak peduli penempatan blok kode, selektor dengan ID akan diterapkan.

Berdasarkan jumlah selektor yang terlibat

Pedefinisian suatu selektor dapat dilakukan secara spesifik dengan cara menggabungkan beberapa selektor yang relevan terkait elemen yang dikehendaki. Terkait prioritas browser, konfigurasi dengan jumlah selektor yang lebih banyak akan diterapkan.

Contoh:

.myparagraf {
  color:green;
}
p.myparagraf {
  color:red;
}

<p class='myparagraf'>Paragraf</p>

Paragraf

Keterangan Pada blok kode pertama, jumlah selektor yang didefinisikan adalah satu (berdasarkan class). Pada blok kode ke-2, jumlah selektor adalah dua (berdasarkan elemen dan class). Sesuai dengan aturan prioritas CSS, karena selektor ke-2 didefiniskan lebih spesifik (lebih banyak selektor yang terlibat), konfigurasi pada blok kode ke-2 akan dipilih.

Prioritas 4: Berdasarkan penempatan

Ketika browser belum mendapatkan prioritas dengan aturan-aturan yang telah diuraikan sebelumnya, aturan selanjutnya yang akan dijalankan adalah melihat penempatan konfigurasi. Dalam hal ini, konfigurasi yang diletakkan paling akhir akan menjadi prioritas.

Contoh:

.myparagraf {
  color:green;
  text-decoration:underline;
}
.myparagraf {
  color:red;
}

<p class='myparagraf'>Paragraf</p>

Paragraf

Keterangan Pada kode diatas, browser akan memilih konfigurasi pada blok kode ke-2, hal ini karena blok kode ke-2 didefinisikan paling akhir.

Prioritas 5: Default CSS

Ketika tidak terdapat konfigurasi yang mengatur elemen tertentu, browser akan menggunakan default CSS dalam mendekorasi elemen. Adapun default CSS ini mungkin berbeda antara browser satu dan browser lainnya.

Apa itu CSS selektor ? Daftar CSS Selektor Lengkap

Daftar isi:

Apa itu CSS selektor

Apa itu CSS Selektor ?

CSS selektor adalah bagian dari konfigurasi CSS yang mendefinisikan tentang Elemen mana yang akan diataur.

<p class='blue'>Konten</p>
<p class='blue'>Konten</p>
<div>Konten</div>

.blue {
   color:blue;
}

Konten

Pada kode diatas, .blue bertindak sebagai selektor, CSS diatas mengatur warna text untuk semua elemen dengan class blue.

1. Macam-macam CSS selektor

1.1 Berdasarkan Elemen

Selektor ini juga sering disebut sebagai selektor berdasarkan nama tag
Penulisan selektor ini dilakukan dengan cara menuliskan langsung nama elemen yang hendak diatur
Format penulisan: namaelemen

Contoh:

<h2>Judul</h2>
<p>Konten p1</p>
<div>Konten div</div>
<p>Konten p2</p>

p {
   color:blue;
}

Judul

Konten p1

Konten div

Konten p2

<h2>Judul</h2>
<p>Konten p1</p>
<div>Konten div</div>
<p>Konten p2</p>

p {
   color:blue;
}

div {
   color:red;
}

Judul

Konten p1

Konten div

Konten p2

1.2 Berdasarkan Class

Mengatur elemen dengan class tertentu
Penulisan selektor ini ditulis dengan cara menambahkan tanda titik (.) sebelum nama class
Format penulisan: .namaclass

Contoh:

<p class='blue'>Konten</p>
<p class='blue'>Konten</p>
<p>Konten</p>

.blue {
   color:blue;
}

Konten

Untuk mengatur elemen yang memiliki 2 class (atau lebih), pendefinisian selektor dilakukan seperti berikut (selektor ke-3 dibawah).

<p class='blue'>Konten</p>
<p class='big'>Konten</p>
<p class='blue big'>Konten</p>
<p>Konten</p>

.blue {
   color:blue; /* set warna menjadi biru untuk class blue */
}

.big {
   font-size:200%; /* set ukuran font menjadi sebesar 200% untuk class big*/
}

.blue.big { /* konfigurasi ini hanya akan diterapkan pada elemen yang memiliki class keduanya, untuk elemen dengan class blue saja atau big saja, konfigurasi tidak akan diterapkan */
  text-decoration:underline; /* Memberikan garis bawah untuk class blue big */                      
}

Konten

1.3 Berdasarkan ID

Mengatur elemen dengan ID tertentu
Penulisan selektor berdasarkan ID ditulis dengan cara menambahkan tanda pagar (#) sebelum nama ID.
Format penulisan: #namaid

Contoh:

<p>Konten 1</p>
<p id='konten2'>Konten 2</p>
<p>Konten 3</p>

#konten2 {
   color:blue;
}

Konten 1

Konten 2

Konten 3

1.4 Berdasarkan Atribut

Ada banyak selektor berdasarkan atribut, hal ini seperti berdasarkan ketersediaan, awalan, akhiran dan beberapa lagi lainnya. Pada format penulisan semua selektor dibawah, value, kata, text bersifat Case sensitive.

1.4.1 Berdasarkan ketersediaan

Mengatur semua elemen yang memiliki atribut tertentu
Format penulisan: [namaatribut]

Contoh:

<p title='Blogger'>Blogger</p>
<p title='blogger'>blogger</p>
<p>Tidak terdapat atribut</p>

[title] {
   color:blue;
}

Blogger

blogger

Tidak terdapat atribut

1.4.2 Berdasarkan Value

Mengatur semua elemen yang memiliki atribut dengan value tertentu
Format penulisan: [namaatribut="value"]

Contoh:

<p title='Blogger'>Blogger</p>
<p title='blogger'>blogger</p>
<p title='Belajar Blogger'>Belajar Blogger</p>

[title="Blogger"] {
   color:blue;
}

Blogger

blogger

Belajar Blogger

1.4.3 Mengandung Kata tertentu

Mengatur semua elemen yang memiliki atribut dengan value yang mengandung kata tertentu
Format penulisan: [namaatribut~="kata"]

Contoh:

<p title='Blogger'>Blogger</p>
<p title='blogger'>blogger</p>
<p title='Bloggers'>Bloggers</p>
<p title='Belajar Blogger'>Belajar Blogger</p>
<p title='Belajar-Blogger'>Belajar-Blogger</p>
<p title='Blogger-CSS'>Blogger-CSS</p>

[title="Blogger"] {
   color:blue;
}

Blogger

blogger

Bloggers

Belajar Blogger

Belajar-Blogger

Blogger-CSS

Keterangan:

<p title='Blogger BelajarBlogger Belajar-Blogger'/>
<!-- Pada atribut "title" diatas, 
     apa yang dimaksud dengan "kata" adalah:
     - Blogger BelajarBlogger Belajar-Blogger
     - Blogger
     - BelajarBlogger
     - Belajar-Blogger
 -->

<p title='BelajarBlogger Belajar-Blogger'/>
<!-- Pada atribut "title" diatas, 
     apa yang dimaksud dengan "kata" adalah:
     - BelajarBlogger Belajar-Blogger
     - BelajarBlogger
     - Belajar-Blogger
 -->

1.4.4 Mengandung Text tertentu

Mengatur semua elemen yang memiliki atribut dengan value yang mengandung text tertentu
Format penulisan: [namaatribut*="text"]

Contoh:

<p title='B'>B</p>
<p title='Bc'>Bc</p>
<p title='aB'>aB</p>
<p title='aBc'>aBc</p>
<p title='b'>b</p>

[title*="B"] {
   color:blue;
}

aBc

Keterangan: Apa yang dimaksud dengan text diatas adalah karakter atau kombinasi beberapa karakter.

<p title='ABC'/>
<!-- Pada atribut "title" diatas, 
     apa yang dimaksud dengan "text" adalah:
     - A
     - AB
     - ABC
     - B
     - BC
     - C
 -->

1.4.5 Berdasarkan Awalan

Mengatur semua elemen yang memiliki atribut dengan value yang diawali dengan text tertentu
Format penulisan: [namaatribut^="text"]

Contoh:

<p title='Blogger'>Blogger</p>
<p title='blogger'>blogger</p>
<p title='Belajar Blogger'>Belajar Blogger</p>
<p title='Blogger CSS'>Blogger-CSS</p>
<p title='Blogger-CSS'>Blogger-CSS</p>
<p title='BloggerCSS'>Blogger-CSS</p>

[title^="Blogger"] {
   color:blue;
}

Blogger

blogger

Belajar Blogger

Blogger CSS

Blogger-CSS

BloggerCSS

1.4.6 Berdasarkan Akhiran

Mengatur semua elemen yang memiliki atribut dengan value yang diakhiri dengan text tertentu
Format penulisan: [namaatribut$="text"]

Contoh:

<p title='Blogger'>Blogger</p>
<p title='blogger'>blogger</p>
<p title='Belajar Blogger'>Belajar Blogger</p>
<p title='Blogger CSS'>Blogger CSS</p>
<p title='CSSBlogger'>CSSBlogger</p>

[title$="Blogger"] {
   color:blue;
}

Blogger

blogger

Belajar Blogger

Blogger CSS

CSSBlogger

1.5 Semua elemen

Mengatur semua elemen. Selektor ini sering kali dikombinasikan dengan selektor Direct-children (Akan anda jumpai pada bagian 2.2.2 selanjutnya)
Format penulisan: *

Contoh:

<div>
    <div>div-div</div>
    <p>div-p</p>
</div>
<p>p</p>
<div>div</div>

* {
   color:blue;
}
div > * {
   border:2px solid blue;
   padding:10px;
   margin-bottom:10px;
}

div-div

div-p

span

Selain beberapa selektor diatas, masih ada banyak selektor yang tersedia, adapun selektor-selektor lainnya ini dikenal dengan Pseudo-class. Pembahasan mengenai selektor-selektor ini akan dibahas terpisah. Anda bisa melihat lebih lanjut mengenai selektor Pseudo-class melalui link-link pada daftar dibawah (jika telah tersedia). Untuk daftar yang bukan berupa link, itu artinya materi belum tersedia pada blog ini. Manfaatkan pencarian google untuk mencari informasi terkait selektor yang bersangkutan. Anda juga bisa berlangganan artikel kami melalui formulir Berlangganan Artikel yang terdapat di bagian bawah blog ini untuk mendapatkan update materi-materi yang akan kami terbitkan selanjutnya.

::after
::before
::first-letter
::first-line
::selection
::palceholder
:empty
:first-child
:first-of-type
:last-child
:last-of-type
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
:only-of-type
:only-child
:active
:focus
:hover
:link
:visited
:valid
:invalid
:read-only
:read-write
:required
:optional
:checked
:disabled
:enabled
:in-range
:out-of-range
:indeterminate
:lang(language)
:root
:target
:not(selector)

2. Mengkombinasikan beberapa selektor

Kita bisa mengkombinasikan beberapa selektor untuk mengatur elemen berdasarkan kriteria tertentu dengan lebih spesifik. Hal ini seperti misalnya mengatur elemen p yang terdapat didalam elemen div, mengatur elemen p yang berada tepat setelah elemen div dan lain sebagainya.

2.1 Elemen yang relevan terhadap beberapa selektor

Format penulisan: selektor1selektor2selektorN
Penulisan selektor dilakukan dengan cara menggabungkan beberapa selektor (dua atau lebih) secara langsung tanpa pemisah
Konfigurasi hanya akan diterapkan pada elemen-elemen yang relavan dengan semua selektor

Contoh:

<p class='b'>Elemen = p, class = b</p>
<p class='b' title='Blogger'>Elemen = p, class = b, title = Blogger</p>
<div class='b' title='Blogger'>Elemen = div, class = b, title = Blogger</div>

/* Kofigurasi berikut hanya akan ditepkan pada 
elemen "p" yang memiliki class "b" */
p.b {
   color:blue;
}

Elemen = p, class = b

Elemen = p, class = b, title = Blogger

Elemen = div, class = b, title = Blogger

<p class='b'>Elemen = p, class = b</p>
<p class='b' title='Blogger'>Elemen = p, class = b, title = Blogger</p>
<div class='b' title='Blogger'>Elemen = div, class = b, title = Blogger</div>

/* Konfigurasi berikut hanya akan diterapkan pada
elemen "p" yang memiliki class "b" dan dengan title "Blogger" */
p.b[title="Blogger"] {
   color:blue;
}

Elemen = p, class = b

Elemen = p, class = b, title = Blogger

Elemen = div, class = b, title = Blogger

2.2 Mengatur Children (sub) dari elemen tertentu

Pada HTML, terdapat dua jenis children, dua jenis children ini adalah Children dan Direct-children. Pembahasan tentang dua istilah ini bisa anda baca pada post: Children dan Direct-children.

2.2.1 Children

Format penulisan: selektor1 selektor2
Fungsi:Mengatur elemen dengan selektor2 yang merupakan children dari elemen selektor1
Setiap selektor dipisahkan dengan spasi

Contoh:

<div id='mydiv'>
  #mydiv
  <div>
      #mydiv-div
      <div>#mydiv-div-div</div>
      <div>#mydiv-div-div</div>
  </div>
  <div>
      #div1-div
      <div>#mydiv-div-div</div>
      <div>#mydiv-div-div</div>
  </div>
</div>
<div>div outside #mydiv</div>

#mydiv div {
   border:2px solid black;
   color:blue;
   padding:10px;
   margin-bottom:10px;
}

#mydiv

#mydiv-div

#mydiv-div-div

#mydiv-div

#mydiv-div-div

div outside #mydiv

2.2.2 Direct-children

Format penulisan: selektor1 > selektor2
Fungsi:Mengatur elemen dengan selektor2 yang merupakan direct-children dari elemen selektor1

Contoh:

<div id='mydiv'>
  #mydiv
  <div>
      #mydiv-div
      <div>#mydiv-div-div</div>
      <div>#mydiv-div-div</div>
  </div>
  <div>
      #div1-div
      <div>#mydiv-div-div</div>
      <div>#mydiv-div-div</div>
  </div>
</div>
<div>div outside #mydiv</div>

#mydiv > div {
   border:2px solid black;
   padding:10px;
   margin-bottom:10px;
}

#mydiv

#mydiv-div

#mydiv-div-div

#mydiv-div

#mydiv-div-div

div outside #mydiv

2.3 Preceded selector: Mengatur elemen yang sebelumnya terdapat elemen tertentu (pada level yang sama)

Terdapat 2 jenis selektor preceded, dua jenis ini adalah Preceded dan Direct-preceded.

2.3.1 Preceded

Format penulisan: selektor1 ~ selektor2
Fungsi:Mengatur elemen dengan selektor2 yang berada setelah elemen dengan selektor1 pada level yang sama. Adapun posisi selektor1 tidak harus berada tepat sebelum selektor2 (bandingkan dengan direct-preceded).

Contoh:

<p>p</p>
<p>p</p>
<div>div</div>
<p>p</p>
<p>p</p>
<div>div</div>
<div>
  <p>p</p>
</div>
<p>p</p>

div ~ p {
   color:blue;
}

div

2.3.2 Direct-preceded

Format penulisan: selektor1 + selektor2
Fungsi:Mengatur elemen dengan selektor2 yang berada Tepat setelah elemen dengan selektor1 pada level yang sama.

Contoh:

<p>p</p>
<p>p</p>
<div>div</div>
<p>p</p>
<p>p</p>
<div>div</div>
<div>
  <p>p</p>
</div>
<p>p</p>

div ~ p {
   color:blue;
}

div

3. Menerapkan konfigurasi untuk beberapa selektor

Untuk mempersingkat penulisan konfigurasi, kita bisa menerapkan satu konfigurasi (blok kode) untuk beberapa selektor. Hal ini dilakukan ketika beberapa selektor memiliki beberapa konfigurasi properti yang sama. Adapun cara mempersingkat penulisan ini dilakukan dengan memisahkan setiap selektor dengan tanda koma (,).

div {
   color:blue;
}
p {
   color:blue;
}
span {
   color:blue;
}
.mydiv > * {
   color:blue;
}

div, p, span, .mydiv > * {
   color:blue;
}

Next: Prioritas CSS: Bagaimana browser memilih mana konfigurasi yang akan digunakan

Istilah pada HTML: Children dan Direct-Children

<div id='mydiv'>
  <span id='span1'>
    <i><!--konten--></i>
    <i><!--konten--></i>
  </span>
  <span id='span2'>
    <i><!--konten--></i>
    <i><!--konten--></i>
  </span>
</div>

Children

Pada kode HTML diatas, semua elemen span dan i merupakan children (sub) dari elemen #mydiv.

Direct-children

Pada kode HTML diatas, hanya elemen dengan id span1 dan span2 yang merupakan Direct-children dari #mydiv. Dengan kata lain, direct-children merujuk pada sub pada level pertama (ke-1).