We are making major changes to this site. Reach us if you are facing any issue by clicking on Report. Contact US!

How to Apply Stylish Animation Notes Box in Blog Post

Please wait 30 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

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.

Table of Contents

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.

How to add animates notes box in blog post?

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.

Install Font Awesome

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="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>

how to add css code in blogger

  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.
  5. Friends, as we search for any code to edit in blogger templates, if you want to find any code, then you just have to do CTRL + F and your blogger templates search bar will come, whatever term you want to search, put it in it. And give a the result on the code that you have searched.

       <!-- Cool Note Boxes Script By techyshreyansh.com -->
.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,

Stylish Note Box About

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.

© Tech Shreyansh

About the Author

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 Programming Videos. Also I'm A Professional Web Developer Or Designer. I Enjoy Pl…

Post a Comment

Want a Help Reagarding Website Design and Help from our WebSite? Submit a request below:
  Contact Us
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.