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
1 Go To Blogger > Template > Backup your template
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:
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 template2 Click Edit HTML
3 Search for ]]></b:skin>
4 Paste the following CSS code just above it.
/*****************************************5.Save your template...Done..!
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;}
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...
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+
Post a Comment Blogger Disqus
0 Comments on "Add CSS3 Notification Boxes Using Shortcodes In Blogger" So Far - Post Yours!
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