How To Add Cool Note Boxes in Blogger Website

Hello My Friends, Today in this post I will tell about How To Add Cool Note Boxes in Blog Posts with Animation Effects. So read this post if you want to Cool Note Boxes in Blog Posts. So Let's Get Started.

This note box is usually found on blogs about tutorials, tips and tricks as well as some other interesting information. To create a note box on a blog, it is not difficult for blogger platform users, because with a little touch by adding HTML and CSS code, you can create a note column in blog articles.

This note box has 7 color options and icons that you can choose according to your taste, or you can even change it yourself as you wish.

If you are interested in installing a note box in a blog post, please follow these steps:

How to Add Cool Note Boxes in Blog Posts

Install Font Awesome

first install font awesome in your website. so copy the code provided code below and paste it below the <head> tag.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Adding Css

First, Go to Blogger.com.
Go to Theme/Template Section.
Now Click on Edit HTML option.
Now Search for the ]]></b:skin>tag.

To find anything in blogger theme section press Ctrl+F buttons and then type your term to find and press enter.

Copy the code provided below and paste it above the ]]></b:skin> tag.


.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)}}

Then to apply in post, create new entry / new post >> put this code in HTML tab (not Compose).

Note Box Version 1

Lorem ipsum dolor sit amet, elite adipiscing consectetur. Lorem ipsum dolor sit amet, elite adipiscing consectetur. Lorem ipsum dolor sit amet, elite adipiscing consectetur. Lorem ipsum dolor sit amet, elite adipiscing consectetur.


<div class="notes notes1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

Note Box Version 2


<div class="notes notes7">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

Note Box Version 3


<div class="notes notes3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

Conclusion —

ok so that's How To Add Cool Note Boxes in Blog Posts with Animation Effects. if you face any err or problem then write a comment for me in the comment section. hopefully it's useful and thank you for visiting.