How to Add Unique Style Notebox in Blogger

Hi to all, in this article I am going to tell you all about how to add unique style CSS note box in blogger website easily in just few minutes by using simple HTML and CSS.

You can write important or latest information in this note box, so that your website visitors can read that points and know updated information.

By adding this note box in your blog post will show a professional look of your website and also it attracted your visitors to read the information inside the note box.

So, read below provided steps carefully and completely to get clear understand about adding zig zag style CSS note box in your blogger website without any issue or error.

Steps to Add Zig Zag CSS Note Box in Blogger

Step-1: Login to Blogger Dashboard

First of all visit official website of blogger.

Now click on sign-in button and loin to your bogger dashboard by using your login credentials safely.

Step-2: Blogger Theme Backup

After login to your blogger website dashboard you need to take your blogger website theme backup, if any error or issue arises then you can restore the backup code and can run your website as usual.

To take backup of your blogger website, you need to follow the below provided paths

Blogger dashboard -> Theme section -> Arrow icon -> Backup theme -> Download theme.

Step-3: Open Blogger Theme Editor

After successful backup your theme, you need to visit to your theme editor, to add the code.

You need to follow the below path to open blogger theme editor.

Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Select Edit HTML -> Blogger theme editor section.

Step-4: Adding CSS code

Now you need to copy below provided CSS code.

And paste the copied CSS just above closing head tag or </head> tag.

<style>
/* NOTEBOX */
.at-note { background-color: #f3f3f6; border-radius: .25rem; padding: 1.25rem 1.25rem 1.25rem 1.5rem; margin: 1rem 0 1.2rem; border: 2px solid #d5d5d8; position: relative; } .at-note:before{ content: ''; position: absolute; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MiA4Ij4KICA8cGF0aCBkPSJNNTIgN2MtMy4yIDAtMy4yLTMtNi41LTMtMy4yIDAtMy4yIDMtNi41IDNzLTMuMy0zLTYuNS0zYy0zLjMgMC0zLjMgMy02LjUgM3MtMy4yLTMtNi41LTNjLTMuMiAwLTMuMiAzLTYuNSAzLTMuMiAwLTMuMi0zLTYuNS0zUzMuMyA3IDAgN3YxaDUyVjd6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI2YzZjNmNiIvPgogIDxwYXRoIGQ9Ik01MiA2Yy0zLjIgMC0zLjItMy02LjUtMy0zLjIgMC0zLjIgMy02LjUgM3MtMy4zLTMtNi41LTNjLTMuMyAwLTMuMyAzLTYuNSAzcy0zLjItMy02LjUtM2MtMy4yIDAtMy4yIDMtNi41IDMtMy4yIDAtMy4yLTMtNi41LTNTMy4zIDYgMCA2IiBmaWxsPSJub25lIiBzdHJva2U9IiNkNWQ1ZDgiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4K); background-repeat: no-repeat; background-size: cover; top: -7px; left: 20px; width: 52px; height: 8px; } .at-note p{font-size:16px;margin-left: 29px;margin-bottom: 0;} .at-note p:before{ content: ''; width: 1.5rem;margin-left: 16px; height: 1.5rem;left: -4px; position: absolute; top: 21px; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNS41IDI1LjQiPgogIDxjaXJjbGUgY3g9IjEyLjgiIGN5PSIxMi43IiByPSIxMiIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNmOWVkNDMiIHN0cm9rZT0iI2Y5ZWQ0MyIgc3Ryb2tlLXdpZHRoPSIxLjIiLz4KICA8cGF0aCBkPSJNOC40IDhWNi40YzAtLjQuNC0uNy44LS43aDguNmMuNCAwIC43LjMuNy43djEyLjFjMCAuNC0uMy43LS43LjdIMTYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjMzQ0NDRjIi8+CiAgPHBhdGggZD0iTTcuOCA3LjNoOC4xYy40IDAgLjcuMy43Ljd2MTEuNmMwIC40LS4zLjctLjcuN0g3LjhjLS40IDAtLjctLjMtLjctLjdWOC4xYy0uMS0uNC4zLS44LjctLjh6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI2Y2OGM1MCIgc3Ryb2tlPSIjZjY4YzUwIiBzdHJva2Utd2lkdGg9Ii41Ii8+CiAgPHBhdGggZD0iTTE1LjIgMTJIOC41TTE1LjIgMTAuMkg4LjVNMTUuMiAxMy44SDguNU0xNS4yIDE1LjhIOC41TTExLjggMTcuNUg4LjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2Y5ZWQ0MyIgc3Ryb2tlLXdpZHRoPSIuOTQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K); }
</style>

After adding the CSS code in your theme editor, click on save button to save your complete theme.

Step-5: Open any Blog Post

After successful saving the theme code, you need to open any one blog post where you want to add this zig zag style CSS note box.

After opening the blog post, you need to click on pencil icon at the top left hand side and then you need to change compose view to HTML view.

Now copy below provided HTML code and add in the blog post in your desired location and add your own text in between paragraph tag.

<div class="at-note" id="at-note">

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

</div>

After adding the text, you need to click on Publish or Update button.

Step-6: Added Zig zag Note Box

After successful updating your blog post, you need to visit your website to check whether the zig zag style CSS note box is showing correctly or not. if you get any errors then read points mentioned in below note.

Note

If you get any error while saving the code in your theme editor, then you need to restore your backup code again and need t repeat the same process as mentioned in above provided steps carefully.

If you want to change any styles and colors of the note box then you need to modify your CSS code carefully and for changing colors you need to replace color code and for color codes you can use google color picker or any other third part color picker website.

Conclusion

I hope that you have understood about adding zig zag style note box in your blogger website easily in just few minutes by using simple HTML and CSS.