Install Alert Box in Blogger Blog Post | Alert Box Script

alt="How to add alert box on blogger post"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1k9D_c_GFiJCdKvTwUh1VMi-pV4XVHrbKnteSf4ozhEzaqwPHNaAcxCoYbhYHFCS4Ptpv7SM3HeyKjLY2Ok7b6mxmaNfnQUcYm1_LvgZPmKnQ_qE78_7fqqclRrSb1FsYZZz0yILywyo/s0/add_alert_box_on_blogger-post.webp"
/>

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:

class="button"
href="https://plugin.thewebtrick.com/2021/09/alert-box.html"
target="_blank"
>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

   
   
   
   
   
   
   
   
   

   
   alt="steps to add alert box on article"
   src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEA1C9T1xKDdwt9qzXFVfPw05YH4mS9tn199_G2jYKOpAY9x2NFdsgLEDvdzKyuRFdQA6l_RrugX_NQhiqaTtWpJJIw0moxt1UMEhyXE8lfSECAwudzZdT-Pgekmsd5gJrtPfImSG2qWo/s0/theme_edit_html_option_on_blogger.webp"
   />
   

   
   

   
   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
   

   
   
   
   
   
   
   
   
   

   
   alt="steps to add alert box on post"
   src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw1it28-pADWOjcLTHS7S1iEAL-nsxmufg7FV9Bk6IOQRi2aY2x_6OTBwIAccN-UYhYE3-sKjq1l0hHt9YnWB0nWavd5WherVsQEtRta5dyzr1s9h9xo7U99dmFr2eaQgsgVpgCiSBi2M/s0/theme_edit_html_place_on_blogger.webp"
   />
   

   
   

   
   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.

   
   
   
   
   
   
   
   
   

   
   alt="steps to add alert box on article"
   src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSN1xkQwEUfEOqj0uBSlcGHm1YFeWmRWEzC-Cpyc1K32r9XB9429evzWGP4Bizk3jXfdNy2o_BrhxNHRLfT5ni0Mlb4ZL6QGd25f-oWmFki2QUpOW963tBOLAZfHL4qX9wf7RtOM8cM04/s0/save-setting-in-blogger-edit-html.webp"
   />
   

   
   

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.

alt="steps to add alert box on article"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyVshTj3DkP4jHma8B5C-YeBsaZ2RdvK8wRUgusFUnMqf9bpYYAU4Fa0eOHyvFSv0SsTu9Q23NTFW58HkTzBi1eZ3X8mg2Z4qAYhpV9qsYydIHoFa0Ou94wLpID4HhkrrK0rF3zRrqDwY/s0/html_code_place_on_blogger.webp"
/>

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.

Go to Link