How to add Note, Warning box in Blogger

Hello everyone, Welcome to Shiva Technic World, Nowadays many websites have Note and Warning boxes include's Median UI, Fletro, iMagz, Lantro UI, Plus UI etc. You might be want to add note, and warning boxes to your Blog articles then this tutorial is for you, In this article, we are going to show you how to add note, and warning boxes in Blogger, By following this tutorial properly then you can easily add a note, warning box in your Blogger website, So without wasting much time let's check how to add Note, Alert box!

How to add Note, Warning box in Blogger?

Before doing these steps we recommend you to take a backup of your theme, By chance, if any mistake has been made you can restore it later!

• First, go to your Blogger dashboard
• Then go to the Theme section
• Then click on the drop-down icon near Customize option
• Then click on the Edit HTML option
• Then find and ]]></b:skin> paste this CSS just above it

/* Note, Warning Box */ .note{position:relative;padding:16px 20px 16px 50px; background:#F3E5F5;color:#3c4043; font-size:.85rem;line-height:1.6em;border-radius:10px;overflow:hidden} .note::before{content:'';width:60px;height:60px;background:rgba(0,0,0,.15);display:block;border-radius:50%;position:absolute;top:-12px;left:-12px;opacity:.1} .note::after{content:'\002A';position:absolute;left:18px;top:16px; font-size:20px; min-width:15px;text-align:center} .note.wr{background:#ffdfdf;color:#48525c} .note.wr::before{background:#e65151} .note.wr::after{content:'\0021'}

Then Save HTML

Then go to the Posts section

Then make sure you changed Compose view to the HTML view

Then paste the below HTML code to that post where you want to add a note or warning box

We gave you two HTML codes one is for a note box and one is for a warning box, you can use any of that you want.

Note box

<p class='note'>Your_text_here</p>

Warning box

<p class='note wr'>Your_text_here</p>

Don't forget to add your text in Your_text_here section!

Then click on Publish to save and publish the post

Want to see how it looks?

View demo

Conclusion

Hope you successfully installed the Note, Warning box on your Blogger website, If you have any doubts related to this article ask me in the Comment, Do share with your friends, Thanks for visiting, Have a nice day!