Membuat Penomoran Otomatis Pada Beberapa Blockquote

Ditulis oleh: Adhy Suryadi

Ditulis pada: 2/07/2018

Pada umumnya penomoran otomatis biasa digunakan pada sebuah list, sebagai contoh penomoran pada list widget popular post.

Namun kali ini kita akan membuat penomoran otomatis pada beberapa blockquote di dalam postingan.

Hal ini berguna untuk blogger yang bermain kata-kata atau quote seperti kata-kata bijak, kata-kata cinta, dan lainnya dan menggunakan tag blockquote.

Misal, di dalam postingannya membagikan 50 kata-kata bijak yang tiap kata-kata bijaknya menggunakan blockquote. Maka dengan ini blockquote-nya memiliki penomoran dari 1 - 50 (sebanyak blockquote yang digunakan).

Seperti pada demo di JSFiddle berikut:


Silahkan simpan CSS style berikut di atas kode </head>, untuk blog AMP silahkan ambil CSS-nya saja (yang saya tandai) dan simpan di style amp-custom.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>

/*<![CDATA[*/

.post-body {counter-reset:blockquote;}

.post-body blockquote.kata-kata{font-size:18px;font-family:Georgia;color:#000;border-left:3px solid #FF1744;padding:10px 10px 10px 40px;margin:0;background:#efefef;counter-increment:blockquote;position:relative;}

.post-body blockquote.kata-kata:before{content:counter(blockquote)'.';position:absolute;left:0;top:0;color:#000;font-size:18px;font-weight:700;z-index:2;width:40px;height:40px;line-height:40px;text-align:center;}

/*]]>*/

</style>

</b:if>

Kemudian di dalam postingannya tambahkan tag class="kata-kata" pada tiap-tiap blockquote seperti berikut ini.

<blockquote class="kata-kata">Kata-kata bijaknya di sini</blockquote>

<br />

<blockquote class="kata-kata">Kata-kata bijaknya di sini</blockquote>

<br />

<blockquote class="kata-kata">Kata-kata bijaknya di sini</blockquote>

<br />

<blockquote class="kata-kata">Kata-kata bijaknya di sini</blockquote>

<br />

<blockquote class="kata-kata">Kata-kata bijaknya di sini</blockquote>

<br />

<blockquote class="kata-kata">Kata-kata bijaknya di sini</blockquote>

<br />

<blockquote class="kata-kata">Kata-kata bijaknya di sini</blockquote>

<br />

Selesai, selamat mencoba dan semoga bermanfaat.