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

<div class='bsdnote'>Your Text</div>

#Style 2 

<div class='bsdnote blue'>Your Text</div>

#Style 3 

<div class='bsdnote orange'>Your Text</div>

#Style 4 

<div class='bsdnote orange'>Your Text</div>