Beranda Kode HTML, CSS, dan JavaScript

Kode HTML, CSS, dan JavaScript

Daftar Isi
Kumpulan Kode Blogger
Kode HTML, CSS, dan JavaScript

Halaman ini khusus berisi tentang rangkuman kode-kode tema blogger baik untuk blog AMP maupun non AMP. Sekaligus menjadi sebuah catatan pribadi saya jika dikemudian hari lupa pada kode yang pernah digunakan.

Berikut Kumpulan HTML, CSS, dan JavaScript

1. Kode HTML Gambar untuk Blog AMP dan Non-AMP

Gambar Blog AMP:

Hanya bisa diterapkan pada blog yang bertema AMP.
<noscript>
<img alt="#2" height="720" width="1280" src="#1"></noscript>
<div class="img-width-1200 img-center">
<amp-img alt="#2" height="720" src="#1" width="1280" layout="responsive"><amp-img fallback alt="#2" height="720" src="#1" width="1280" layout="responsive"></amp-img></amp-img></div>
Copy dan paste kode di atas pada mode HTML postingan. Untuk kode yang ke-2 jangan lupa menambahkan -rw setelah ukuran gambar, Ex. s1600-rw

Gambar Blog non-AMP PNG:

<picture>
  <source srcset="IMG.webp" type="image/webp">
  <source srcset="IMG.png" type="image/png">
  <img src="IMG.png"
       alt="#1"
       width="1280"
       height="720"
       loading="lazy"
       fetchpriority="high">
</picture>

Gambar Blog non-AMP JPG:

<picture>
  <source srcset="IMG.webp" type="image/webp">
  <source srcset="IMG.jpg" type="image/jpeg">
  <img src="IMG.jpg"
       alt="#1"
       width="1280"
       height="720"
       loading="lazy"
       fetchpriority="high">
</picture>
Gunakan minimal satu gambar relevan, misalnya: foto bayi atau anak sedang bermain (nama file SEO-friendly seperti anak-cepat-bicara-vitamin.jpg). Alt text mendeskripsikan gambar dengan alami, contohnya “Anak kecil bermain sambil belajar bicara”.
ganti "lazy" dengan "eager" (hapus loading="lazy") Agar gambar dimuat segera. Sebaliknya jika gambar ada di tengah atau akhir isi artikel, maka gunakan "lazy"
Tidak disarankan menggunakan fetchpriority="high" jika gambar ada di tengah atau akhir isi artikel.

Gambar Blog non-AMP Content:

  • Kode HTML
    • <figure class="separator">
    
  <img src="https://contoh.com/gambar.jpg" alt="Deskripsi gambar" loading="lazy">
    
</figure>
  • CSS
    • figure.separator{margin:1.5em auto;padding:0;max-width:100%;text-align:center}figure.separator img{max-width:100%;height:auto;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,0.05)}figure.separator figcaption{margin-top:8px;font-size:0.9em;color:#666;font-style:italic;line-height:1.4}@media(max-width:480px){figure.separator figcaption{font-size:0.8em;padding:0 10px}}

KOde Alternatif (Rel, target, dan title link URL):

target="_blank" rel="noopener"
target="_blank" rel="nofollow noopener"
target="_blank" rel="noopener nofollow noreferrer"
Gunakan noopener setidaknya ketika target="_blank" dipakai. Gunakan nofollow untuk tautan berbayar, tidak terpercaya, atau eksternal jika ingin menjaga SEO. Gunakan noreferrer hanya jika ingin menyembunyikan asal lalu lintas.

2. Kode HTML Video Embed

KOde Video Blog non-AMP:

<iframe allowfullscreen="" frameborder="0" height="270" src="https://www.youtube.com/embed/xxxxx" width="480"></iframe>

KOde Video Blog AMP:

<amp-youtube
     data-videoid="VhilgmA6iRc"
     height="270"
     layout="responsive"
     width="480"></amp-youtube>

Di bawah ini adalah beberapa Custom Formatting Style yang dapat digunakan di dalam postingan.

#1 Tombol-tombol

a. Tombol Primary

Kode Tombol Default:

<a class="btn-default btn-primary" href="#"><button>Download</button></a>

Kode Tombol Download:

<a class="btn-download btn-primary" href="#"><button>Download</button></a>

Kode Tombol WhatsApp:

<a class="btn-whatsapp btn-primary" href="#"><button>WhatsApp</button></a>

Kode Tombol New Tab:

<a class="btn-new-tab btn-primary" href="#"><button>Demo</button></a>

a. Tombol Secondary

Kode Tombol Default:

<a class="btn-default btn-secondary" href="#"><button>Download</button></a>

Kode Tombol Download:

<a class="btn-download btn-secondary" href="#"><button>Download</button></a>

Kode Tombol WhatsApp:

<a class="btn-whatsapp btn-secondary" href="#"><button>WhatsApp</button></a>

Kode Tombol New Tab:

<a class="btn-new-tab btn-secondary" href="#"><button>Demo</button></a>

#2 Kotak Notifikasi

a. Informasi

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras pulvinar mattis eros. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

Kode:

<div class='notification-box info'>konten</div>

b. Peringatan

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras pulvinar mattis eros. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

Kode:

<div class='notification-box warning'>konten</div>

b. Galat

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras pulvinar mattis eros. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

Kode:

<div class='notification-box error'>konten</div>

#3 Gambar Grid

a. Dua Kolom

IMG IMG IMG IMG

Kode:

<div class='grid-images two-col'>
  <img src='https://...jpg' alt='IMG' width='300' heigth='300'/>
  <img src='https://...jpg' alt='IMG' width='300' heigth='300'/>
  <img src='https://...jpg' alt='IMG' width='300' heigth='300'/>
  <img src='https://...jpg' alt='IMG' width='300' heigth='300'/>
</div>

a. Tiga Kolom

IMG IMG IMG IMG IMG IMG

Kode:

<div class='grid-images three-col'>
  <img src='https://...jpg' alt='IMG' width='200' heigth='200'/>
  <img src='https://...jpg' alt='IMG' width='200' heigth='200'/>
  <img src='https://...jpg' alt='IMG' width='200' heigth='200'/>
  <img src='https://...jpg' alt='IMG' width='200' heigth='200'/>
  <img src='https://...jpg' alt='IMG' width='200' heigth='200'/>
  <img src='https://...jpg' alt='IMG' width='200' heigth='200'/>
</div>

#4 Accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit?
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit?
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit?
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Kode:

<div class="accordion-container">
  <div class="accordion-toggle">Pertanyaan?</div>
  <div class="accordion-content">
    <div>
      Jawaban
    </div>
  </div>
  <div class="accordion-toggle">Pertanyaan?</div>
  <div class="accordion-content">
    <div>
      Jawaban
    </div>
  </div>
  <div class="accordion-toggle">Pertanyaan?</div>
  <div class="accordion-content">
    <div>
      Jawaban
    </div>
  </div>
</div>

#5 Slider

a. Slider Gambar

IMG IMG IMG IMG

Kode:

<div class='slider-container'>
  <div class='slider-content'>
    <img width='300' height='300' src='https://...jpg' alt='IMG'/>
    <img width='300' height='300' src='https://...jpg' alt='IMG'/>
    <img width='300' height='300' src='https://...jpg' alt='IMG'/>
    <img width='300' height='300' src='https://...jpg' alt='IMG'/>
  </div>
</div>

b. Slider Bukan Gambar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod risus eu nibh laoreet, a mollis lorem accumsan. Donec vitae leo at tellus sodales faucibus vel id magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Mauris fermentum ipsum eget tellus molestie, at consequat vel, viverra ornare. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Nulla vitae elit libero. Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante blandit, a sodales nisl vehicula. Sed elementum tempus egestas. Suspendisse potenti. Nulla facilisi. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Kode:

<div class='slider-container'>
  <div class='slider-content'>
    <div class='slider-content-item'>Konten Slider 1</div>
    <div class='slider-content-item'>Konten Slider 2</div>
    <div class='slider-content-item'>Konten Slider 3</div>
  </div>
</div>

#6 Syntax Highlighter

a. Contoh menampilkan kode HTML

<h1>Hello World!</h1>

Kode:

<pre><code class='lang-html'>kode HTML yang sudah diparse</code></pre>

b. Contoh menampilkan kode CSS

body {
    font-family: Arial, sans-serif;
    color: #333;
}

Kode:

<pre><code class='lang-css'>kode CSS yang sudah diparse</code></pre>

c. Contoh menampilkan kode JavaScript

// the hello world program
console.log('Hello World');

Kode:

<pre><code class='lang-javascript'>kode JS yang sudah diparse</code></pre>

d. Contoh menampilkan kode Python

# This program prints Hello, world!
print('Hello, world!')

Kode:

<pre><code class='lang-python'>kode Python yang sudah diparse</code></pre>

#7 Lazy Load Youtube

Kode:

<div class="lazy-youtube" data-video-id="A8bsrYqn0NQ">
  <div class="lazy-youtube-play"></div>
</div>

#8 Tabel Responsive

non_AMP

CSS code:


.table-responsive{min-height:.01%;overflow-x:auto}
.table{width:100%;border-collapse:collapse;border-spacing:0}
.table td,.table th{background-color:#F3F5EF;border:1px solid #bbb;color:#333;font-family:sans-serif;font-size:100%;padding:10px;vertical-align:top}
.table tr:nth-child(even) td{background-color:#F0F0E5}
.table th{background-color:#EAE2CF;color:#333;font-size:110%}
.table tr.even:hover td,.table tr:hover td{color:#222;background-color:#FFFBEF}
.tg-bf{font-weight:700}
.tg-it{font-style:italic}
.tg-left{text-align:left}
.tg-right{text-align:right}
.tg-center{text-align:center}
@media screen and (max-width:767px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}
.table-responsive>.table{margin-bottom:0}
.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>td,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>thead>tr>th{white-space:nowrap}
}

HTML post

<div class='table-responsive'>
  <table class="table">
    <tr>
      <th colspan="4" class="tg-center tg-bf">Bokingan Hari Biasa</th>
    </tr>
    <tr>
      <td>Jenis Kamar</td>
      <td>Harga</td>
      <td>Jumlah Kamar</td>
      <td>Jumlah</td>
    </tr>
    <tr>
      <td>Ekonomi</td>
      <td>Rp. 150.000</td>
      <td>5 kamar</td>
      <td>Rp. 750.000</td>
    </tr>
    <tr>
      <td>Standar</td>
      <td>Rp. 200.000</td>
      <td>5 kamar</td>
      <td>Rp. 1.000.000</td>
    </tr>
    <tr>
      <td>Standar AC</td>
      <td>Rp. 300.000</td>
      <td>4 kamar</td>
      <td>Rp. 1.200.000</td>
    </tr>
    <tr>
      <td>VIP/Family</td>
      <td>Rp. 350.000</td>
      <td>1 kamar</td>
      <td>Rp. 350.000</td>
    </tr>
  </table>
</div>
tg-bf untuk huruf tebal; tg-it untuk huruf miring; tg-left untuk rata kiri; tg-right untuk rata kanan; tg-center untuk rata tengah.
Untuk kode class="tg-center tg-bf" silahkan sesuai dengan keperluan untuk mengatur letak header table.