How to customize blockquote style

In this tutorial, I will show you how to customize blockquote style in blogger. I will do all of these changes in CSS style. By using CSS, we can change the look of the blockquote such as changing margin, background, colour, padding, etc..So, you just need to follow the steps below:

1. Go to Layout >> Template >> Download full template >> Click on Expand Widget Template
2. Press Ctrl + F, search for " .post blockquote ", you will see something like this:

.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

If you use custom template, and cannot find it, search for " .entry blockquote " ; it looks very similar with the codes above.

I have a few examples, so just replace the codes in Step 2 with the code in each example

EXAMPLE 1:

.post blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; }

.post blockquote p {
margin: 0; }

EXAMPLE 2:

.post blockquote {
margin: 1em 20px;
padding-left: 50px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNyJ7KaCHUS1KsWjj0UeD0359PmtfB9-fTMkWq4ZbpGksE1V9kV8wigbCT8kx66iD2FVvQa7TXj8fGg0XMd3Iyn-cVeAYm1aeNDhatFitC7Jfg9ZeTixEs8XOtF1YCQMlE3yjPYo9dKCDN/s1600/Next-icon.png) no-repeat; }

EXAMPLE 3:

.post blockquote {
margin: 1em 2em;
border-left: 1px dashed #999;
padding-left: 1em; }

.post blockquote p:first-letter {
float: left;
margin: .2em .3em .1em 0;
font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
font-size: 220%;
font-weight: bold; }

.post blockquote p:first-line {
font-variant: small-caps; }

EXAMPLE 4:

.post blockquote {
background: #ffffff url(http://i44.tinypic.com/slh4yu.jpg);
background-repeat:no-repeat;
background-position:top center;
margin: 6px 6px 6px 6px;
padding: 8px 36px 8px 40px;
font-size: 14px;
line-height:1.4em;
}

4. Click SAVE and check result. If you don't know how to add a blockquote to your post you can see How to make a blockquote

Enjoy !