How to Apply Stylish Animation Notes Box in Blog Post

5/5 - (1 vote)

Hello friends, in today’s post, I am going to teach all of you in today’s post, how all of you can create animated notes box in your blog post with amazing effects, so you Everyone must read this post, if you like this post and all of you want to apply this type of animated cool note boxes in your blog posts, you will have to read this post. Let us start today’s post.

We have been seeing this type of notes box, and where news, tips and tricks are seen on other informative blogs. If you people want to create a notes box for your blog, then it is not a big deal nor is it a difficult task for blogger users, because here we just have to add some HTML and CSS code. , and you can create all note columns for your blog articles just by adding these two codes. 

This notes box has 7 color options and icons, if you want, you can keep the icon and color according to your wish, and you can change it according to your wish.

If you guys are interested to install this type of notes box in your blog post you have to follow the step given by me then let’s start.


Pre Advice! I am telling you earlier that all of you friends should take backup of your blogger theme because if there is any problem while editing in our theme, then with the help of your backup theme, it will be like original templates.


First of all, friends, to add the notes box, we have to install Font-Awesome in our website. All you have to do is copy the code given below and add it below the  <head>  tag.

            <link href="//" rel="stylesheet"></link>    


  1. First of all, we have to come to blogger and log in to its dashboard.
  2. Now you have to come to the themed section, you will see it in the bottom sidebar.
  3. Now you have come to the theme section, after that you will see  icon, you have to click on it and click on edit HTML.
  4. Now you will open Blogger theme edit HTML, now you have to click on theme templates and click on CTRL+F and search bar will come, you have to search there  ]]></b:skin>  and add add on it is.
.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}
.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)}}

Now if you want to see whether it has been applied or not, then for this you have to click on New Entry / New Post>>, after that you have to enter the code in HTML format,


Friends, I will tell you how to use the stylish note box in the post and how to use it, here I have given you seven types of notes box, you can use them, it will give a different look to your blog. , Due to which your blog will also look very beautiful, I will just tell you that you must use this stylish notes box.

              <div class="notes notes1">Note Box Version 1.</div>
              <div class="notes notes1">Note Box Version 2.</div>
              <div class="notes notes1">Note Box Version 3.</div>
              <div class="notes notes1">Note Box Version 4.</div>
              <div class="notes notes1">Note Box Version 5.</div>
              <div class="notes notes1">Note Box Version 6.</div>
              <div class="notes notes1">Note Box Version 7.</div>


So in today’s tutorial, I told you how to add animated cool notes box to your blog post. I hope this is useful for you guys. If you face any kind of error or problem, then you can comment us in the comment section, I hope it will be useful for you. Thank you for visiting.

One Request?

I worked hard on this post to help the blogging community. It would help me a lot if you consider sharing it on social media networks. Because Sharing Is Caring.. ♥️

Sharing Is Caring...

Hello! My name is Tech Shreyansh, and I'm a Youtuber and Content Creator from Azamgarh, India. I have a channel on YouTube called Tech Shreyansh where I upload Tech Video, Also I'm a Professional Web Developer or Designer. I enjoy playing with Codes and making Interesting Things.

Leave a comment