Skip to main content
JAP BERPUSAT

follow us

Cara Membuat Variasi List Numbering Otomatis di Blog AMP

Jika menulis artikel pada blog yang memiliki template/theme yang bukan AMP tentunya kita tidak perlu pusing lagi untuk memikirkan bagaimana cara agar postingan kita valid. Yang kita perlukan hanya cara membuat artikel yang bagus untuk pembaca dan pastinya bagus dimata google. Salah satu contoh yang terkadang saya sendiri juga sering lupa bahkan kesulitan dalam membuat artikel yang valid AMP adalah cara membuat Variasi List Numbering Otomatis di Blog AMP (Penomoran otomatis).

Setelah saya menelusuri atau istilahnya googling, akhirnya saya menemukan sebuah artikel yang menarik yaitu artikel dari hanyapedia.com atau lebih lengkapnya https://www.hanyapedia.com/2016/06/cara-membuat-bullets-dan-numbering-di-blogspot.html. Dari sana saya mengetahui bahwa dalam pembuatan Numbered list atau Bullet list ternyata bisa divariasi sama halnya seperti menulis pada lembar kerja microsoft word.

Setelah saya uji coba pada postingan ini, ternyata cara penulisan tersebut tidak menimbulkan error pada saat divalidasi menggunakan AMP validator.

Nah, bagi blogger pemula atau blogger yang baru mencoba template AMP yang ingin membuat variasi List Numbering Otomatis di Blog AMP-nya supaya tampil lebih rapi dan berbeda dengan yang lain, mari simak step by stepnya dibawah ini.

Untuk membuat Numbered list atau Bullet list pastinya harus diawali dulu dengan perintah <ul>.....</ul> atau <ol>....</ol>.

  1. Contoh kasus:
  2. Cara membuat lingkaran terisi, maka perintah yang kita pakai adalah <ul>. Perhatikan cara penulisannya seperti pada contoh dibawah ini:

    <ul>
    <li>Kata - kata dari kalimat...</li>
    <li>Kata - kata dari kalimat...</li>
    <li>Kata - kata dari kalimat...</li>
    </ul>

    Maka perintah yang dihasilnya tampak seperti berikut:

    • Kata - kata dari kalimat...
    • Kata - kata dari kalimat...
    • Kata - kata dari kalimat...

  3. Contoh kasus:
  4. Cara membuat angka otomatis, maka perintah yang kita pakai cukup dengan tag <ol>. Perhatikan cara penulisannya seperti pada contoh dibawah ini:

    
    <ol>
    <li>Kata - kata dari kalimat...</li>
    <li>Kata - kata dari kalimat...</li>
    <li>Kata - kata dari kalimat...</li>
    </ol>
    

    Maka perintah yang dihasilnya tampak seperti berikut:

    1. Kata - kata dari kalimat...
    2. Kata - kata dari kalimat...
    3. Kata - kata dari kalimat...

    Atau jika ingin mengurutkan pada angka yang diawali dengan angka tertentu seperti langsung keangka 3, kita dapat menggunakan perintah start="3". Perhatikan cara penulisannya seperti pada contoh dibawah ini:

    
    <ol start="3">
    <li>Kata - kata dari kalimat...</li>
    <li>Kata - kata dari kalimat...</li>
    <li>Kata - kata dari kalimat...</li>
    </ol>
    

    Maka perintah yang dihasilnya tampak seperti berikut:

    1. Kata - kata dari kalimat...
    2. Kata - kata dari kalimat...
    3. Kata - kata dari kalimat...

Dan yang terakhir yaitu apabila kita ingin membuat urutan otomatis berdasarkan angka pada blog AMP cukup dengan menggunakan perintah type="A" atau type="a" (huruf besar atau huruf kecil). Maka bentuk penulisannya adalah sebagai berikut:


<ol type="A">
<li>Kata - kata dari kalimat...</li>
<li>Kata - kata dari kalimat...</li>
<li>Kata - kata dari kalimat...</li>
</ol>

Perintah yang dihasilkan akan tampak seperti pada perintah dibawah ini:

  1. Kata - kata dari kalimat...
  2. Kata - kata dari kalimat...
  3. Kata - kata dari kalimat...

Satu lagi cara membalikan posisi urutan angka dari yang terbesar menjadi urutan yang terkecil, maka perintahnya adalah reversed="reversed".

Bentuk penulisan dengan menuliskan perintah reversed="reversed" pada mode html postingan blog AMP.


<ol reversed="reversed">
<li>Kata - kata dari kalimat...</li>
<li>Kata - kata dari kalimat...</li>
<li>Kata - kata dari kalimat...</li>
<li>Kata - kata dari kalimat...</li>
<li>Kata - kata dari kalimat...</li>
</ol>

Hasil yang diperoleh dengan menuliskan perintah reversed="reversed" pada mode html postingan blog AMP.

  1. Kata - kata dari kalimat...
  2. Kata - kata dari kalimat...
  3. Kata - kata dari kalimat...
  4. Kata - kata dari kalimat...
  5. Kata - kata dari kalimat...

Demikian yang dapat saya sampaikan, bila artikel ini bermanfaat silahkan bagikan supaya mereka yang belum tahu menjadi tahu. Terima kasih.

UPDATE: Untuk penggunaan tag <ul>.....</ul> dengan perintah type="circle", perintah type="disc", dan perintah type="square" setelah saya validasi ternyata masih didapati error validasi AMP. Jadi, sebaiknya tidak perlu menggunakan perintah type pada tag <ul>...</ul>.

You Might Also Like:

Comment Policy: Berikan komentar yang sesuai dengan tema pada postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar