How to Create Notebox like Median Ui For Any Blogger Template ?

Let's know the process

সর্বপ্রথমে নিচের CSS Code টি Copy করুন । AndThan Edit HTML এ গিয়ে </style> অথবা /*]]>*/</style> এর নিচে । নিচের Copy করা CSS Code টি Past করুন ।

Note:  আপনার Code Box টি দেখতে এরকম হবে ।!

<style>
    .sky-note {
        position: relative!important;
        padding: 20px 20px 20px 50px!important;
        background: #e1f5fe!important;
        color: #01579b!important;
        font-size: .85rem!important;
        font-family: var(--fontB)!important;
        line-height: 1.6em!important;
        border-radius: 10px!important;
        overflow: hidden!important;
    }
    .sky-note:before {
        content: ''!important;
        width: 60px!important;
        height: 60px!important;
        background: #01579b!important;
        display: block!important;
        border-radius: 50%!important;
        position: absolute!important;
        top: -8px!important;
        left: -12px!important;
        opacity: .05!important;
    }
    .sky-note:after {
        content: '\002A'!important;
        position: absolute!important;
        left: 18px!important;
        top: 20px!important;
        font-size: 22px!important;
        min-width: 15px!important;
        text-align: center!important;
    }
/* extra dark mode css can be deleted */
  .drkM .sky-note {
        position: relative!important;
        padding: 20px 20px 20px 50px!important;
        background: #fffa65!important;
        color: #32ff7e!important;
        font-size: .85rem!important;
        font-family: var(--fontB)!important;
        line-height: 1.6em!important;
        border-radius: 10px!important;
        overflow: hidden!important;
    }
</style>

ব্যাস,আপনার কাজ শেষ, এখন আপনি নিচের HTML Code টি আপনার Blog Post এ Use করুন ।

<p class="sky-note"><b>Note:&nbsp;</b>Insert a Note Here!</p>

Go to Link