How To Make Auto Numbering On Some Blockquote
How To Make Auto Numbering On Some Blockquote - In general, automatic numbering is commonly used on a list, for example numbering on the list of popular post widgets. However this time we will make automatic numbering on some blockquote in the post.
This is useful for bloggers who play words or quote like words of wisdom, love words, and others and use blockquote tags. For example, in his post shared 50 words of wisdom that each wise words use blockquote. So with this blockquote it has a numbering from 1 - 50 (as much blockquote used).
As in the following demo in JSFiddle::
Please save the following CSS styles above </head> code, for AMP blogs please just grab the CSS (which I mark) and save it in amp-custom style.
Then in the post add the tag class = "words" to each blockquote as follows.
That's the tips on how to make automatic numbering on some blockquote, hopefully with this article can be useful for all of us, thank you and good luck.
This is useful for bloggers who play words or quote like words of wisdom, love words, and others and use blockquote tags. For example, in his post shared 50 words of wisdom that each wise words use blockquote. So with this blockquote it has a numbering from 1 - 50 (as much blockquote used).
As in the following demo in JSFiddle::
Please save the following CSS styles above </head> code, for AMP blogs please just grab the CSS (which I mark) and save it in amp-custom style.
<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>
Then in the post add the tag class = "words" to each blockquote as follows.
<blockquote class="words">The words of wisdom are here</blockquote>
<br />
<blockquote class="words">The words of wisdom are here</blockquote>
<br />
<blockquote class="words">The words of wisdom are here</blockquote>
<br />
<blockquote class="words">The words of wisdom are here</blockquote>
<br />
<blockquote class="words">The words of wisdom are here</blockquote>
<br />
<blockquote class="words">The words of wisdom are here</blockquote>
<br />
<blockquote class="words">The words of wisdom are here</blockquote>
<br />
That's the tips on how to make automatic numbering on some blockquote, hopefully with this article can be useful for all of us, thank you and good luck.
Post a Comment for "How To Make Auto Numbering On Some Blockquote"
Provide comments relevant to the posted articles and provide critiques and suggestions for the progress of the blog