Installing Notes with a Fold Effect

Installing Notes with the Fold Effect - Maybe for you with a blogger tutorial niche or a template for sure you've made notes for Visitors. Before using it, this tutorial is perfect for you. This trick is named Note with the CSS Effect Fold.

Installing Notes with a Fold Effect

1. Open Blogger> Template> Add the code below before ]]></b:skin> or </style>

/* CSS Note */
.note{position:relative;width:30%;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden}
.note.orange{background:#f39c12}
.note.crusta{background:#F2784B}
.note.river{background:#3498db}
.note: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}
.note.orange:before{border-color:#fff #fff #e67e22 #e67e22;background:#e67e22}
.note.crusta:before{border-color:#fff #fff #de6e45 #de6e45;background:#de6e45}
.note.river:before{border-color:#fff #fff #2980b9 #2980b9;background:#2980b9}

2. Save the template. Then to add your notes just select one of the HTML codes below with 4 color choices then add in the post on the HTML tab

Color 1

<div class='note'>... CONTENTS WITH YOUR NOTES ...</div>

Color 2

<div class='note orange'>... CONTENTS WITH YOUR NOTES ...</div>

Color 3

<div class='note river'>... CONTENTS WITH YOUR NOTES ...</div>

Color 4

<div class='note crusta'>... CONTENTS WITH YOUR NOTES ...</div>

For examples you can see in the demo below

See the Pen Installing Notes with a Fold Effect by Wiendhy (@wiana) on CodePen.

How? Easy isn't it, so many articles are installing notes with fold effects. May be useful.