Follow Me

Installing Notes with a Fold Effect

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
How? Easy isn't it, so many articles are installing notes with fold effects. May be useful.
Next Post Previous Post
No Comment
Add Comment
comment url