Hello everyone, Welcome to Themes away, 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?
- 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
Note box
<p class='note'>Your_text_here</p>Warning box
<p class='note wr'>Your_text_here</p>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!