How to Add Stylish & Colourful Message Alert Box in Blogger (or) WordPress
Overview of Contents of this Post
show
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:
- First Copy the HTML of any box (displayed above) as per your need
- Login into Blogger.com Dashboard >> Post Section.
- Go to the Post where you want to add Alert Box
- Change the post from “Compose Mode” to “HTML mode”
- Now paste the HTML Code which you have copied earlier.
- 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:
- Copy the HTML of any box (displayed above)
- Login to your WordPress website and go to the “All Posts”
- Go to the post where you want to add this Message or Alert Box
- Change the post from “Visual Mode” to “Text Mode”
- Now paste the HTML Code which you have copied before
- 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