Today We Will Going To How To Create Star Note Block In Blogger Website. We Will Create With Html and Css
Varsion: 1.0 - Star Note Block
First You See a Star Note Block Demo After We Start:
What is Star Note Block
Star Note Block: Star Note Block You Can Use On Blogger Website You Can Add a Text and Notice.
Requirement:
Requirements:
1. Blogger Account
How to create Star Note Block?
Step 1: Go To Blogger.com
Step 2: Login To Your Account
Step 3: Click To Create Post/Page.
Step 4: Select Compose View To Html View
Step 5: Past This Code:
<html>
<style>
.note{position:relative;padding:16px 20px 16px 50px;background:var(--notifU);color:#3c4043; font-size:.85rem;font-family:var(--fontB);line-height:1.6em;border-radius:10px;overflow:hidden} .note::before{content:'';width:60px;height:60px;background:rgba(0,0,0,.4);display:block;border-radius:50%;position:absolute;top:-12px;left:-12px;opacity:.1} .note::after{content:'\002A';position:absolute;left:18px;top:16px; font-size:20px; min-width:15px;text-align:center} .note.wr{background:#ffdfdf;color:#48525c} .note.wr::after{content:'\0021'} .drK .note{background:var(--darkBs);color:rgba(255,255,255,.9)}
</style>
<body>
<p class="note">Add Your Text Here</p>
</body>
</html>
Step 6: Save The Code
Conclusion
This is all about making a Star Note Block. I hope you enjoy this article. Please do share this article. And if you have any questions then ask us in comment box.© Copyright
www.developerdhaval.blogspot.com/