Create CSS3 Notification Boxes in Blogger using "Shortcodes"

Notification boxes or Alert Boxes or Messages boxes are a great way to inform the user of a variety of messages, such as: alert, update, announcement, error, success, warning etc. and general info notification. You can use. The good news is that we have developed Shortcodes for Blogger Notification Boxes which helps you insert a Responsive Message box anywhere on your blog with a single line of code. We have also used the fontawesome icons which gives a more lively touch to the boxes. Just give your box a title and message and you are all set to prompt your users of important announcements! The Boxes are fluid and responsive and auto adjusts to any screen size. Each box has a different color and can be given any title, not necessarily the five default titles we have shown in the demo page below.

 

DEMO

In this tutorial, we are going to create most popular notification boxes using shortcodes for the following:

1. Warning or Error Box
2. Success Box
3. Information Box
4. Alert Box
5. Update box or Announcement box

1. Install Blogger Shortcode Plugin

In order to use notification boxes you must first install the shortcode plugin for your blogger blog by following 7 easy steps shared on the link below:

• Read: Blogger Shortcode Plugin Installation Steps

Skip installing it if you have already added it in your blogger template

2. Add Styles for Appearance

First we will add the CSS styles to your template. For this following the steps below:

1 Go To Blogger > Template > Backup your template

2 Click Edit HTML

3 Search for ]]></b:skin>

4 Paste the following CSS code just above it

/*---- Shortcode Notification Boxes ---*/
.sc-notification{color:#fff;line-height:1.4em;margin:10px 0 1em;padding:.7em 1.2em;background-color:#ffffe0;border:1px solid #e1db8b;font-size:15px;font-family:helvetica;text-shadow:1px 0 6px #333;box-shadow:2px 3px 6px #D7D7D7}.sc-notification .headline{font-size:17px;font-family:oswald,arial;padding-bottom:10px}.sc-notification.sc-warning{background-color:#fc402c;border:1px solid #C91704}.sc-notification.sc-alert{background-color:#FF8377;border:1px solid #F15C4C}.sc-success.sc-notification{background-color:#2ec23e;border:1px solid #039D14}.sc-info.sc-notification{background-color:#fdce09;border:1px solid #DFB400}.sc-update.sc-notification{background-color:#29b7ff;border:1px solid #069DE9}.sc-info.sc-notification div.headline::before{font-family:FontAwesome;position:relative;content:'\f05a';font-size:20px;padding-right:10px}.sc-update.sc-notification div.headline::before{font-family:FontAwesome;position:relative;content:'\f0a1';font-size:20px;padding-right:10px}.sc-alert.sc-notification div.headline::before{font-family:FontAwesome;position:relative;content:'\f06a';font-size:20px;padding-right:10px}.sc-success.sc-notification div.headline::before{font-family:FontAwesome;position:relative;content:'\f058';font-size:20px;padding-right:10px}.sc-warning.sc-notification div.headline::before{font-family:FontAwesome;position:relative;content:'\f071';font-size:20px;padding-right:10px}

5 Save your template and you are all done!

3. Finally Add CSS3 Notification Shortcodes in Blogger

A shortcode is simply a text enclosed inside Square braces which you can add anywhere. Our Plugin then parses these braces into HTML tags. You can choose to add the message boxes inside your Blog posts, Static pages, Sidebar widgets or even inside your blog comments. Just use the shortcodes shared below to make the magic work for itself!

To Create a Update Box use this shortcode:

[update headline="Update"]Add Your Message Here.[/update]

• Where you can give your box any title or headline by changing the text inside headline attribute with your Title.
• Replace "Add Your Message Here." with your Custom Message

To Create a Alert Box use this:

[alert headline="Alert!"]Add Your Message Here.[/alert]

To Create a Info Box use this:

[info headline="Info"]Add Your Message Here.[/info]

To Create a Warning Box use this:

[warning headline="Warning!"]Add Your Message Here.[/warning]

To Create a Success Box use this:

[success headline="Success"]Add Your Message Here.[/success]

Need Help?

Let me know if you needed any assistance. All we aim is to make your blogging experience even more worth while. Hope these new shortcodes may help you in easing your work load and in adding some colors to your BlogSpot blogs. Peace and blessings buddies :)