How to install CSS effect Folds Notes in Blogspot blog - If you're a blogger and you want to impress your blog readers by making your blog dashing and good looking, then don't worry because today with the help of this article I'm going to share with you a new plugin (Fold Notes Css Code). With the help of this Plugin/Css Code you can make stylish fold notes in your article. This css effect is just awesome and it will look spicy on your blog.
So before you install this css plugin on your blog, make sure to take a look of this widget by clicking on the below demo button.
After watching the demo of this "fade note" effect, if you like it and want to install it on your own blog, then simply follow the below simple steps.
How to add Fold Notes with Css Effect?
First, visit to your blogger dashboard - Visit
Go to the "Template" section.
Click on the "Edit html" button.
In the "Template editor" add the below code just before ]]></b:skin> or </style>.
/* CSS Note by Indzign */
.note{position:relative;width:30%;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden}
.note.orange{background:#f39c12}
.note.red{background:#F2784B}
.note.blue{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}
After that, click on the Orange Save template button to apply the changes.
Now add any one code from below in HTML field, when you want to write a "Fade Note" in your article.
1-For simple fade note.
<div class='note'>...TYPE YOUR NOTE HERE...</div>2-For orange fade note
<div class='note orange'>...TYPE YOUR NOTE HERE...</div>3-For blue fade note
<div class='note blue'>...TYPE YOUR NOTE HERE...</div>4- For red fade note
<div class='note red'>...TYPE YOUR NOTE HERE...</div>
All done, if you face any kind of problem, then fell free to ask me via the comment section.
That's it! I hope you like this css fade note effect! Stay tuned for more cool things! Thanks for reading +Prince Chaudhri
0 Comment to "How to add Fold Notes with Css Effect"
Post a Comment