How to Attach Notes with a Fold Effect in Blogger

Maybe for those of you with an amazing blogger tutorial or template, there are probably notes that need to be made. You can use visual good-looking notes in your blog posts if they're cautionary warning against something on the internet and then also give suggestions as well! This article is perfect because I'll show how adding folding effect text will help make things easier when editing future blogs post by providing more interest than normal blocks of content do alone.

How to Attach Notes with a Fold Effect in Blogger

{tocify} $title={Table of Contents}

Attaching Notest with A CSS Folding Effect 

Now I'll show you how to add CSS Fold Effect Notes into your blog post easily and make it more professional. Carefully follow the steps below so that you can add such beautiful and SEO-friendly CSS Folding Effects Notes to your blogger's blog post without any hassle or error.

Step 1. Go to Blogger > Templates > Add the code below before ]]></b:skin> 

Add CSS code in blogger

If this CSS code not working properly in CSS corner then you paste the following code below before </style>

Add code in blogger template

/* CSS Note by ProTechPoint */
.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}

Step 02: Now you Save your blogger template.  After that, you add the following given Folding CNotes to your blogger post by selecting anyone that you may like to add. 

First Color CSS Folding Note for Blogger Post

...Paste your content here that you want your user to see in a Fold Notes in a Blogger post....

<div class='note'>...Paste your content here that you want your user to see in a Fold Notes in a Blogger post...</div>

Second Color CSS Folding Note for Blogger Post

...Paste your content here that you want your user to see in a Fold Notes in a Blogger post...

<div class='note orange'>...Paste your content here that you want your user to see in a Fold Notes in a Blogger post...</div>

Third Color CSS Folding Note for Blogger Post

...Paste your content here that you want your user to see in a Fold Notes in a Blogger post...

<div class='note river'>...Paste your content here that you want your user to see in a Fold Notes in a Blogger post...</div>

Fourth Color CSS Folding Note for Blogger Post

...Paste your content here that you want your user to see in a Fold Notes in a Blogger post...

<div class='note crusta'>...Paste your content here that you want your user to see in a Fold Notes in a Blogger post...</div>
Please Note That: To use Fold Effect Notes in your Blogger blog post, you need to go to the HTML editor by pointing to your desired location in the blog post and pasting the Notes code. Then you come back to Compose View to replace the written text with the text you want.

Final Thoughts

Adding Fold Effect Notes to Blogger Blog Posts will give your site a good and professional image to the users who visit your site, and it will also increase the user experience of your site and your website. Google will also rank in search engines. You can easily use it in any of your Blogger posts, and it does not affect the speed of your website.

M.IMRAN

Hello, My name is M.IMRAN and I am a professional web content writer. I am working on Upwork and some other Freelancing platforms and deliver quality work to my clients. I am also a web designer and design websites for WordPress and Blogger Platform. facebook twitter youtube linkedin pinterest whatsapp

Please do not enter any spam link in the comment box, Thanks.

Post a Comment (0)
Previous Post Next Post