Buy Plus UI v2.5! Demo Buy Now!

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.

Creating Notebox like Median Ui For Any Blogger Template

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.

Read also :

Rate this article

Getting Info...

About Post Author

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Cookies Policy

We employ the use of cookies. By accessing Plus UI, you agreed to use cookies in agreement with the Plus UI's Privacy Policy.

Most interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used by our website to enable the functionality of certain areas to make it easier for people visiting our website. Some of our affiliate/advertising partners may also use cookies.