How to Add Alert Boxes in Blogger Template

Hello friends, welcome to our The Kathait blog. Like you guys know something important. Notifications or else. Some special things. We need the alert box to be aware of. We don't get to see this kind of alert box in any blogger template. Still, today's In this article we will tell you how you can use the alert box on your blogger post, or anywhere.

To add an alert box in your blogger template we have to take the help of HTML, CSS., and as per the given article. You can use the alert box in yours. blogger template? Given. The code has to be copied. More Told. Steps to be followed.

Use CSS Codes

Add the following CSS codes just above to ]]></b:skin> tag.

/*Alert Box by thekathait.in*/
.avbox{
background-color:#e9ebee;
color: #58606B;
padding:10px;
margin:20px 0px;
border:1px solid #dddfe2;
border-radius:5px;
}
.avbox a{
  color: #1E2326;
  font-weight: bold;
}
.avbox.sucess{
color:#145724;
background-color:#d4edda;
border:1px solid #c3e6cb;
}
.avbox.sucess a{
  color: #0A2E12;
  font-weight: bold;
}
 .avbox.primary{
color:#014286;
background-color:#CBE5FE;
border:1px solid #b8daff;
}
.avbox.primary a{
    color: #0A315A;
    font-weight: bold;
}
 .avbox.danger{
color:#7A2930;
background-color:#f8d7da;
border:1px solid #f5c6cb;
}
.avbox.danger a{
  color: #491217;
  font-weight: bold;
}
 .avbox.warning{
color:#856404;
background-color:#fff3cd;
border:1px solid #ffeeba;
}
.avbox.warning a{
  color: #554104;
  font-weight: bold;
}

Use HTML Codes

Now copy the alert box code given below. and paste it where you want to use the alert box?

This is a default alert box.

This is a success alert box.

This is a primary alert box.

This is a danger alert box.

This is a warning alert box.

Writing Format:

<div class='avbox'>This is a default alert box.</div>
<div class='avbox sucess'>This is a success alert box.</div>
<div class='avbox primary'>This is a primary alery box.</div>
<div class='avbox danger'>This is a danger alert box.</div>
<div class='avbox warning'> This is a warning alert box.</div>