Want more tutorials? Request!
Home
Blogger Tips & Tricks
Blogger Widgets

How to Add stylish note block in median ui

How to Add stylish note block in median ui by SR7Themes.eu.org

In this post I made a step by tutorial on How to add a Stylish Note Block [Notebox] in any Blogger Template, which you can use in any blogger template





Hello Everyone! Welcome back to SR7Themes, Today on this occasion our tutorial is 

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 ?

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 full post to implement in your blogger site .

Pros of Note Block

  1. Can be added in any Blogger template 
  2. New Unique and attractive look
  3. Used to highlight Important Info, warning sentences or any important steps 
  4. Users can be more attracted and can read more efficiently than the normal text
  5. Dynamic look for your site
  6. Improve look of your site
Let's Begin

Demo

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>

About the Author

Hey there! My name is Saim Rahmani aka Saim, a professional Web Designer, Graphic Designer, UI / Blogger as well as Content Creator. I love to Code

Buy Me A Coffee
#Blogger Tips & Tricks #Blogger Widgets #Median Ui

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.