Membuat Penomoran Otomatis Pada Beberapa Blockquote
Pada umumnya penomoran otomatis biasa dipakai pada sebuah list, sebagai teladan penomoran pada list widget popular post.Namun kali ini kita akan menciptakan penomoran otomatis pada beberapa blockquote di dalam postingan.
Hal ini berkhasiat untuk blogger yang bermain kata-kata atau quote ibarat kata-kata bijak, kata-kata cinta, dan lainnya dan memakai tag
blockquote.Misal, di dalam postingannya membagikan 50 kata-kata bijak yang tiap kata-kata bijaknya memakai
blockquote. Maka dengan ini blockquote-nya mempunyai penomoran dari 1 - 50 (sebanyak blockquote yang digunakan).Seperti pada demo di JSFiddle berikut:
Silahkan simpan CSS style berikut di atas instruksi
</head>, untuk blog AMP silahkan ambil CSS-nya saja (yang aku 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 ibarat 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 agar bermanfaat.
Sumber https://www.kompiajaib.com/
0 Response to "Membuat Penomoran Otomatis Pada Beberapa Blockquote"
Posting Komentar