Home
Blogger

How to add a Median UI like note block with CSS

Hello everyone, welcome to Shiva Technic World! You might be finding a beautiful and attractive note block for your Blogger website, Today we are going to share with you the Median UI-like Note block for your Blogger template, So without wasting much time let's check How to add a Median UI like note block in Blogger!

How to add a Median UI like a note block in Blogger?

  • First, go to your Blogger dashboard
  • Then click on the Theme option
  • Then click on the drop-down icon near Customize option
  • Then click on the Edit HTML option
  • Then find ]]></b:skin> and paste the following CSS just above it or you can paste it above <head/> tag by adding <style></style>



    • /* Note (STW) */ .note{position:relative;padding:16px 20px 16px 50px; background:#e1f5fe;color:#3c4043; font-size:.85rem;font-family:inherit;line-height:1.6em;border-radius:10px;overflow:hidden} .note::before{content:'';width:60px;height:60px;background:#81b4dc;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::before{background:#e65151} .note.wr::after{content:'\0021'}

  • Then Save HTML

  • Now go to the post or page where you need to add a note block and use any of these as you want.

    • Style 01


    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.




    <p class='note'>your_text_goes_here</p>


    Style 02


    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.



    <p class='note wr'>your_text_goes_here</p>

    You can change your_text_goes_here your content.

    Conclusion

    Hope this How to add a Median UI like note block in Blogger tutorial will be useful to you, if you have any doubts related to this article ask me in the comments, and do share with your friends, Thanks for visiting, Have a nice day!