Join Our Community Join!

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

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated


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!


    Related Posts
    Hi I am Samir From Bangladesh. I Will Create A Ui/Ux Website And Blogger Theme. I like to playing to code.

    Post a Comment

    Cookies Consent

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