Install Alert Box in Blogger Blog Post | Alert Box Script

An Alert Box or Message Box is a great way to inform users of different types of messages such as warning, error, success, warning, and general information messages.

If we want to add an alert notification box to highlights certain information in our blog, but we all know that these alert boxes are not available in the blogger default template. So there is nothing to worry about because today I will teach you how to show information like success, warning, error message alerts in any post on your website or blog.

Alert Box Widget Demo

To see first-hand how this widget looks, you can directly see it at the link below:

Demo Widget

How To Add Alert Box in Blog Post

To add an Alert Box to blogger, you need to use CSS and HTML code. We have provided both codes below and explained well. So, follow these steps and learn how to add an alert box to your blog.

Step 1. Adding CSS Code

1. Go to blogger then click on the Theme template menu

   

   For safety and security purpose backup your template Theme > Backup > Download

2. Then look or search for the code ]]></b:skin> in blogger Edit HTML editor

   

   Use F3 or CTRL + F keys to open the search box to make searching easier

   Paste below code just above of this tag. ]]></b:skin>

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

3. Next step is to click on Save button.

   

Step 2. Adding HTML Codes

In final step to call alert box on the blog post or page. Now copy and paste the code below in the post or page(Html view), where you want to show alert box.

Writing Format:

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

How to add link to Alert Box

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

Writing Format:

<div class='twtbox'>This is a default alert with an <a href='<i class="block">https://your_blog_address.com/</i>" '>example link</a>.</div>
<div class='twtbox sucess'>This is a success alert with an <a href='<span class="block">https://your_blog_address.com/</span>" '>example link</a>.</div>
<div class='twtbox primary'>This is a primary alert with an <a href='<span class="block">https://your_blog_address.com/</span>" '>example link</a>.</div>
<div class='twtbox danger'>This is a danger alert with an <a href='<span class="block">https://your_blog_address.com/</span>" '>example link</a>.</div>
<div class='twtbox warning'>This is a warning alert with an <a href='<span class="block">https://your_blog_address.com/</span>" '>example link</a>.</div>

Information: Don't forget to change the part marked with your url/link.

Okay, this is how to add an alert box to Blogger. I hope you have no problem adding an alert box.

If you found this article helpful, please share and don't forget to let us know your opinion in the comments section. Your unique opinion inspires us to write more of these great guides.

You May Like These Posts:

Go to Link