Skip to main content

Membuat Penomoran Otomatis Pada Beberapa Blockquote

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.

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:

PrivacySitemap
©2021 KOMPI AJAIB