20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

Add CSS3 Notification Boxes Using Shortcodes In Blogger

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
How to Add CSS3 Notification Boxes Using Shortcodes In Blogger
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.


warning shortcode box
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:
success shortcode box
<div class="Success">Add Your Message Here</div>
updates shortcode box
To Create a Headline/Updates/Announcement Box use this shortcode:
<div class="headline">Add Your Message Here</div>
Information shortcode box
To Create a Information Box use this shortcode:
<div class="info">Add Your Message Here</div>
alert shortcode box
To Create a Alert Box use this shortcode:
<div class="Alert">Add Your Message Here</div>
Notice shortcode box
To Create a Notice Box use this shortcode:
<div class="Notice">Add Your Message Here</div>

Let me know if you needed any assistance.

Post a Comment