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


    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!

    How was it?

    Hi, I am Shiva I am a student I like to learn new things and share them with others.


    1. Nice article. Kindly give me at partners page

      Name : Freeplay
      Logo : u can see here at
      1. Ok will soon add, Thanks for joining us!
    2. Tnx bro finaly i find it
      1. You're welcome 🙂👍
    How was it? let us know with a comment!

    Cookies Consent

    This website uses cookies to ensure you get the best experience on our website.

    Cookies Policy

    We employ the use of cookies. By accessing this website, you agreed to use cookies in agreement with this website's Privacy Policy.

    Most interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used by our website to enable the functionality of certain areas to make it easier for people visiting our website. Some of our affiliate/advertising partners may also use cookies.