Create CSS3 Notification Boxes in Blogger using "Shortcodes"

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

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

17 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Hi Mustafa,

    I was eagerly waiting for this one to appear on MBT as I already saw it on Shivansh's blog.

    I am soon going to use it on my blog. Will keep you informed. :) Thank you for all the beautiful developments.

    - Rohan.

    ReplyDelete
    Replies
    1. All pleasure is ours dear rohan. The coming shortcodes will add more flexibility to your blogging experience. We are developing anything that we come across. =d

      Delete
  2. WOW, They Look Awesome. Thanks for helping the community Mustafa :)

    ReplyDelete
  3. Thanks for this great tips, it always help to make blog beautiful.
    But all the tricks is used to paste before b:skin and after installation of code, blog speed is down. Do you have any suggestion about this.

    And please check. These codes are not working on mobile view

    ReplyDelete
    Replies
    1. This plugin is the most lightest one! It uses simple jquery and not complex Javascript to slow down loading of page. It loads just fine in background. We have tested it well :)


      The boxes are fully responsive and works just fine on custom Mobile templates.


      About the mobile view, the blogger default mobile view is not recommend and we appreciate your create a custom mobile stylesheet for your template in order to better control your template structure and styles on mobile devices.

      Delete
  4. Thank you @Mohamad Mustafa Ahmed zai for creating these "Notification Boxes" for BlogSpot user.

    Brother may be it will be better if it work on mobile devices. That meant responsive.

    Thanks.

    ReplyDelete
    Replies
    1. You are most welcome brother. The boxes are fully responsive and work just fine with custom mobile templates. you will need to disable the default mobile template and install a custom mobile stylesheet instead. I will write a tutorial inshAllah in near future on it so stay tuned

      Delete
  5. Colorfull NOtifications Thanks For YOur effort and hard work

    ReplyDelete
  6. Ηello, me not working ,in post but only as a widget. Is there any idea about this?

    thanks

    ReplyDelete
    Replies
    1. Add it inside a post and then share that post URL here so that I may look into your web page and fix the problem for you

      Delete
  7. Wow Great Feature Muhammed Am using this feature before while using the Magnews template but once I get rid of the Template the feature got disabled but now you have provided a lasting solution in which even if I changed my template I would just come back and reapply it back.
    Thanks.

    ReplyDelete
    Replies
    1. You are most welcomed hadham. Surely these shortcodes can help anyone customize there templates :)

      Delete
  8. not working buddy,check this out. http://i.imgur.com/RiJGTj3.jpg

    ReplyDelete
    Replies
    1. you have not installed the Blogger Shortcode Plugin First install that and only then it will work

      Delete