--> Create CSS3 Notification Boxes in Blogger using "Shortcodes" | Experience Lab - Online business creation and development guide for bloggers and startups

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, a...

Notification Boxes Shortcode

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.


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:

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!

Update Box shortcode

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

Alert box shortcode

To Create a Alert Box use this:

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

info box shortcode

To Create a Info Box use this:

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

Warning box shortcode

To Create a Warning Box use this:

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

success box shortcode

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 :)



Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
Experience Lab - Online business creation and development guide for bloggers and startups: Create CSS3 Notification Boxes in Blogger using "Shortcodes"
Create CSS3 Notification Boxes in Blogger using "Shortcodes"
Experience Lab - Online business creation and development guide for bloggers and startups
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy