How To Add Stylish Note Box in Blogger Website

Hey Guys, Today in this Post I am going to share a tutorial on How To Add Stylish Not Box in Blogger Website. When you write your blog post, you can use the in note box in your blogger website to show an important paragraph or a special note.

If you write any kind of tutorial on your blogger website or blog, then you will always have to note something in your article, that is, you have to show some important lines in front of the users in some stylish form so that users can easily see those important lines. be able to read.

So if you want to add this custom note box to your blogger website or blog, then you must read this post completely.

How To Install Stylish Note Box in Blogger?

Step 1 :- First of All, You Need To Go on Blogger.com

Step 2 :- Then Login With Your Blogger Account.

Step 3 :- Then Click on Theme Menu.

Step 4 :- After That Click on Edit HTML.

Step 5 :- Then Copy The Code Provided Below And Paste it Above the </head> Tag.

<style type='text/css'>
.note {
    position: relative;
    padding: 20px 20px 20px 50px;
    background: #e1f5fe;
    color: #01579b;
    font-size: .85rem;
    font-family: var(--fontB);
    line-height: 1.6em;
    border-radius: 10px;
    overflow: hidden;
}
.note:before {
    content: '';
    width: 60px;
    height: 60px;
    background: #01579b;
    display: block;
    border-radius: 50%;
    position: absolute;
    top: -8px;
    left: -12px;
    opacity: .05;
}
.note:after {
    content: '\002A';
    position: absolute;
    left: 18px;
    top: 20px;
    font-size: 22px;
    min-width: 15px;
    text-align: center;
}
.noteAlert {
    background: #ffdfdf;
    color: #48525c;
}
.noteAlert:before {
    background: #e65151;
    opacity: .1;
}
.noteAlert:after {
    content: '\0021';
}
</style>  

Step 5 :-Then Don't Forget To Click on Save Button.

How To Use Stylish Note Box in Blogger Post?

Step 1 :- Now Go To Your Posts Section To Create a New Post.

Step 2 :- Then Create a New Post.

Add Your Post Title And Description According To Your Choice.

Step 3 :- Then Click on HTML View.

Step 4 :- After That Copy the Code Given Below And Paste it in HTML View.

Style-1! Note Box. Use The Code Given Below.

<p class="note">Lorem ipsum is placeholder text commonly used in the graphic, print</p>

Style-2! Note Box. Use The Code Given Below.

<p class="note noteAlert">Lorem ipsum is placeholder text commonly used in the graphic, print.</p>

Step 5 :- After That Don't Forget to Publish Your Post.

All Source Code

<p class="note">Lorem ipsum is placeholder text commonly used in the graphic, print</p>
<p class="note noteAlert">Lorem ipsum is placeholder text commonly used in the graphic, print.</p>

<style type='text/css'>
.note {
    position: relative;
    padding: 20px 20px 20px 50px;
    background: #e1f5fe;
    color: #01579b;
    font-size: .85rem;
    font-family: var(--fontB);
    line-height: 1.6em;
    border-radius: 10px;
    overflow: hidden;
}
.note:before {
    content: '';
    width: 60px;
    height: 60px;
    background: #01579b;
    display: block;
    border-radius: 50%;
    position: absolute;
    top: -8px;
    left: -12px;
    opacity: .05;
}
.note:after {
    content: '\002A';
    position: absolute;
    left: 18px;
    top: 20px;
    font-size: 22px;
    min-width: 15px;
    text-align: center;
}
.noteAlert {
    background: #ffdfdf;
    color: #48525c;
}
.noteAlert:before {
    background: #e65151;
    opacity: .1;
}
.noteAlert:after {
    content: '\0021';
}
</style>  

JS is not available

Conclusion

Well that's great tutorial on How To Add Stylish Note Box in Blogger Website. If you have any other question related to this post then you can tell by commenting. How did you like this post, you can tell us by commenting.

Getting Info...