Home

Blogger

Code

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

SAMIR

2/08/2023

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!

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

Tags:

Techly420