How To Create Stylish CSS Note Box In Blogger Template

0
How To Create Stylish CSS Note Box In Blogger Template
Hello Folks,today we are going to explain How to add a stylish unique beautiful CSS note Box in blogger template.In previous post we have already talked about CSS Notification Boxes.We are sure you guys have made a note to your visitors with diferent style or using other tricks but this Note box is very simple to install and very light weight won't effect your webpage page load speed.Adding notes with CSS Note Box will always gain the attention on your blog articles.We have developed this Css note box especially for our readers,someday one reader is asking about this box so we have presented infront of you with a unique style and feature.we have used  pure css for this widget.To grab this CSS note box follow the steps mentioned below.Check the demo below.
Demo

How to Add Unique CSS note box in blogger template

installation steps:

Step .1 Go to https://www.blogger.com and Sign in to your account. 
Step .2 Now From Blogger Dashboard click on ->Template ->Edit HTML.
Step .3 Now Search For the following  ]]></b:skin> tag In Your Template By Using CTRL+F Keys or CMD+F
Step .4 Now Copy the below CSS code and  paste it  just Above of  ]]></b:skin>.
/* CSS Notes by www.Bloggersstand.Com*/
.bsdnote{position:relative;width:30%;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden}
.bsdnote.orange{background:#f39c12}
.bsdnote.softorange{background:#F2784B}
.bsdnote.blue{background:#3498db}
.bsdnote:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #27ae60 #27ae60;background:#27ae60;box-shadow:0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);display:block;width:0}
.bsdnote.orange:before{border-color:#fff #fff #e67e22 #e67e22;background:#e67e22}
.bsdnote.softorange:before{border-color:#fff #fff #de6e45 #de6e45;background:#de6e45}
.bsdnote.blue:before{border-color:#fff #fff #2980b9 #2980b9;background:#2980b9}
Step .5 Now Save your Template..Done !!

Now When you create a new post and wherever you want to add this CSS note box,just click on html tab and paste the one of the code inside your content.CSS notes Box Comes in 4 colors.To add any one of them just choose one code from the below for the different color of the css note box.

#Style 1
blue color css note box for blogger template
<div class='bsdnote'>Your Text</div>
#Style 2 
blue color css note box for blogger template
<div class='bsdnote blue'>Your Text</div>
#Style 3 
soft orange color css note box for blogger template
<div class='bsdnote orange'>Your Text</div>
#Style 4 
orange color css note box for blogger template


<div class='bsdnote orange'>Your Text</div>
How to add customize css notification box with unique style,css note box in orange,green,blue colors.learn trick to show advanced css note box in blogger template.
Hello Folks,today we are going to explain How to add a stylish unique beautiful CSS note Box in...
SUMMARY

How to add customize css notification box with unique style,css note box in orange,green,blue colors.learn trick to show advanced css note box in blogger template.

You Might Also Like:

We hope this article helped you to learn How To Create Stylish CSS Note Box In Blogger Template. 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 "How To Create Stylish CSS Note Box In Blogger Template" 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