GaplehAmp

Situs berbagi informasi tentang teknologi terupdate
Typography, Writing Style, Formatting, Attribute, etc

Typography, Writing Style, Formatting, Attribute, etc

Malestea

NORMAL FONT. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

GaplehAmp Theme Typography: Writing Style, Formating, Attribution, etc

Heading <h1>

Heading <h2>

Subheading <h3>

Minor heading <h4>

Bold
Italic
Underscore
Striketrough UPPERCASE
lowercase
Malestea (active link)

Smallest
Small
Large
Largest

E = MC2
H2O

<mark> (highlight)
<code>
<kbd>
<samp>
<var>

Dropcap

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

How to use:

<span class='drop'>L</span>orem Ipsum is simply dummy....

Syntax Highlighter

/* SYNTAX HIGHLIGHTER */
.post-body pre{
background-color:#333;
border-left:5px solid #009688;
padding:0;
margin:.5em auto;
}

How to use:

<pre><code>Isi kode yang sudah di-parse</code></pre>

Basic Usage

Cara penulisan Gambar Slider type='carousel' yang benar seperti diatas adalah dengan mode html yang kodenya sebagai berikut:

<amp-carousel height="300" layout="fixed-height" type="carousel">
<!-- gambar -->
</amp-carousel>

Slides

Cara penulisan Gambar Slider type='slides' yang benar seperti diatas adalah dengan mode html yang kodenya sebagai berikut:

<amp-carousel width="400" height="300" layout="responsive" type="slides">
<!-- gambar -->
</amp-carousel>

Autoplay

Cara penulisan Gambar Slider type='slides' dengan autoplay dan delay yang benar seperti diatas adalah dengan mode html yang kodenya sebagai berikut:

<amp-carousel width="400" height="300" layout="responsive" type="slides" autoplay='' delay="2000">
<!-- gambar -->
</amp-carousel>

Button

How to use:

<a href="https://www.google.com"><button class="download">Download</button></a>

Table of contents

Daftar isi

How to use:

<div class="toc">
  <input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h3>Daftar isi</h3><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
  <ul>
    <li>1. <a href="#toc-1" title="Judul heading satu">Judul heading satu</a>
      <ul>
        <li>1.1. <a href="#toc-1a" title="Subheading satu">Subheading satu</a></li>
        <li>1.2. <a href="#toc-1b" title="Subheading satu">Subheading dua</a></li>
        <li>1.3. <a href="#toc-1c" title="Subheading satu">Subheading tiga</a></li>
        <li>1.4. <a href="#toc-1d" title="Subheading satu">Subheading empat</a></li>
        <li>1.5. <a href="#toc-1e" title="Subheading satu">Subheading lima</a></li>
      </ul>
    </li>
    <li>2. <a href="#toc-2" title="Judul heading dua">Judul heading dua</a></li>
    <li>3. <a href="#toc-3" title="Judul heading dua">Judul heading tiga</a></li>
    <li>4. <a href="#toc-4" title="Judul heading dua">Judul heading empat</a></li>
    <li>5. <a href="#toc-5" title="Judul heading dua">Judul heading lima</a></li>
  </ul>
</div>

// Edit tulisan yang ditandai dengan subjudul Anda, kemudian tambahkan id='toc-1' disetiap heading atau tag <h2>, <h3>, <h3> pada artikel Anda. Contoh:

<h3>Judul subheading</h3>
Isi paragraf pada subheading artikel

// Tambahkan id pada heading menjadi seperti dibawah :

<h3 id='toc-1'>Judul subheading</h3>
Isi paragraf pada subheading artikel

Anda bisa menyembunyikan daftar isi diawal dan hanya muncul setelah judul daftar isi di klik, caranya tambahkan atribut checked pada tag <input> seperti pada condoh dibawah ini:

<div class="toc">
  <input type="checkbox" role="button" id="toctoggle" class="toctoggle" checked><div class="toctitle"><h3>Daftar isi</h3><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
  <ul>
    <li>1. <a href="#toc-1" title="Judul heading satu">Judul heading satu</a>
      <ul>
        <li>1.1. <a href="#toc-1a" title="Subheading satu">Subheading satu</a></li>
        <li>1.2. <a href="#toc-1b" title="Subheading satu">Subheading dua</a></li>
        <li>1.3. <a href="#toc-1c" title="Subheading satu">Subheading tiga</a></li>
        <li>1.4. <a href="#toc-1d" title="Subheading satu">Subheading empat</a></li>
        <li>1.5. <a href="#toc-1e" title="Subheading satu">Subheading lima</a></li>
      </ul>
    </li>
    <li>2. <a href="#toc-2" title="Judul heading dua">Judul heading dua</a></li>
    <li>3. <a href="#toc-3" title="Judul heading dua">Judul heading tiga</a></li>
    <li>4. <a href="#toc-4" title="Judul heading dua">Judul heading empat</a></li>
    <li>5. <a href="#toc-5" title="Judul heading dua">Judul heading lima</a></li>
  </ul>
</div>

Spoiler

Judul Spoiler:

"Perumpamaan (nafkah yang dikeluarkan oleh) orang-orang yang menafkahkan hartanya di jalan Allah adalah serupa dengan sebutir benih yang menumbuhkan tujuh bulir, pada tiap-tiap bulir seratus biji. Allah melipatgandakan (ganjaran) bagi siapa yang Dia kehendaki. Dan Allah Maha Luas karunia-Nya lagi Maha Mengetahui". QS. Al-Baqarah: 261

How to use:

<div class="spoiler">
  <input id="spoilertoggle" type="checkbox">
  <div class="spoiler-judul"><b>Judul Spoiler: </b><label aria-label="Spoiler" for="spoilertoggle"></label></div>
  <div class="spoiler-isi">
    <div>
      <p>Isi Spoiler</p>
    </div>
  </div>
</div>

Youtube

Penggunaanya sangat mudah:

  • Salin kode pemutaran video youtube yang ingin ditampilkan
  • Contoh url video youtube : youtube.com/watch?v=r9OWmGwbRG0
  • Yang perlu Anda salin hanyalah kode 'r9OWmGwbRG0' lalu tempel pada bagian yang suda ditandai di kode ini

How to use:

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

Blockquote

Social media marketing, social media optimization, blogger tutorial for beginners. Stimulate your passion! #Nganggurpreneur
Karena sesungguhnya sesudah kesulitan itu ada kemudahan - QS,. Ash-Sharh:5

How to use:

<blockquote>isi tulisan</blockquote>

Note block

Note: Kreativitas kunci kesuksesan

How to use:

<p class='note'>teks_anda_disini</p>

Success: Kreativitas kunci kesuksesan

How to use:

<p class='success'>teks_anda_disini</p>

Danger: Kreativitas kunci kesuksesan

How to use:

<p class='danger'>teks_anda_disini</p>

Warning: Kreativitas kunci kesuksesan

How to use:

<p class='warning'>teks_anda_disini</p>

Table

No. Nama Kota
1 Rian Sumedang
2 Rain Bandung
3 RedSky Jakarta
4 Queen Bekasi
5 Bjita Tangerang
6 Alphabetees Bogor

How to use:

<table><thead>
<tr><th>No.</th> <th>Nama</th> <th>Kota</th></tr>
</thead> <tbody>
<tr><td>1</td> <td>Rian</td> <td>Sumedang</td></tr>
<tr><td>2</td> <td>Rain</td> <td>Bandung</td></tr>
<tr><td>3</td> <td>RedSky</td> <td>Jakarta</td></tr>
</tbody></table>

Ordered List

Is a list with number.

  1. Satu satu satu
  2. Dua dua dua
  3. Tiga tiga tiga
  4. Empat empat empat
  5. Lima lima lima
  6. Enam enam enam
  7. Tujuh tujuh tujuh
  8. Delapan delapan delapan
  9. Sembilan sembilan sembilan
  10. Sepuluh sepuluh sepuluh

Unordered List

Is a list without number.

  • Satu satu satu
  • Dua dua dua
  • Tiga tiga tiga
  • Empat empat empat
  • Lima lima lima
  • Enam enam enam
  • Tujuh tujuh tujuh
  • Delapan delapan delapan
  • Sembilan sembilan sembilan
  • Sepuluh sepuluh sepuluh

Nested

  1. Satu
    1. Satu satu
      1. Satu satu satu
  2. Dua
  3. Tiga
  • Satu
    • Satu satu
      • Satu satu satu
  • Dua
  • Tiga
  1. Satu
    • Satu satu
      • Satu satu satu
  2. Dua
  3. Tiga
Documentation
Reaksi:
Share
Related Posts
Disqus Comments

Want to get free article updates via email? come on, enter your email