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

Kode HTML Gambar WebP

Blog 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>

Blog non-AMP PNG:

<picture>
  <source srcset="https://#4" type="image/webp"/>
  <source srcset="https://#4" type="image/png"/>
  <img src="https://#4" alt="Alt Text!" width="1280" height="720" title="Alt Text!"/>
</picture>

Blog non-AMP JPG:

<picture>
  <source srcset="https://#4" type="image/webp"/>
  <source srcset="https://#4" type="image/jpg"/>
  <img src="https://#4" alt="Alt Text!" width="1280" height="720" title="Alt Text!"/>
</picture>

Rel, target, dan title link URL:

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

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

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

Kode CSS dan HTML Tabel Responsive

CSS no-minify

.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 dalam postingan

<div class="table-responsive">
  <table class="table">
    <tr>
      <th class="tg-center tg-bf" colspan="2">BAHAN YANG DIBUTUHKAN</th>
    </tr>
    <tr>
      <td>#1</td>
      <td>#2</td>
    </tr>
    <tr>
      <td>#1</td>
      <td>#2</td>
    </tr>
    <tr>
      <td>#1</td>
      <td>#2</td>
    </tr>
    <tr>
      <td>#1</td>
      <td>#2</td>
    </tr>
    <tr>
      <td>#1</td>
      <td>#2</td>
    </tr>
  </table>
</div>

Kode Anti Copas (Copy Paste)

CSS no-minify

.post-body{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

CSS minify

.post-body{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}

Kode CSS dan HTML Teks Arab

CSS minify

.block-arab{border:1px solid #eaeaef;border-radius:8px;padding:10px;margin:1.5em 0}.block-arab .arab{margin:0}.arti-arab{position:relative;font-size:90%;background-color:rgba(0,0,0,.05);color:#717174;border-radius:8px;padding:20px 10px 10px;margin:2.5em 0 0}.arti-arab:before{content:'Artinya :';position:absolute;font-weight:700;border-radius:50px;background:#fcfcfc;color:#333;padding:0 15px 1px;top:-14px;left:15px}

Html dalam postingan

<div class="block-arab">
<div class="arab">
<div style="text-align: right;">
tulisan arab di sini
</div></div>
<div class="arti-arab">
artinya di sini
</div>
</div>

Kode Video Embed

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

MOM & BABY