What tutorial do you want for the next article! Request Here!

Install Alert Box in Blogger Blog Post | Alert Box Script

I will teach you how to show information like success, warning, error, message alerts in any post on your website or blog.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
How to add alert box on blogger post

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

    steps to add alert box on article

    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

    steps to add alert box on post

    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.

    steps to add alert box on article

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.

steps to add alert box on article
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:

تعليق واحد

  1. Hlo bro i have 2 Question I hope you help me 1:- how make tables like u in plus ui blogger theme and 2:- how to make Note box like u or information box please read my comment and help me
To avoid SPAM comments, all comments will be moderated before being displayed.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.