How to Create a Note Box with Close Button in Blog

How to Create a Note Box with Close Button in Blog - Sometimes we as a blog admin need to convey something to the visitor, like an announcement, a note, or just a congratulation when the big days. The announcements or sayings should we display with a box that attracts attention, eg using a background color and or with a color border. So visitors will not miss the announcement.

But sometimes everyone is different. It may be that the note box looks disturbing. For that we need to provide a close button so that those who feel annoyed with the note box can easily remove it from their view. The note box with the close button is like the one I used for the Holiday congratulations, or it might be used for other things going forward.

This note box can be stored anywhere on your blog as needed. For example under the header, in the post, or anywhere in the blog.

Notification alert box with a close button or hide button I created with some background color to be selected according to taste or adjusted with the color of the blog. Or maybe you want to display some of these note boxes in different places with different colors. If you are interested in trying it out, please follow the steps below.

How to Create a Note Box with Close Button in Blog

Please save the following CSS.

.note{padding:2px;margin:0;font-size:16px;font-weight:400;position:relative;color:black}
.note p{margin:0;padding:8px 30px 8px 10px;line-height:1.5;font-size:16px;font-weight:400;background:rgba(255,255,255,.8)}
.note .close-note{position:absolute;top:5px;right:5px;width:20px;height:20px;line-height:20px;text-align:center;font-size:24px;font-weight:500;color:black;opacity:.3;cursor:pointer}
.note b,.note a{font-weight:500;}
.note .close-note:hover{opacity:1}
.note .close-note:focus,.note .close-note:active{outline:0}

.gradient{background:#2b0c93;background:-moz-linear-gradient(left,#2b0c93 0,#a54098 56%,#f84272 100%);background:-webkit-linear-gradient(left,#2b0c93 0,#a54098 56%,#f84272 100%);background:linear-gradient(to right,#2b0c93 0,#a54098 56%,#f84272 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b0c93', endColorstr='#f84272', GradientType=1 )}
.red{background:#E53935}
.pink{background:#D81B60}
.purple{background:#8E24AA}
.indigo{background:#3949AB}
.blue{background:#1E88E5}
.cyan{background:#00ACC1}
.teal{background:#00897B}
.green{background:#43A047}
.yellow{background:#FDD835}
.orange{background:#FB8C00}
.brown{background:#6D4C41}
.grey{background:#546E7A}

To set the distance with other elements, please set the margins on CSS .note and for background .gradient please adjust your taste

Then to display it, use the following HTML code:

1. To display in Blog Non AMP

<div class='note gradient'>
  <p>Words of speech you want to write here</p>
<div aria-label='Close Note' class='close-note' onclick='this.parentElement.style.display=&quot;none&quot;' role='button' tabindex='0'>&times;</div>
</div>

Please adjust / change the sentence. To change the background color please replace the gradient code with red, pink, purple, indigo, blue, cyan, teal, green, yellow, orange, brown, or gray. If saved in HTML edit, please replace &times; with &amp;times;

2. To display in Blog AMP

<div class='note gradient' id='note'>
  <p>Words of speech you want to write here</p>
<div aria-label='Close Note' class='close-note' on='tap:note.hide' role='button' tabindex='0'>&times;</div>
</div>

For AMP add id='note' and if show multiple boxes then each still have to with different ID, eg id='note1', id='note2', and so on. For color bacground equal to that for Non AMP.

That's the article I've shared about How to Create a Note Box with Close Button in Blog. Hopefully with this short enough article can be useful and useful, and good luck.

Share :