Creating Notebox like Median Ui For Any Blogger Template

So hello viewers how are you. I hope you are doing good. Welcome to my blog Tech Aadi.

So today we are going to Create a Notebox like Median Ui for any blogger template. It's a simple and easy process. Follow the below steps.

Before going ahead please Backup your website template for any kind of errror and easy restoration process.

Adding Notebox to your Blog

Step 1:- Open your Blogger dashboard.

Step 2:- Now go to Theme Section.

Step 3:- Click on Edit HTML.

Step 4:- Copy and paste the below given CSS after </style> tag.

Demo

Note: This is A example of note!

<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>

Step 5:- Now Click on save theme.

Step 6:- For using the Notebox you have to use the style code with class. Below is the given HTML code for using the Notebox I'm your blog.

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

Now i hope after following the above steps you have successfully completed notebox tutorial and notebox is working.

Conclusion

So i hope you like this article if you got any questions kindly do comment below. So today's we discussed about Creating Notebox like Median Ui For Any Blogger Template. Do follow our blog for getting this kind of post regularly.

Go to Link