How To Add Stylish Colorful NoteBox In Blogger Website - CreatorFaruk

How To Add Stylish Colorful NoteBox In Blogger Website - CreatorFaruk

Hello everyone, I'm Faruk 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. >

HTML

 /*stylish note box by CreatorFaruk 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 CreatorFaruk 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 CreatorFaruk 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 CreatorFaruk 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 CreatorFaruk 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 CreatorFaruk 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}

Note: This a Stylish Note Box Demo 1

<p class="CF-note1"><b>Note: This a Stylish Note Box Demo 1</b></p>

Note: This a Stylish Note Box Demo 2

<p class="CF-note2"><b>Note: This a Stylish Note Box Demo 2</b></p>

Note: This a Stylish Note Box Demo 3

<p class="CF-note3"><b>Note: This a Stylish Note Box Demo 3</b></p>

Note: This a Stylish Note Box Demo 4

<p class="CF-note4"><b>Note: This a Stylish Note Box Demo 4</b></p>

Note: This a Stylish Note Box Demo 5

<p class="CF-note5"><b>Note: This a Stylish Note Box Demo 5</b></p>

Note: This a Stylish Note Box Demo 6

<p class="CF-note6"><b>Note: This a Stylish Note Box Demo 6</b></p>

Note: I mentioned the name for the CSS so if you want to use only one note block, use a specific CSS

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.

Rate This Article

Go to Link

Thank You So Much How To Add Stylish Colorful NoteBox In Blogger Website - CreatorFaruk For Reading This Article.