Add CSS3 Notification Boxes Using Shortcodes In Blogger

Also Read

In this tutorial i'm going to explain how to create Blogger notication/Message boxe using css3 Shortcodes.These shortcodes helps you to insert a Responsive Notifications/Message box anywhere on your blog/Website with a single line of code.In this shortcode we have also used the Fontawesome which gives a creative touch to the boxes.When you use these box you just need to give a  title or message and your users can see important announcements! The message boxes are responsive "Auto Adjusts to Any Screen Size".Each box has a different color and different fontawesome icons.Most important thing is that in this css3 shortcode trick we have used the easiest way for message box,Look below for examples.

Demo

We are Going to create most popular message/notifications box using  Shortcode for blogger.

• Headline(updates or Announcement Box)
• Alert Box
• Warning Box
• Success Box 
• Notice Box
• Infomation Box

Installation Steps:

1 Go To Blogger > Template > Backup your template
2 Click Edit HTML
3 Search </head>
4 Paste the following code just above it.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Add Styles:

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.

/*****************************************
Shortcodes of Notification Boxes.
By:Bloggersstand.blogspot.com
******************************************/
.headline {width:90%;
text-align:justify;color:#FFFFFF;line-height:1.4em;word-wrap:break-word;margin:10px 0 1em;padding:.7em 1.2em;background-color:#29b7ff;font-size:15px;font-family:'Arimo', sans-serif;font-weight: bolder;text-shadow:1px 0 6px #333;box-shadow:2px 3px 6px #D7D7D7}
.headline::before{font-family:FontAwesome;position:relative;content:'\f0a1';font-size:20px;padding-right:10px; padding-bottom:10px;}
.headline:hover
{
-moz-box-shadow: 5px 5px 45px #B8D5E3; /* Firefox 3.6 and earlier */
box-shadow: 5px 5px 45px #B8D5E3;
}
.alert{width:90%;
text-align:justify;color:#FFFFFF;line-height:1.4em;word-wrap:break-word;margin:10px 0 1em;padding:.7em 1.2em;background-color:#FF8377;font-size:15px;font-family:'Arimo', sans-serif;font-weight: bolder;text-shadow:1px 0 6px #333;box-shadow:2px 3px 6px #D7D7D7}
.alert::before{font-family:FontAwesome;position:relative;content:'\f06a';font-size:20px;padding-right:10px; padding-bottom:10px}
.alert a:link {color:#FFFFFF;}
.alert a.visited{color:#FFFFFF;}
.alert:hover
{
-moz-box-shadow: 5px 5px 45px #B8D5E3; /* Firefox 3.6 and earlier */
box-shadow: 5px 5px 45px #B8D5E3;
}
.notice{width:90%;
text-align:justify;color:#FFFFFF;line-height:1.4em;word-wrap:break-word;margin:10px 0 1em;padding:.7em 1.2em;background-color:#8ED2FF;font-size:15px;font-family:'Arimo', sans-serif;font-weight: bolder;text-shadow:1px 0 6px #333;box-shadow:2px 3px 6px #D7D7D7}
.notice::before{font-family:FontAwesome;position:relative;content:'\f18c';font-size:20px;padding-right:10px; padding-bottom:10px}
.notice a:link {color:#FFFFFF;}
.notice a.visited{color:#FFFFFF;}
.notice:hover
{
-moz-box-shadow: 5px 5px 45px #B8D5E3; /* Firefox 3.6 and earlier */
box-shadow: 5px 5px 45px #B8D5E3;
}
.success{width:90%;
text-align:justify;color:#FFFFFF;line-height:1.4em;word-wrap:break-word;margin:10px 0 1em;padding:.7em 1.2em;background-color:#2ec23e;font-size:15px;font-family:'Arimo', sans-serif;font-weight: bolder;text-shadow:1px 0 6px #333;box-shadow:2px 3px 6px #D7D7D7}
.success::before{font-family:FontAwesome;position:relative;content:'\f058';font-size:20px;padding-right:10px; padding-bottom:10px}
.success:hover {-moz-box-shadow: 5px 5px 45px #B8D5E3; /* Firefox 3.6 and earlier */ box-shadow: 5px 5px 45px #B8D5E3;}
.warning{width:90%;
text-align:justify;color:#FFFFFF;line-height:1.4em;word-wrap:break-word;margin:10px 0 1em;padding:.7em 1.2em;background-color:#fc402c;font-size:15px;font-family:'Arimo', sans-serif;font-weight: bolder;text-shadow:1px 0 6px #333;box-shadow:2px 3px 6px #D7D7D7}
.warning::before{font-family:FontAwesome;position:relative;content:'\f071';font-size:20px;padding-right:10px; padding-bottom:10px}
.warning:hover {-moz-box-shadow: 5px 5px 45px #B8D5E3; /* Firefox 3.6 and earlier */ box-shadow: 5px 5px 45px #B8D5E3;}
.info{width:90%;
text-align:justify;color:#FFFFFF;line-height:1.4em;word-wrap:break-word;margin:10px 0 1em;padding:.7em 1.2em;background-color:#fdce09;font-size:15px;font-family:'Arimo', sans-serif;font-weight: bolder;text-shadow:1px 0 6px #333;box-shadow:2px 3px 6px #D7D7D7}
.info::before{font-family:FontAwesome;position:relative;content:'\f05a';font-size:20px;padding-right:10px; padding-bottom:10px}
.warning:hover {-moz-box-shadow: 5px 5px 45px #B8D5E3; /* Firefox 3.6 and earlier */ box-shadow: 5px 5px 45px #B8D5E3;}
.update{width:90%;
text-align:justify;color:#FFFFFF;line-height:1.4em;word-wrap:break-word;margin:10px 0 1em;padding:.7em 1.2em;background-color:#017CB9;font-size:15px;font-family:'Arimo', sans-serif;font-weight: bolder;text-shadow:1px 0 6px #333;box-shadow:2px 3px 6px #D7D7D7}
.update::before{font-family:FontAwesome;position:relative;content:'\f0c6';font-size:20px;padding-right:10px; padding-bottom:10px}
.warning:hover {-moz-box-shadow: 5px 5px 45px #B8D5E3; /* Firefox 3.6 and earlier */ box-shadow: 5px 5px 45px #B8D5E3;}

5.Save your template...Done..!

How to Add css3 notifications shortcodes in blogger

How to use these shortcodes?

Its very simple,when you create a new post,you just need to copy any box code and paste in your page and add your Message,Links,Series,Updates,Warning,Announcements,Infomation,Alert,Notice.

To Create a Warning Box use this shortcode:

<div class="warning">Add Your Message Here</div>

• Change "Add Your Message Here" with your Custom Message.

To Create a Success Box use this shortcode:

<div class="Success">Add Your Message Here</div>

To Create a Headline/Updates/Announcement Box use this shortcode:

<div class="headline">Add Your Message Here</div>

To Create a Information Box use this shortcode:

<div class="info">Add Your Message Here</div>

To Create a Alert Box use this shortcode:

<div class="Alert">Add Your Message Here</div>

To Create a Notice Box use this shortcode:

<div class="Notice">Add Your Message Here</div>

Let me know if you needed any assistance.

SUMMARY

Add CSS3 Notification Boxes Using Shortcodes In Blogger,create css3 messages boxes warning,information,alert,updates,announcement,series,success,notice box in blogger,css3 shortcodes boxes

KEEP ON READING