The most effective method to add Neumorphism Alert Boxes (Note block) in Blogger

August 18, 2022 February 12, 2025

Hello, Everyone! Welcome back to PH Wizards. Today on this occasion our tutorial is The most effective method to add Neumorphism Alert Boxes (Note block) in Blogger. We as a whole already realize that Alert Boxes [Note box or Note Block] are Used to add significant data, cautioning sentences, or feature sentences so clients can see it effectively and get mindful of that.

In my last post, I made an instructional exercise on The most effective method to add Neumorphism Alert Boxes (Note block) in Blogger Check it out if you haven't yet!

What is Note Block (Alert Box)?

Note Block is an element that is available default in a portion of the blogger the formats like image, Median Ui, Fletro genius, etc... Note Block is utilized to Highlight Important data, Any advance notice sentence, and Highlight Any significant advances so the clients can peruse it more proficiently and better than the typical message. thus, this is the fundamental utilization of the Note Block Feature.

In any case, a portion of the blogger layouts which have default Note Block Feature has a normal, worn-out look and large numbers of the blogger subjects don't have this Note Block Feature exist thus, I have attempted to make something new and gave a remarkable hope to Note Block [Notebox] and this Note box can be included any Blogger format. so kindly read the full post to execute on your blogger website.

Aces of Note Block

Can be included in any Blogger layout
Neumorphism plan
New Unique and appealing look
Dynamic search for your site
Further develop the look of your site
Can be utilized to feature Important Info, cautioning sentences, or any significant stages
Clients can be more drawn in and can peruse more productively than the typical text

Let's Begin!

The most effective method to add Neumorphism Alert Boxes (Note block) in Blogger?

Stage 1: First of all Login into your Blogger Dashboard.

Stage 1: On your Blogger Dashboard, click'Theme'.

Stage 2: Click on the bolt-down symbol close to the 'customize' button.

Stage 3: Click on Edit HTML, and you will be diverted to altering the page.

Stage 4: Now search the code ]]></b: skin> and paste the following CSS Codes just above it.

 
 /* Neumorphism Alert Boxes by Techy Darshan */
.far,.fas{-mozMozx-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}

Stage 5: Guarantee you have presented Font Awesome CDN on your blog while maybe not then stick the going with codes just underneath Tag. accepting that you recently presented Font Awesome CDN just negligence this step.

<link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" rel="stylesheet"><link/>

Stage 6: Add the below HTML codes in your Posts or Pages where you need to show these Neumorphism Alert Boxes.

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

Style 1

This is an optional caution with a model connection. Give it a tick on the off chance that you like.

This is a triumph alert with a model connection. Give it a tick if you like.

This is a data alert with a model connection. Give it a tick on the off chance that you like.

This is a risk alert with a model connection. Give it a tick if you like.

<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

Warning! Better check yourself, you're not looking excessively great.

Well done! You effectively read this significant alarm message.

Heads up! This alarm needs your consideration, yet at the same, it's not really significant.

Oh, snap! Change a couple of things up and take a stab at submitting once more.

<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

Warning!

Aww better believe it, you effectively read this significant alarm message. This model text will run a piece longer so you can perceive how dividing inside an alarm functions with this sort of satisfaction.

As needs are, make certain to utilize edge utilities to keep things overall quite clean.

Good job!

As needs are, make certain to utilize edge utilities to keep things quite clean.

Watch out!

Aww better believe it, you effectively read this significant alarm message. This model text will run a piece longer so you can perceive how separating inside an alarm function functions with this sort of happiness.

As needs are, make certain to utilize edge utilities to keep things overall quite clean.

Risk!

Aww no doubt, you effectively read this significant alarm message. This model text will run a piece longer so you can perceive how dividing inside an alarm function with this sort of happiness functions.

As the need should arise, make certain to utilize edge utilities to keep things overall quite clean.

<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>