How to Add Stylish Alert Boxes in Blogger Pos/Pages

How to Add Stylish Alert Boxes in Blogger Post/Pages
How to Add Stylish Alert Boxes in Blogger Pos/Pages

Hello, Welcome to Accomodatio. Sometimes we need alert boxes to highlight some information but these alert boxes are not in every template, so there is nothing to worry because today in this post we will learn how to add alert boxes in blogger.

Alert Box is used when you need some information to reach the user. These boxes are used to notify the user about different types of messages, such as: Alert, Update, Announcement, Error, Success etc.

How to Add Alert Boxes in Blogger?

You have to use CSS and HTML code to add alert box in blogger. We have given both the codes below and explained well. So follow those steps and learn how to add alert box to your blog.

Step 1. Adding CSS Codes

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

/*Alert Box by Accomodatio.xyz*/
.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;
}

Step 2. Adding HTML Codes

Now copy and paste the codes of the alert box where you want to add.

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>
Alert Boxes with Links

If you want to add link in alert box, then use below code

This is a default alert with an example link.
This is a success alert with an example link.
This is a primary alert with an example link.
This is a danger alert with an example link.
This is a warning alert with an example link.
Writing Format:
<div class='avbox'>This is a default alert with an <a href='#'>example link</a>.</div>
<div class='avbox sucess'>This is a success alert with an <a href='#'>example link</a>.</div>
<div class='avbox primary'>This is a primary alert with an <a href='#'>example link</a>.</div>
<div class='avbox danger'>This is a danger alert with an <a href='#'>example link</a>.</div>
<div class='avbox warning'>This is a warning alert with an <a href='#'>example link</a>.</div>

So this is all about adding alert boxes in blogger. I hope you didn't have any problem in adding alert box.

If you found this article useful, do share it and don't forget to give us your feedback in the comments section. Your one feedback inspires us to write more such good tutorials

© Copyright Accomodatio