Hello Everyone! Welcome back to FreemiumTech Website. Hope you all are well. Today on this Article our tutorial is about How to add Stylish and Colourful Note Block or Note Box in any Blogger Template, Note Block (Notebox) is used to add important information, warning sentences or highlight sentences so that users can notice it easily and get aware of that.
What is Note Box ?
Note Block is a feature which is present default in some of the blogger the templates like iMagz, Median Ui, Fletro pro etc... Note Block is used to Highlight a Important information, Any warning sentence or Highlight Any important steps so that the users can read it more efficiently and better than the normal text. So, this is the main use of Note Block Feature.
But some of the blogger templates which have default Note Block Feature have same old look and many of the blogger themes doesn't have this Note Block Feature exist so, I have tried to make something new and gave a unique look to Note Block [Notebox] and this Notebox can be added in any Blogger template. So please read carefully full post to implement it in your blogger site .
Benifits of Note Block
- Can be added in any Blogger template
- New Unique and attractive look.
- Used to highlight Important Info, warning sentences or any important steps.
- Users can be more attracted and can read more efficiently than the normal text.
- Dynamic look for your site.
- Improve look of your site.
How to Add Stylish and Colourful Note Block or Note Box in any Blogger Template?
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On your Blogger Dashboard, click 'Theme'.
Step 3: Click on the arrow down icon next to 'customize' button.
Step 4: Click on Edit HTML, you will be redirected to editing page.
Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.
/*stylish note box by FreemiumTech 1*/
.FreemiumTech-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 )}.FreemiumTech-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}.FreemiumTech-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 FreemiumTech 2*/
.FreemiumTech-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)}.FreemiumTech-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}.FreemiumTech-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 FreemiumTech 3*/
.FreemiumTech-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)}.FreemiumTech-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}.FreemiumTech-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 FreemiumTech 4*/
.FreemiumTech-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%;}.FreemiumTech-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}.FreemiumTech-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 FreemiumTech 5*/
.FreemiumTech-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)}.FreemiumTech-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}.FreemiumTech-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 FreemiumTech 6*/
.FreemiumTech-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)}.FreemiumTech-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}.FreemiumTech-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}
I have mentioned the Names for CSS so use the same particular CSS if you are using only any one Note Block
Step 4: Now copy the following HTML Codes and paste it in your post or anywhere you wanna add this Note Block :-
Note: This a Stylish Note Box Demo 1
<p class="FreemiumTech-note1"><b>Note: This a Stylish Note Box Demo 1</b></p>
Note: This a Stylish Note Box Demo 2
<p class="FreemiumTech-note2"><b>Note: This a Stylish Note Box Demo 2</b></p>
Note: This a Stylish Note Box Demo 3
<p class="FreemiumTech-note3"><b>Note: This a Stylish Note Box Demo 3</b></p>
Note: This a Stylish Note Box Demo 4
<p class="FreemiumTech-note4"><b>Note: This a Stylish Note Box Demo 4</b></p>
Note: This a Stylish Note Box Demo 5
<p class="FreemiumTech-note5"><b>Note: This a Stylish Note Box Demo 5</b></p>
Note: This a Stylish Note Box Demo 6
<p class="FreemiumTech-note6"><b>Note: This a Stylish Note Box Demo 6</b></p>
Conclusion
In this article I have made a tutorial about How to Add Stylish Note Block or Note Box in any Blogger Template. These Stylish note block which are very Mobile responsive and attractive to drive the users attention. These stylish Note Box give a better look to your post. I Hope you have liked this article and if you like it so please don’t forget to share with your friends and follow our blog for more.
If you face any problems in code or have any questions please feel free to ask in comments section or join our Telegram Group for discussion.