Sunday, May 10, 2020
Previously I have shared how to make a blockquote with the icon next to it, but on this occasion I will share how to make a simple and fast note box on a blog post.
Actually the quote box feature is already in our blog post, but I will share this note box with a colorful display, simple but interesting and nice to look at and not boring to see because it has a variety of colors.
The use of colored notes on this blog is very useful in my opinion, so that readers can find out the important points that should not be missed to read there are the contents of the articles we make.
How to Make Various Color Note Boxes in Blog Posts
1. Open Blog > select Theme > then Edit > HTML
2. Place this code directly above the code ]]></b:skin> or </style>
/* Note Box Color */ .note-yellow{background:#f8cf82;color:#000;font-size:15px;position:relative;padding:1.2em 1.5em;margin:1em auto;overflow:hidden;text-align:left;word-spacing:0} .note-blue{background:#7eaecf;color:#000;font-size:15px;position:relative;padding:1.2em 1.5em;margin:1em auto;overflow:hidden;text-align:left;word-spacing:0} .note-green{background:#5dc698;color:#000;font-size:15px;position:relative;padding:1.2em 1.5em;margin:1em auto;overflow:hidden;text-align:left;word-spacing:0} .note-red{background:#fb7073;color:#000;font-size:15px;position:relative;padding:1.2em 1.5em;margin:1em auto;overflow:hidden;text-align:left;word-spacing:0}
3. Then select Save Theme
4. To apply it in your post > create New Post > choose HTML Edit (not compose) > then place this codes in it.
For Note Box Yellow
WRITE-YOU-NOTES-HERE
<div class='note-yellow'>WRITE-YOU-NOTES-HERE</div>
For Note Box Warna Blue
WRITE-YOU-NOTES-HERE
<div class='note-blue'>WRITE-YOU-NOTES-HERE</div>
For Note Box Green
WRITE-YOU-NOTES-HERE
<div class='note-green'>WRITE-YOU-NOTES-HERE</div>
For Note Box Red
WRITE-YOU-NOTES-HERE
<div class='note-red'>WRITE-YOU-NOTES-HERE</div>
That's all my explanation about how to make a color Note Box in a blog post.