Skip to main content

Membuat Penomeran Otomatis Pada Beberapa Tag Blockquote

Membuat Penomeran Otomatis Pada Beberapa Tag Blockquote - Setelah kemarin saya posting Cara Menghilangkan Tanggal Postingan Di Hasil Pencarian, kali ini saya akan coba posting dengan judul membuat penomoran otomatis pada beberapa tag blockquote di dalam postingan.

Biasanya untuk membuat penomeran pada tag blocquote akan menggunakan Javascript. Namun disini saya tidak menggunakan Javascript, sehingga bisa di pasang untuk Blog AMP maupun Non AMP.

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

Jika Anda ingin Membuat Penomeran Otomatis Pada Beberapa Tag Blockquote di blog Anda, silahkan ikuti langkahnya seperti dibawah ini.

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. Nah, itulah cara Membuat Penomeran Otomatis Pada Beberapa Tag Blockquote. Semoga bermanfaat.

Sumber: https://www.kompiajaib.com/2018/02/membuat-penomoran-otomatis-pada.html

You Might Also Like:

Buka Komentar