How to Add Note Block in Blogger using CSS

Hi to all, here I am going to tell you all about how to add note block in any blogger template by using CSS easily in just few minutes without any error.

Read the below provided steps carefully and completely, if you miss any one step then you will get error while saving the code in the theme editor.

Steps to Add Note Block in Blogger Website

Step-1: First of all you need to login to your blogger website dashboard by using your login credentials.

Step-2: Click on Theme -> Click on Arrow Icon -> Click on Backup -> Click on Download Theme.

Step-3: Click on Theme -> Click on Arrow Icon -> Click on Edit HTML -> Theme Editor.

Step-4: click on blank area in the theme editor and enter ]]></b:skin> or </style>.

Step-5: You can copy the CSS code from the below given note block styles and add it to your blogger website.

Step-6: Paste the copied CSS code above the ]]></b:skin> or </style> tag.

Step-7: Now click on save button.

Step-8: Now open any one post where you need to add note block.

Step-9: Now you need to switch compose view to HTML view.

Step-10: You need to add a class in between the tags as shown below.

<p class="note">Welcome to our website</p>

Step-11: Now click on Update button.

Step-12: Now you have successfully added note block in your blogger website easily in just few minutes.

Below are some of the Note Block styles:

Note block -1

This is the Note block 1. Use the code below to use it on your own theme.

article .note1{position:relative;padding:20px 30px 20px 50px;background-color:#e1f5fe;color:#01579b;font-size:1rem;font-family:var(--font-body);line-height:1.62em;border-radius:2px} article .note1:before{content:'\2605';position:absolute;left:18px;font-size:20px} @media screen and (max-width: 640px){ article .note1 {width: calc(100% + 40px);left: -20px;font-size: 1rem;border-radius: 0;}}
Copy

Here you can use class="note1" to apply the note block in your post.

So demo code is <p class="note1"> Add Your Text Here </p>

Note block -2

This is the Note block 2. Use the code below to use it on your own theme.

.note2 {position: relative;padding: 16px 20px 16px 50px;background: #262d3d;color: #ffffff;font-size: 1rem;line-height: 1.6em;border-radius: 5px;overflow: hidden;} .note2::before {content: '';width: 30px;height: 30px;background: #fefefe;display: block;border-radius: 50%;position: absolute;top: 16px;left: 13px;opacity: .2;} .note2::after {content: '\1F39C';position: absolute;left: 18px;top: 16px;font-size: 20px;min-width: 15px;text-align: center;}
Copy

Here you can use class="note2" to apply the note block in your post.

So demo code is <p class="note2"> Add Your Text Here </p>

Note block -3

This is the Note block 3. Use the code below to use it on your own theme.

.note3 {position: relative;padding: 16px 20px 16px 50px;background: #e5e5e5;color:black;font-size: 1rem; font-weight:600; line-height: 1.6em;border-radius: 5px;overflow: hidden;} .note3::before {content: '';width: 30px;height: 30px;background: #ffd800;display: block;border-radius: 50%;position: absolute;top: 15px;left: 8px;opacity: .8;} .note3::after {content: '\003F';position: absolute;left: 15px;top: 16px;font-size: 20px;min-width: 15px;text-align: center;}
Copy

Here you can use class="note3" to apply the note block in your post.

So demo code is <p class="note3"> Add Your Text Here </p>

Note block - 4

This is the Note block 4. Use the code below to use it on your own theme.

.note4{position:relative;padding:20px 30px 20px 50px;background-color:#e1f5fe;color:#01579b;font-size:1rem;font-family:var(--font-body);line-height:1.62em;border-radius:2px} .note4:before{content:'\2605';position:absolute;left:18px;font-size:20px} @media screen and (max-width: 640px){ .note4 {width: calc(100% + 40px);left: -20px;font-size: 1rem;border-radius: 0;}}
Copy

Here you can use class="note4" to apply the note block in your post

So  demo code is >p class="note4"> Add Your text Here</p>

Note:

If you get any error while saving the CSS code, then you need to restore backup code again and repeat the same process as above mentioned.

To add the note block in any post, you need to add a class i.e. class="note", don't forget to add the class in the tags as shown in step-10.

If you forget to add class based on your selected style then you can't see note block.

You can change the color, width and style of the note block by changing the CSS code or else you can use the same code.

Conclusion

I hope that you have understood about how to add note block in any blogger website easily in just few minutes.