Follow us to get updates regarding Latest posts Follow Now!

How to add Neumorphism Alert Boxes (Note block) in Blogger

In this article I have made a tutorial on How to add Neumorphism Alert Boxes (Note block) in Blogger. Which you can use in your Blog t

In this article I have made a tutorial on How to add Neumorphism Alert Boxes (Note block) in Blogger. Which you can use in your Blog

how-to-add-neumorphism-alert-boxes-note-block-in-blogger-


Hello Everyone! Welcome back to Techy DarshaN. Today on this occasion our tutorial is How to add Neumorphism Alert Boxes (Note boxes) in Blogger. We all aleady know that Alert Boxes [Note box or Note Block] are Used to add important info, warning sentences or highlight sentences so that users can notice it easily and get aware of that.

In my previous post I made a tutorial on  How to add a Stylish Note Block [Notebox] in any Blogger Template Check it out if you haven't yet!

What is Note Block (Alert 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 full post to implement in your blogger site .

Pros of Note Block

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

Demo

How to add Neumorphism Alert Boxes (Note block) in Blogger?


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.

 
 /* Neumorphism Alert Boxes by Techy Darshan */
.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}
.fa-bell:before{content:"\f0f3"}
.fa-exclamation-circle:before{content:"\f06a"}
.fa-fire:before{content:"\f06d"}
.fa-thumbs-up:before{content:"\f164"}
.far{font-weight:400}
.far,.fas{font-family:"Font Awesome 5 Free"}
.fas{font-weight:900}
.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
.alert{position:relative;padding:1rem 1.5rem;margin-bottom:1rem;border:0.0625rem solid transparent;border-radius:0.55rem}
.alert-heading{color:inherit}
.alert-link{font-weight:600}
.alert-secondary{color:#2c46b0;background-color:#3c59cb;border-color:#2c49bc}
.alert-secondary .alert-link{color:#223687}
.alert-success{color:#1a5a47;background-color:#296e58;border-color:#195e49}
.alert-success .alert-link{color:#0f3228}
.alert-info{color:#064f9f;background-color:#1362b8;border-color:#0352a9}
.alert-info .alert-link{color:#04376e}
.alert-danger{color:#94202d;background-color:#ae2f3c;border-color:#9f1f2d}
.alert-danger .alert-link{color:#6a1720}
.bg-primary{background-color:#e6e7ee!important}
[class*="shadow"]{transition:all 0.2s ease}
.shadow-soft{box-shadow:6px 6px 12px #b8b9be,-6px -6px 12px #fff!important}
.alert{padding:1rem 1.5rem;border:#44476a;font-size:0.875rem;border:0.0625rem solid #d1d9e6}
.alert .alert-inner--icon{font-size:1.25rem;margin-right:0.375rem}
.alert .alert-inner--text{display:inline-block}
.alert .alert-inner--text a{font-weight:600}
.alert-heading{font-weight:600;font-size:1.5rem}
.alert-secondary{background:#e6e7ee;color:#2d4cc8}
.alert-success{background:#e6e7ee;color:#18634b}
.alert-info{background:#e6e7ee;color:#0056b3}
.alert-danger{background:#e6e7ee;color:#a91e2c}
Step 6: Make sure you have installed Font Awesome CDN on your blog if not then paste the following codes just below <head> Tag. if you already installed Font Awesome CDN  just ignore this step.
<link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" rel="stylesheet"><link/>

Step 7: Add the below HTML codes in your Posts or Pages where you want to show this Neumorphism Alert Boxes.

There are 3 Styles Neumorphism Alert Boxes You can use any of them

Style 1

<div class="alert alert-secondary shadow-soft" role="alert"><span class="alert-inner--text">This is a secondary alert with <a class="alert-link" href="#">an example link</a>. Give it a click if you like.</span></div>

<div class="alert alert-success shadow-soft" role="alert"><span class="alert-inner--text">This is a success alert with <a class="alert-link" href="#">an example link</a>. Give it a click if you like.</span></div>

<div class="alert alert-info shadow-soft" role="alert"><span class="alert-inner--text">This is a info alert with <a class="alert-link" href="#">an example link</a>. Give it a click if you like.</span></div>

<div class="alert alert-danger shadow-soft" role="alert"><span class="alert-inner--text">This is a danger alert with <a class="alert-link" href="#">an example link</a>. Give it a click if you like.</span></div>

Style 2

<div class="alert alert-secondary shadow-soft fade show" role="alert"><span class="alert-inner--icon"><span class="fas fa-exclamation-circle"></span></span> <span class="alert-inner--text"><strong>Warning!</strong> Better check yourself, you're not looking too good.</span></div>

<div class="alert alert-success shadow-soft fade show" role="alert"><span class="alert-inner--icon"><span class="far fa-thu s-up"></span></span> <span class="alert-inner--text"><strong>Well done!</strong> You successfully read this important alert message.</span> </div>

<div class="alert alert-info shadow-soft fade show" role="alert"><span class="alert-inner--icon"><span class="far fa-bell"></span></span> <span class="alert-inner--text"><strong>Heads up!</strong>This alert needs your attention, but it's not super important.</span> </div>

<div class="alert alert-danger shadow-soft fade show" role="alert"><span class="alert-inner--icon"><span class="fas fa-fire"></span></span> <span class="alert-inner--text"><strong>Oh snap!</strong> Change a few things up and try submitting again.</span> </div>   

Style 3

<div class="alert alert-secondary shadow-soft" role="alert"><span class="alert-inner--icon icon-lg"><span class="fas fa-exclamation-circle"></span></span> <span class="alert-heading">Warning!</span>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p><p />
<p>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></div>


<div class="alert alert-success shadow-soft" role="alert"><span class="alert-inner--icon icon-lg"><span class="far fa-thumbs-up"></span></span> <span class="alert-heading">Well done!</span>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p><p />
<p>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></div>


<div class="alert alert-info shadow-soft" role="alert"><span class="alert-inner--icon icon-lg"><span class="far fa-bell"></span></span> <span class="alert-heading">Heads up!</span>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p><p />
<p>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></div>


<div class="alert alert-danger shadow-soft" role="alert"><span class="alert-inner--icon icon-lg"><span class="fas fa-fire"></span></span> <span class="alert-heading">Danger!</span>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p><p />
<p>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></div>  

Customization

  • Replace # in Style 1 with your links
  • Replace the text between p tags ( <p> ..........  </p> ) With your text 
  • You can also change the Font Awesome icons if necessary 

Conclusion

In this article I have made a tutorial on How to add Neumorphism Alert Boxes (Note block) in Blogger. Which you can use in your Blog to any add important information, warning sentences or highlight sentences so that users can notice it easily and get aware of that.

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.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © Techy DarshaN | All Rights Reserved 

 © Copyright Techydarshan.in

Getting Info...

About the Author

Student | Developer | Blogger

6 comments

  1. Nice darshan 🌞
    1. Thank you Bro 😊
  2. Big fan sir ❤️
    1. Thank You brother❤️
  3. Hi
  4. bro can u give plus ui template for free pls pls pls
Techy DarshaN's Rules : Leave your opinion or any doubt about this article And is you have any queries please feel free to ask. Don't try to spam, our team reviews every comment.
Have a Cookie!
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.