How to Edit the CSS Blockquote on Blogger Template?

Hi bloggy readers,
In order to strengthen our opinion in our blog, we usually used someone's words. And to let the readers know that the words we're using is from someone's opinion, we have to separate it by pressing the CSS blockquote function to make a quotation area on selected text.

In the standard mode of quotation provided by Blogger, it can only allow us to make the CSS blockquote to be placed on the center position without any particular style, that's why in this post, i want to let you know that now, we can modify the style of CSS blockquote in our blog article. Now look at the sentence below:

What makes blog become the best media to share our thoughts to the world?

By adding a new CSS blockquote for the quotation mode in our blog template, i can control the interface of the quotation mode. So, if you are interested on styling the quotation mode in your blog article, here are the steps you need to follow:

1. Log in to Blogger
To start this article, now head on to your Blogger account.

2. Go to Edit HTML
In the Dashboard page, pick your blog, and go to Layout/Design > Page Element > Edit HTML.

Anyway, you might want to save your current template to make a back up template of existing one.


3. Find the code
Now find the CSS blockquote that controls the appearance of quotation mark in your blog template. Press CTRL + F at the same time and find the CSS blockquote below:

4. Replace the code
Okay, after locating the code on number 4, now block that old CSS blockquote and replace it using the new CSS below:
As you can see in the code above, i've already marked the code that controls the interface of the quotation mode.

• The property color:#444 indicates the font color that will only be displayed when you are making a quotation. The value #444 can also be replace with another color value, for example #000000 for the black color.
• The property background:#F1F4F9 indicates the color of background when you are making a quot in your articles. The value #F1F4F9 can also be replace with another color value using HEX/RGB color chart, for example background:red.
• And the last property, border-left and border-right indicate the line border when you are making a quotation in your blog article.

5. Save the Change
By pressing the Save Template button, you can now save the template.

Okay, that's it for this tutorial to customize the CSS blockquote on Blogger. Are you having any trouble on applying this tutorial on your blog? Don't be shy, just leave your question on the comment section below. I'll try my best effort on helping you with your problem.

Good luck bloggy!