Kode HTML, CSS, dan JavaScript

Daftar Isi

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" title="#2" /></noscript>

<div class="img-width-1200 img-center">
<amp-img alt="#2" height="720" src="#1" title="#2" width="1280" layout="responsive"><amp-img fallback alt="#2" height="720" src="#1" title="#2" 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="gambar.webp" type="image/webp"/>
  <source srcset="gambar.png" type="image/png"/>
  <img src="gambar.png" alt="Deskripsi Gambar" width="1280" height="720" title="Judul Gambar"/>
</picture>

Gambar Blog non-AMP JPG:

<picture>
  <source srcset="gambar.webp" type="image/webp"/>
  <source srcset="gambar.jpg" type="image/jpeg"/>
  <img src="gambar.jpg" alt="Deskripsi Gambar" width="1280" height="720" title="Judul Gambar"/>
</picture>

Gambar Blog non-AMP Content:

<div class="separator">
  <img src="url_gambar.jpg" alt="Deskripsi gambar yang relevan" />
</div>

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

target="_blank" rel="noopener" title="#"
target="_blank" rel="nofollow noopener" title="#"
target="_blank" rel="noopener nofollow noreferrer" title="#"

2. Kode HTML Video Embed

Kode Lazy Load Youtube Blog non-AMP:

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

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

Kode:

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

b. Galat

Kode:

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

#3 Gambar Grid

a. Dua Kolom

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

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

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>