How to add a note Block with different styles using pure CSS

Hello everyone Welcome here. Note Blocks are the elements that are more useful for your website articles it helps you to highlight a text that is important or needs to be noted and nowadays it is seen on several websites. If you're looking for a tutorial to implement it on your website then you're in the right place. In this tutorial, we are going to share the note Block design with a tutorial to implement it. So without wasting much time let's check how to implement it in your website.

How to add a note Block with different styles using pure CSS on a website?

• First of all, open your website's index.html file
• Then find </head> the tag and paste the following CSS just above  it

<style>/* Note Block (Teorzo) */.note{position:relative;padding:16px 20px 16px 50px; background:#e1f5fe;color:#3c4043; font-size:.85rem;font-family:inherit;line-height:1.6em;border-radius:10px;overflow:hidden}.note::before{content:'';width:60px;height:60px;background:#81b4dc;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.ln{background: transparent;border:1px solid #039dfc;color:#039dfc}.note.wr.ln{background:transparent;border:1px solid #ff2e54;color:#ff2e54}.note.wr{background:#ffdfdf;color:#48525c}.note.wr::before{background:#e65151}.note.wr::after{content:'\0021'}.note.by{content:'Teorzo'}</style>

Now choose any style and paste it on your page file or place where you need to show the note block

Style 1

Welcome to Teorzo!

<p class='note'>Your text here</p>

Style 2

Welcome to Teorzo!

<p class='note wr'>Your text here</p>

Style 3

Welcome to Teorzo!

<p class='note ln'>Your text here</p>

Style 4

Welcome to Teorzo!

<p class='note wr ln'>Your text here</p>

---

How to add a note Block with different styles using pure CSS in Blogger?

First of all, go to your Blogger dashboard

Then click on the Theme option from the sidebar 

Then click on the drop-down icon near Customize option 

Then click on the Edit HTML option from the drop-down menu 

Then Find ]]></b:skin> and paste the following CSS just above it or you can paste the following CSS just above </head> by creating <style></style> Tags

/* Note Block (Teorzo) */.note{position:relative;padding:16px 20px 16px 50px; background:#e1f5fe;color:#3c4043; font-size:.85rem;font-family:inherit;line-height:1.6em;border-radius:10px;overflow:hidden}.note::before{content:'';width:60px;height:60px;background:#81b4dc;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.ln{background: transparent;border:1px solid #039dfc;color:#039dfc}.note.wr.ln{background:transparent;border:1px solid #ff2e54;color:#ff2e54}.note.wr{background:#ffdfdf;color:#48525c}.note.wr::before{background:#e65151}.note.wr::after{content:'\0021'}.note.by{content:'Teorzo'}

Then click on the save icon to save the HTML

Now go to the post or page where you need to add a note Block and switch its view to HTML view and paste the code given below, you can choose any style

Style 1

Welcome to Teorzo!

<p class='note'>Your text here</p>

Style 2

Welcome to Teorzo!

<p class='note wr'>Your text here</p>

Style 3

Welcome to Teorzo!

<p class='note ln'>Your text here</p>

Style 4

Welcome to Teorzo!

<p class='note wr ln'>Your text here</p>

---

Conclusion

Hope this tutorial will help you to implement note Block in your Blogger website. Don't forget to share with your friends, If you have any doubts related to this tutorial ask me in the comment. Thanks for visiting, Have a nice day!