If you want to create a cool blog display so that blog visitors are happy with the appearance of your blog, then you have entered the right website.

Make an important note on the blog that allows the readers of the article to know the important message or note that you provide. So it is easy for readers to understand well the commands in the notes.

There are several ways to create a note box on a blog with a cool design. The way I give this time is to use the CSS code that you must place in your template.

How to add Text Box in Blogger post

The first thing you have to do is add the CSS code that I prepared below and follow the instructions below.

1. Open blogger dashboard

2. Go to Theme options.

3. Edit HTML

4. Press CTRL + F Keys to make searching easier.

5. Look for the code ]]></b:skin>

6. Copy the CSS below, then place it just above ]]></b:skin>

Note Box CSS

/* Note Box with Animated Icon */
.notes{position:relative;border-radius:4px;display:block;font-size:14px;margin:16px 0;padding:12px 24px 12px 60px} .notes:before{float:left;font-size:30px; font-family:FontAwesome;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;word-wrap:normal;margin-left:-46px;margin-top:3px}
.notes1:before{color:#21a796;content:'\f087';} .notes1{background:#cfffe6;color:#565656}
.notes2:before{color:#f95060;content:'\f088';} .notes2{background:#f9bfc5;color:#565656}
.notes3:before{color:#2387c1;content:'\f06a';} .notes3{background:#c8d9e2;color:#565656}
.notes4:before{color:#1aa687;content:'\f00c';} .notes4{background:#6dedd0;color:#565656}
.notes5:before{color:#f63a50;content:'\f00d';} .notes5{background:#fb818f;color:#fff}
.notes6:before{color:#f7871a;content:'\f10d';} .notes6{background:#f5b474;color:#fff}
.notes7:before{color:#969696;content:'\f0c1';} .notes7{background:#f5f68e;color:#565656}
/* Anamated Icon*/
.notes1:hover:before,.notes2:hover:before,.notes3:hover:before,.notes4:hover:before,.notes5:hover:before,.notes6:hover:before,.notes7:hover:before,.notes8:hover:before,.notes9:hover:before,.notes10:hover:before{-webkit-animation:ripple 0.65s linear;-moz-animation:ripple 0.65s linear;-ms-animation:ripple 0.65s linear;-o-animation:ripple 0.65s linear;animation:ripple 0.65s linear}@keyframes ripple{100%{opacity:0;transform:scale(2.5)}}

Before saving the theme, you first check in your template whether it has a font awesome code ? if it's not there, it's better if you install it first so you can display the icon in this note box.

Font-Awesome Code

<script crossorigin='anonymous' src='https://kit.fontawesome.com/e188a75150.js'/>

Put the font-awesome code just above </head> code.

How to Create Note Box in Blogger posts

To apply this text box or note box in your blog post, you have to place it in the HMTL view option, not compose view. The following is the arrangement of the code according to the CSS order above.

Note Box 1

How to create note box or text box in a Blogger post.

HTML Code :

<div class="notes notes1">Your Text Here</div>

Note Box 2

How to create note box or text box in Blogger post.

HTML Code :

<div class="notes notes2">Your Text Here</div>

Note Box 3

How to make note box or text box in Blogger post.

HTML Code :

<div class="notes notes1">Your Text Here</div>

Note Box 4

How to make note box or text box in Blogger post.

HTML Code :

<div class="notes notes4">Your Text Here</div>

Note Box 5

How to make note box or text box in Blogger post.

HTML Code :

<div class="notes notes1">Your Text Here</div>

Note Box 6

How to make note box or text box in Blogger post.

HTML Code :

<div class="notes notes6">Your Text Here</div>

Don't forget, replace all the words "Your Text Here" with your own sentences.

Such is the way to create a note city or text box in a blogger post. That way, blog visitors will easily understand the important notes that they must understand.

There is still a lot of note box CSS code for different versions and I will share it in the next post. For that, don't forget to subscribe by filling in your email in the news letter box below.

Tags: How to create Colored Text Box in blogger post, How to Create Cool Note Box on Blog (Blogger)