Now Reading
How to add blockquotes with auto number list to your Blogger blog

How to add blockquotes with auto number list to your Blogger blog

by AdminAugust 26, 2016

Not long ago, I showed you 14 great ways to stylize the standard Blogger Blockquote. Today I have a really interesting and exceptional blockquote for al of you who publish tutorials or similar articles on their blogs and websites.

bloggerActually, I am going to present two blockquotes: one is a list without numbers no number list, while the second one comes with automatic numbers and looks like your notebook diary.

The number list starts at #1 and ends at #112. Both of these blockquotes can be customized to suit your blog/web layout.

So let’s have a look at both versions:

Step by step adding blockquotes with auto number list to your Blogger blog

To add this blockquote to Blogger,please follow these simple steps:

1. Sign into Blogger, then goes to Template → Edit HTML.

2. Backup your template.

3. Search for .post blockquote and delete it along with all its occurrences. In most templates the codes look like this:

.post-body blockquote { line-height:1.3em; }
.post blockquote{ blah blah bla}

If you cannot find such code, you need not worry.

4. Now search for ]]></b:skin>.

5. Just above ]]></b:skin> , paste the following code:

blockquote {
background: #fff url( repeat-y;
margin: 0 20px;
padding: 0px 20px 5px 55px;
font: bold 0.9em “Comic Sans MS”, verdana;
line-height: 153%;
blockquote p {
margin: 0;


You can change the background of the number list by replacing the bolded image link in the code above with the image URL of one of the blockquote styles below.

Tip: Right click the links below each blockquote and choose Save Link As Or Copy Link Location, then add its image URL to the code above.

font: It includes font style, size, and type,respectively. Match the colours with the code above for reference. Font style can be bold, normal , italic or bold italic

color: This refers to text colour. You can choose a different font colour using a color chart.

6. Save your template.

Blockquote with Yellowish Number List & Dark Brown Background

blockquotezsa Blockquote with Greenish Number List & Dark Background


Blockquote with a soft touch

Step by step adding blockquotes without auto number list to your Blogger blog

To add this blockquote, simply follow the same steps as shared for the blockquote with auto number list. But for step #4 paste the following code instead:

blockquote {
background: #fff url( repeat-y ;
margin: 0 20px;
padding: 20px 20px 20px 55px;
font: bold 0.9em “Comic Sans MS“, verdana;
line-height: 155%
blockquote p {
margin: 0;

Here are three styles. Please host these pictures yourself, then replace the bold URL in the code above with the URL of your chosen image.


That’s all!

Good luck!

Please wait...
About The Author

Leave a Response