How to Add Note Block In Blogger (using CSS)

 In this article, I will share with you the codes to add different Note block to your Blogger website. You just need to add some CSS code in your theme code and then add the class in the html element to make it a note block. 

By adding a note block in Blogger, you can highlight important points and make them more visible to the users. It helps in boosting User engagement on your blog post. 

So, if you are using Fletro Pro theme then there is already added the CSS code on your theme. You just need to add the CSS class only. But, if you are using any other theme then add the CSS code in your theme to use these note blocks. 

Note Block Style -1

This is a sample Note block 1 that you can use in your Blogger website. Just use the CSS code given below. 

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;}}

Here use the class="note1" to apply the note block style 1.

Here, is how the final code will look like. 

<p class="note1">Add your text Here </p>

Note Block Style 2

This is the Note block that comes with Fletro Pro's latest version. Use the code below to use it on your own theme.

.note2 {position: relative; padding: 16px 20px 16px 50px;background: #e1f5fe;color: #3c4043;font-size: .95rem;font-family: inherit;line-height: 1.6em;border-radius: 10px;overflow: hidden;}
.note2::before {content: '';width: 60px;height: 60px;background: #81b4dc;display: block;border-radius: 50%;position: absolute;top: -12px;left: -12px;opacity: .1;}
.note2::after {content: '\002A';position: absolute;left: 18px;top: 16px;font-size: 20px;min-width: 15px;text-align: center;}

Here use the class="note2" to apply the note block style 2.

Note Block Style 3

This is the third Note Block Designed by us. You can use it on your Music/Lyrics sites. Tell me your Feedback. You can design any note block by tweaking some CSS code.

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

Here use the class="note3" to apply the note block style 3.

Note Block Style 4

This is the fourth Note Block. You can display any questions in your blog by using this CSS block.

.note4 {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;}
.note4::before {content: '';width: 30px;height: 30px;background: #ffd800;display: block;border-radius: 50%;position: absolute;top: 15px;left: 8px;opacity: .8;}
.note4::after {content: '\003F';position: absolute;left: 15px;top: 16px;font-size: 20px;min-width: 15px;text-align: center;}

Here use the class="note4" to apply the note block style 4.

I hope this article helps you add different style note blocks to your Blogger website. If you want to change the design further like changing the text color, background color, etc then just change the value in the CSS code.

You can watch more tutorials like this on our Blogger customization Playlist in YouTube.

I will try to keep adding more note Block styles in the future. By the way, you can use the same CSS code in Wordpress also.