How to Make a Blackquote With Fold Paper Style on Blogger NQnia
When writing articles on a blog sometimes there is a sentence or writing that is very important that needs to be blocked with quotes that are available by default on the blogger platform, but for some bloggers in particular I personally feel the blockquote that is already on the blogger is too simple and the style seems boring to look at .
Blockquote serves to clarify that there are words or sentences that become an important point in an article, we can also use to enhance the appearance of the blog.
What is Blackquote?
Blockquote is a mechanism to mark a block of text quoted from people or other sources, blockquote is also commonly used to mark scripts such as HTML, CSS, Javascript or other syntax on blogs that contain tutorial content, examples of blogs that use a lot of this blockquote.
How to Make a Blackquote With Fold Paper Style on Blogger NQNia
- 1. Please login to blogger.com using your Gmail.
- 2. Enter the Theme menu >> Click Edit HTML
- 3. Look for the following code ]]></b:skin> or </style> and paste the code below exactly above the code.
/* CSS Note by Showdzgn.com*/
.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.blue{background:#3498db}
.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.yellow:before{border-color:#fff #fff #f1c40f #f1c40f;background:#f1c40f}
.note.red:before{border-color:#fff #fff #e74c3c #e74c3c;background:#e74c3c}
.note.blue:before{border-color:#fff #fff #3498db #3498db;background:#3498db}
- 4. If you have already click SAVE and Done.
How to apply this blackquote. Furthermore, for application to posts on the blog see below the code and copy the post with HTML mode instead of Compose .
Green Note Box
<div class='note'>Green Note Box</div>
Yellow Note Box
<div class='note yellow'>Yellow Note Box</div>
Red Note Box
<div class='note red'>Red Note Box</div>
Blue Note Box
<div class='note blue'>Blue Note Box</div>