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 == "item"'>
<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.