Add Note Widget in Blogger Post / Page

You might have noticed a colourful note box in posts and/or pages of websites based on Blogger platform (also called as blogspot websites). Let me tell you that you can also add such note widget in your Blogger based post/page despite any theme that you use.

Note Widget in Blogger

Originally used in Fletro Pro, Median UI and IMagz Blogger templates, the variants have been circulated around the world. The most appreciated note widget has been the blue note box with redesign on the top left corner.

All you have to do is use the CSS and HTML codes in your post or page on Blogger. First, You need to edit the Post or Page in HTML mode and paste the following CSS code on top of the post.

<style>
    .techygen-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;
    }
    .techygen-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;
    }
    .techygen-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 .techygen-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>

Finally, You need to paste the following HTML code in the particular position of your post/page.

<p class="techygen-note"><b>Note:&nbsp;</b>Do Subscribe Techy Gen's YouTube Channel!</p>

Happy Coding in Blogger !