Zig Zag Style Unique CSS Notebox
Anutrickz.blogspot.com - This time I will share a tutorial on How to Add Zig Zag Style Unique CSS Notebox In Blogger
This note box is usually found on blogs about tutorials, tips and tricks as well as some other interesting information. To make a note box on a blog is not difficult for blogger platform users, because with a little touch by adding HTML and CSS code, you can create a note column on the blog article.
How to Make Cool Note Boxes in Blog Posts
First, go to Blogger >> Themes >> Edit HTML .
Then, put the code directly above the code </head>
<style>
/* AT-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 that, click on Save Theme .
Then to apply in posts, create a new entry / new post >> put this code in the HTML tab (not Compose).
<div class="at-note" id="at-note">
<p> YOUR TEXT HERE.</p>
</div>
To see what the results look like, you can click the Video
This is how to make a cool note box on blog posts . Hopefully this post can be useful and Thank you for the end. Best regards, ANUTRICKZ