Surely you have seen an important article on Blockquote, right? Well, this time Zishu will share How to Make a Cool Folded Paper Blockquote on a Blog.

Apart from giving a very nice and pretty appearance to this blockquote, there are several color variations from red, yellow, green and blue, okay, let's go straight to how to make it.

How to Make a Cool Folded Paper Blockquote on a Blog

1. Open an Account Blogger.
2. Select Theme Dashboard > Edit Theme.
3. Then you look for the code ]]></b:skin> to simplify the search you can use CTRL + F then type ]]></b:skin>, then you copy and paste this code right above the code ]]></b:skin>.

>/* CSS Blockquote AE */
.note{position:relative;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden}
.note.yellow{background:#f1c40f}
.note.red{background:#e74c3c}
.note:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #27ae60 #27ae60;background:#27ae60;box-shadow:0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);display:block;width:0}
.note.blue{background:#3498db}
.note.yellow:before{border-color:#fff #fff #f1c40f #f1c40f;background:#f1c40f}
.note.blue:before{border-color:#fff #fff #3498db #3498db;background:#3498db}
.note.red:before{border-color:#fff #fff #e74c3c #e74c3c;background:#e74c3c}

4. Then your final step save theme.

Here's how to apply the Blockquote code so this code consists of 4 colors, okay, let's go straight to how to apply it, let's look at the code below.

Blue Color Blockquote

<div class='note blue'>Blue Color Note Box</div>

Green Color Blockquote

<div class='note green'>Green Color quote</div>

Yellow ColorBlockquote

<div class='note yellow'> Yellow  Color Blockquote</div>

Red Color Blockquote

<div class='note red'>Red Color Blockquote</div>

Okay, how easy is it, right? Thanks for visiting and don't forget to vote and don't forget to share.