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
- Can be added in any Blogger template
- Neumorphism design
- New Unique and attractive look
- Dynamic look for your site
- Improve look of your site
- Can be 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
Let's Begin
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
This is a secondary alert with an example link. Give it a click if you like.
This is a success alert with an example link. Give it a click if you like.
This is a info alert with an example link. Give it a click if you like.
This is a danger alert with an example link. Give it a click 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 too good.
Well done! You successfully read this important alert message.
Heads up!This alert needs your attention, but it's not super important.
Oh snap! Change a few things up and try submitting again.
<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 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.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Well done!
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.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Heads up!
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.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Danger!
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.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
<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