Notifications
All Notifications

How to Add a Median UI Note Block In Your Any Blogger Theme

Hello everyone, welcomeTechy Samir Website ! We're going to show you the Median UI-like Note block for your Blogger template today, so without wasting any time, let's check it out. You might be looking for a beautiful note block for your Blogger website. How to Add a Median UI Note Block In Your Any Blogger Theme!

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>
  • /* New Note */ .SamirN{position:relative;padding:16px 20px 16px 50px; background:#e1f5fe;color:#3c4043; font-size:.85rem;font-family:inherit;line-height:2.6em;border-radius:20px;overflow:hidden;box-shadow:rgb(100 100 111 / 20%) 0px 7px 29px 0px} .SamirN::before{content:'';width:60px;height:60px;background:#81b4dc;display:block;border-radius:50%;position:absolute;top:-12px;left:-12px;opacity:.1} .SamirN::after{content:'\002A';position:absolute;left:18px;top:16px; font-size:20px; min-width:15px;text-align:center} .SamirN.wr{background:#ffdfdf;color:#48525c} .SamirN.wr::before{background:#e65151} .SamirN.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.
  • Check This 2 Style Demo

    Style 01

    Consectetur adipiscing elit consectetur ipsum dolor sit amet Efficitur felis commodo et efficitur dignissim diam proin vestibulum.

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

    Style 02

    Consectetur adipiscing elit consectetur ipsum dolor sit amet Efficitur felis commodo et efficitur dignissim diam proin vestibulum.

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

    Conclusion

    Hope this How to add a Median UI like note block in Your Any Blogger Template 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!

    Blogger Code CSS Feature HTML
    SAMIR
    SAMIR
    Hey ! My name is Samir, a professional Web Designer, Graphic Designer, UI / UX Designer as well as Content Creator from Feni,Dagonbhuiyan,Bangladesh. I love to Code and create interesting things while playing with it.

    Facebook ID Telegram ID
    Join the conversation
    Post a Comment