Home
CSS

How to Add Note Block In Blogger (using CSS)

 In this article, I will share 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 than 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 it more visible to the users. It helps in boosting User engagement on your blog post. 

How to Add Note Block In Blogger

So, if you are using Fletro Pro theme than 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 than 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 noteblock style 1.

Here, how the final code will looks like. 

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

Note Block Style 2

This is the Note block comes with Fletro Pro 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 noteblock 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 tweeking 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 noteblock 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 noteblock style 4.

I hope this article help you add different style note block to your Blogger website. If you want to change the design futher like change the text color, background color etc than 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 future. By the way you can use the same CSS code in Wordpress also.

CLOSE ADS
CLOSE ADS