How To Add Stylish Colorful NoteBox In Blogger Website Taosin Blog

Hello everyone, I'm Taosin Ahmed. In moment's tutorial I'll tell you How to Add a Stylish Note Block( Notebox) to any Blogger Template, Note Block( Notebox) is used to add important information, advising rulings or highlight rulings so that druggies can fluently notice and be apprehensive of it.

What's Note Block?

Note block is a point that's presently dereliction in some blogger templates like iMagz, Median Ui, Plus Ui, Fletro pro etc. Note block is used to punctuate an important information, any warning judgment or any important step so that druggies can read it more efficiently and better than plain textbook. So, this is the main use of note block point.

But some blogger templates which have dereliction note block point are same old look and numerous blogger themes do not have this note block point so, I came up with numerous intriguing notes adding tutorial for everyone to use in any theme. This notebox can be added to any blogger template. So read the full post to apply it on your blogger point. also you can fluently understand how to add notebox to your website.

Advantages of note block

Can be added to any blogger template
New unique and attractive look
Used to highlight important information, warning sentences or any important step
Users can be more engaged and read more efficiently than plain text
Dynamic look for your site
Improve the appearance of your site

So let's get started.

Step 1: Login to your Blogger Dashboard

Step 2: Go to Themes and click on the dropdown menu and choose Edit HTML

Step 3: Now search for ]]></b:skin> and paste the given below CSS just above to it. >

-------------- How to Make Cool Note Boxes in Blog Posts ---------------

/* Note Boxes with Animation Icon */
.notes{position:relative;border-radius:4px;display:block;font-size:14px;margin:16px 0;padding:12px 24px 12px 60px} .notes:before{float:left;font-size:30px; font-family:FontAwesome;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;word-wrap:normal;margin-left:-46px;}
.notes1:before{color:#21a796;content:'\2600';} .notes1{background:#cfffe6;color:#565656}
.notes2:before{color:#f95060;content:'\2600';} .notes2{background:#f9bfc5;color:#565656}
.notes3:before{color:#2387c1;content:'\2600';} .notes3{background:#c8d9e2;color:#565656}
.notes4:before{color:#1aa687;content:'\2600';} .notes4{background:#6dedd0;color:#565656}
.notes5:before{color:#f63a50;content:'\2600';} .notes5{background:#fb818f;color:#fff}
.notes6:before{color:#f7871a;content:'\2600';} .notes6{background:#f5b474;color:#fff}
.notes7:before{color:#969696;content:'\2600';} .notes7{background:#f5f68e;color:#565656}
.notes1:hover:before,.notes2:hover:before,.notes3:hover:before,.notes4:hover:before,.notes5:hover:before,.notes6:hover:before,.notes7:hover:before,.notes8:hover:before,.notes9:hover:before,.notes10:hover:before{-webkit-animation:ripple 0.65s linear;-moz-animation:ripple 0.65s linear;-ms-animation:ripple 0.65s linear;-o-animation:ripple 0.65s linear;animation:ripple 0.65s linear}@keyframes ripple{100%{opacity:0;transform:scale(2.5)}}

----------------------
<div class="notes notes1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="notes notes2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="notes notes3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="notes notes4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="notes notes5">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="notes notes6">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="notes notes7">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

/*stylish note box by Taosin Blog 1*/ .CF-note1{position:relative!important;padding:20px 20px 20px 50px!important;color:#fff!important;font-size:.85rem!important;font-family:var(--fontB)!important;line-height:1.6em!important;border-radius:10px!important;overflow:hidden!important;background:linear-gradient(110deg,#fdcd3b,#ffed4b )}.CF-note1:before{content:''!important;width:60px!important;height:60px!important;background:#01579b!important;display:block!important;border-radius:50%!important;position:absolute!important;top:-8px!important;left:-12px!important;opacity:.05!important}.CF-note1:after{content:'\002A'!important;position:absolute!important;left:18px!important;top:20px!important;font-size:22px!important;min-width:15px!important;text-align:center!important} 



/*stylish note box by Taosin Blog 2*/ .CF-note2{position:relative!important;padding:20px 20px 20px 50px!important;color:#fff!important;font-size:.85rem!important;font-family:var(--fontB)!important;line-height:1.6em!important;border-radius:10px!important;overflow:hidden!important;background:linear-gradient(to right,#ff6464,#5ac8fa)}.CF-note2:before{content:''!important;width:60px!important;height:60px!important;background:#01579b!important;display:block!important;border-radius:50%!important;position:absolute!important;top:-8px!important;left:-12px!important;opacity:.05!important}.CF-note2:after{content:'\002A'!important;position:absolute!important;left:18px!important;top:20px!important;font-size:22px!important;min-width:15px!important;text-align:center!important} 



/*stylish note box by Taosin Blog 3*/ .CF-note3{position:relative!important;padding:20px 20px 20px 50px!important;color:#fff!important;font-size:.85rem!important;font-family:var(--fontB)!important;line-height:1.6em!important;border-radius:10px!important;overflow:hidden!important;color:#fff;background:linear-gradient(110deg,#000,rgba(0,0,0,0) 33%),linear-gradient(110deg,#dd0000,#ffc608)}.CF-note3:before{content:''!important;width:60px!important;height:60px!important;background:#01579b!important;display:block!important;border-radius:50%!important;position:absolute!important;top:-8px!important;left:-12px!important;opacity:.05!important}.CF-note3:after{content:'\002A'!important;position:absolute!important;left:18px!important;top:20px!important;font-size:22px!important;min-width:15px!important;text-align:center!important} 



/*stylish note box by Taosin Blog 4*/ .CF-note4{position:relative!important;padding:20px 20px 20px 50px!important;color:#fff!important;font-size:.85rem!important;font-family:var(--fontB)!important;line-height:1.6em!important;border-radius:10px!important;overflow:hidden!important;color:#fff;background:linear-gradient(-70deg,#fa7c30,rgba(0,0,0,0)),url('https://www.nasa.gov/sites/default/files/thumbnails/image/pia21421-cr.jpg');background-size:cover;background-position:50% 21%;}.CF-note4:before{content:''!important;width:60px!important;height:60px!important;background:#01579b!important;display:block!important;border-radius:50%!important;position:absolute!important;top:-8px!important;left:-12px!important;opacity:.05!important}.CF-note4:after{content:'\002A'!important;position:absolute!important;left:18px!important;top:20px!important;font-size:22px!important;min-width:15px!important;text-align:center!important} 



/*stylish note box by Taosin Blog 5*/ .CF-note5{position:relative!important;padding:20px 20px 20px 50px!important;color:#fff!important;font-size:.85rem!important;font-family:var(--fontB)!important;line-height:1.6em!important;border-radius:10px!important;overflow:hidden!important;color:#fff;background:linear-gradient(110deg,#a60af3,#7a00cc,#c03fff,rgba(0,0,0,0)),radial-gradient(farthest-corner at 0% 0%,#5EC6F7,#5EC6F7)}.CF-note5:before{content:''!important;width:60px!important;height:60px!important;background:#01579b!important;display:block!important;border-radius:50%!important;position:absolute!important;top:-8px!important;left:-12px!important;opacity:.05!important}.CF-note5:after{content:'\002A'!important;position:absolute!important;left:18px!important;top:20px!important;font-size:22px!important;min-width:15px!important;text-align:center!important} 



/*stylish note box by Taosin Blog 6*/ .CF-note6{position:relative!important;padding:20px 20px 20px 50px!important;color:#fff!important;font-size:.85rem!important;font-family:var(--fontB)!important;line-height:1.6em!important;border-radius:10px!important;overflow:hidden!important;background:linear-gradient(70deg,#fff810,rgba(0,0,0,0) ),linear-gradient(30deg,#63e89e,#ff7ee3)}.CF-note6:before{content:''!important;width:60px!important;height:60px!important;background:#01579b!important;display:block!important;border-radius:50%!important;position:absolute!important;top:-8px!important;left:-12px!important;opacity:.05!important}.CF-note6:after{content:'\002A'!important;position:absolute!important;left:18px!important;top:20px!important;font-size:22px!important;min-width:15px!important;text-align:center!important}

Step 4: Now copy the following HTML codes and paste in your post or wherever you want to add this note block :

Conclusion

In this post I have created a step by step tutorial on how to add stylish note block [notebox] to any blogger template, which you can use to highlight an important information, any warning sentence or any important step in any blogger template. I hope you liked this post and please share with your friends and follow our blog for more.

Taosin Blog

How To Add Stylish Colorful NoteBox In Blogger Website Taosin Blog