How to Add Stylish Alert Box in WordPress | Blogger [Easy Method]

How to Add Stylish & Colourful Message Alert Box in Blogger (or) WordPress

How to Add Stylish Alert Box in Blogger and WordPress

A alert box (message box) is one of the best way to display different types of messages like important information, warning message, successful message & error message.

Different types of Alert Message or Notice Box:

Info Message Box

  • Info Message Box (HTML Code)
<div class="info" style="font-family: Arial, Helvetica, sans-serif; font-size: 13.5px; background-position: 10px center; background-repeat: no-repeat; border: 1px solid; margin: 10px 0; padding: 14px 10px 14px 50px; background-color: #bde5f8; background-image: url('https://1.bp.blogspot.com/-kPO_imi4Lh8/YPME6uobdkI/AAAAAAAAAgc/ImldPUeMARorzU8tq-VoWPHQBa7LLgqqgCLcBGAsYHQ/s16/info%2Bicon.png'); color: #00529b;">Info message: This is a Blue Color Info Alert Box (designed by tenowl)</div>
  • Info Message Box (Demo)
Info message: This is a Blue Color Info Alert Box (designed by tenowl)

 

Successful Message Box

  • Successfull Message Box (HTML Code)
<div class="success" style="font-family: Arial, Helvetica, sans-serif; font-size: 13.5px; background-position: 10px center; background-repeat: no-repeat; border: 1px solid; margin: 10px 0; padding: 14px 10px 14px 50px; background-color: #dff2bf; background-image: url('https://1.bp.blogspot.com/-Ne8VUT3DB9Y/YPME68_b0SI/AAAAAAAAAgg/8bu9rBedf9UuCnhsJe5u-BkfguTrjz7CQCLcBGAsYHQ/s0/success-icon.png'); color: #4f8a10;">Successful message: This is Green Color Successful Alert Box (designed by tenowl)</div>
  • Successful Message Box (Demo)
Success message: This is Green Color Successful Alert Box (designed by tenowl)

 

Warning Message Box

  • Warning Message Box (HTML Code)
<div class="warning" style="font-family: Arial, Helvetica, sans-serif; font-size: 13.5px; background-position: 10px center; background-repeat: no-repeat; border: 1px solid; margin: 10px 0; padding: 14px 10px 14px 50px; background-color: #feefb3; background-image: url('https://1.bp.blogspot.com/-54AV27szqNQ/YPME7giavzI/AAAAAAAAAgk/Q-I6e68ideIrY6KutzvSEPBiWUQQSHUvQCLcBGAsYHQ/s0/warning%2Bicon.png'); color: #9f6000;">Warning message: This is a Yellow Color Warning Alert Box (designed by tenowl)</div>
  • Warning Message Box (Demo)
Warning message: This is a Yellow Color Warning Alert Box (designed by tenowl)

 

Error Message Box

  • Error Message Box (HTML Code)
<div class="error" style="font-family: Arial, Helvetica, sans-serif; font-size: 13.5px; background-position: 10px center; background-repeat: no-repeat; border: 1px solid; margin: 10px 0; padding: 14px 10px 14px 50px; background-color: #ffbaba; background-image: url('https://1.bp.blogspot.com/-wUpyrQ-P5ec/YPME6hAFbJI/AAAAAAAAAgY/028hVRpsX14PwjH1ilyM7vSRzpnVZdjRgCLcBGAsYHQ/s0/error%2Bicon.png'); color: #d8000c;">Error message: This is a Red Color Error Alert Box (designed by tenowl)</div>
  • Error Message Box (Demo)
Error message: This is a Red Color Error Alert Box (designed by tenowl)

 

Steps to add Stylish Alert Box in Blogger or Blogspot:

  1. First Copy the HTML of any box (displayed above) as per your need
  2. Login into Blogger.com Dashboard >> Post Section.
  3. Go to the Post where you want to add Alert Box
  4. Change the post from “Compose Mode” to “HTML mode”
  5. Now paste the HTML Code which you have copied earlier.
  6. You have Successful added the Alert Message Box in your Post. You can change the text as per your wish.

Steps to add Stylish Colored Alert Message Box in WordPress:

  1. Copy the HTML of any box (displayed above)
  2. Login to your WordPress website and go to the “All Posts”
  3. Go to the post where you want to add this Message or Alert Box
  4. Change the post from “Visual Mode” to “Text Mode”
  5. Now paste the HTML Code which you have copied before
  6. That’s it, Alert Box is successfully added to your post. Replace the text as per your wish.

Also Read:  How to Add Stylish Download Buttons in Blogger/Blogspot

Leave a Comment