Introduction
Welcome to my blog SR7Themes!
Today the topic is How to Add stylish note block in median ui
Hope this post might be useful to you and please stay tuned to our blog for further updates. Remember the end contains surprises!
How to add a Stylish Note Block [Notebox] in any Blogger Template, Note Block [Notebox] is Used to add important info, warning sentences or highlight sentences so that users can notice it easily and get aware of that.
What is Note Block ?
Pros 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 a Stylish Note Block [Notebox] in any Blogger Template?
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
/*stylish note box by SR7Themes 1*/
.TD-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 )}.TD-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}.TD-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 SR7Themes 2*/
.TD-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)}.TD-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}.TD-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 SR7Themes 3*/
.TD-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)}.TD-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}.TD-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 SR7Themes 4*/
.TD-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%;}.TD-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}.TD-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 SR7Themes 5*/
.TD-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)}.TD-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}.TD-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 SR7Themes 6*/
.TD-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)}.TD-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}.TD-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="TD-note1"><b>Note: This a Stylish Note Box Demo 1</b></p>
Note: This a Stylish Note Box Demo 2
<p class="TD-note2"><b>Note: This a Stylish Note Box Demo 2</b></p>
Note: This a Stylish Note Box Demo 3
<p class="TD-note3"><b>Note: This a Stylish Note Box Demo 3</b></p>
Note: This a Stylish Note Box Demo 4
<p class="TD-note4"><b>Note: This a Stylish Note Box Demo 4</b></p>
Note: This a Stylish Note Box Demo 5
<p class="TD-note5"><b>Note: This a Stylish Note Box Demo 5</b></p>
Conclusion
I expressed my views on the topic 'How to Add stylish note block in median ui'. Hope you are furnished my opinion. The post mustn't be copied without prior permission by emailing or telegram.Source:
https://www.sr7themes.eu.org/2022/03/how-to-add-stylish-note-block-in-median.html