How To Create Stylish Css Note Box In Blogger Template

Friday, March 20, 2020

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 .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.

Installation Steps:
Step .1 Go to and Sign in to your account. https://www.blogger.com
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:70%;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