Add CSS3 Notification Boxes Using Shortcodes In Blogger

0
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.
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
In this tutorial i'm going to explain how to create Blogger notication/Message boxe using c...
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

You Might Also Like:

We hope this article helped you to learn Add CSS3 Notification Boxes Using Shortcodes In Blogger. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "Add CSS3 Notification Boxes Using Shortcodes In Blogger" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand