Simple CSS/HTML Scripts for Alert and Message Boxes

You can use HTML/CSS scripts to display alert/message box for enriching the UI/UX of your content on blogs based on Blogger, or WordPress platforms.

For this, you need to edit the post/page in HTML editor and paste the CSS/HTML scripts as one of the component.

message box html css script

Blue Message Box

You can define the CSS in theme, or directly on the post. I suggest you to define the CSS on the post because, CSS declaration in the theme may need more loading time for the website itself which may impact SEO.

Title here: Succinct and clear message here.

	<style>  article .note{position:relative;padding:20px 30px 20px 50px;background-color:#C0E7F3;color:#45171D;font-size:1rem;font-family:var(--font-body);line-height:1.62em;border-radius:2px}article .note:before{content:'\1F5E8';position:absolute;left:18px;font-size:20px}@media screen and (max-width: 640px){article .note {width: calc(100% + 40px);left: -20px;font-size: 1rem;border-radius: 0;}}</style><p class="note"><b>Do you want custom designed Blogger website?</b>: can provide the service of custom design of Blogger-based website.</p> 

Red Alert Box

I suggest you not to use this box at many locations on your webpages. It may be not be wasy thing to see to some and reduce the visual appeal of your webpages. However, you may need to put such box(es) on your posts which also need to have warning messages.

Alert: Think three times when preparing a warning message. This segment is more direct to core of emotions of your audience.

	<style>  article .khabardar{position:relative;padding:20px 30px 20px 50px;background-color:#FFCCCC;color:#45171D;font-size:1rem;font-family:var(--font-body);line-height:1.62em;border-radius:2px}article .khabardar:before{content:'\26A0';position:absolute;left:18px;font-size:20px}@media screen and (max-width: 640px){article .khabardar {width: calc(100% + 40px);left: -20px;font-size: 1rem;border-radius: 0;}}</style><p class="khabardar"><b>Alert</b>: Do not copy content from other people's website. You have limited life; do something creative meanwhile.</p> 

Green Suggestion Box

You may be writing a 'how to' blog post. In the end, such box is relevant to use for making an visual impression to audience and connecting with them.

Share: So, you have learned how to create alert/message boxes on your website. If you feel like sharing this page, why not? Everything is social anyway.

	<style>.sandesa {position: relative; padding: 16px 20px 16px 50px;background: #F0FEE9;color: #525b4b;font-size: .95rem;font-family: inherit;line-height: 1.6em;border-radius: 10px;overflow: hidden;}.sandesa::before {content: '';width: 60px;height: 60px;background: #81b4dc;display: block;border-radius: 50%;position: absolute;top: -12px;left: -12px;opacity: .1;}.sandesa::after {content: '\1F44D';position: absolute;left: 18px;top: 16px;font-size: 20px;min-width: 15px;text-align: center;}</style><p class="sandesa"><b>Sandesh:</b> In Nepali, the meaning of <i>sandesh</i> is 'message'.</p>