HOW TO CUSTOMIZE BLOCKQUOTE STYLE IN BLOGGER

If you have been looking for a way to change your blogger blog blockquote, you just arrived at the right place as this blogger tutorial will show you how you can customize your blog blockquote successfully. By tweaking blogger CSS style, we can change the look of the blockquote such as changing margin, background, colour, padding, etc..So, just follow the steps given below;

 
» Go to Layout >> Template >> Edit HTML
» 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 ” blockquote ” what you will edit should look like the codes above.

I have some designs below, so just replace the codes above with any design you like.

DESIGN 1:

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

DESIGN 2:

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

DESIGN 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; }

After implementing the codes correctly, Click SAVE and check result.

Enjoy !