Skip to main content

follow us


How to Make a Note Box With Close Button In Blog? For bloggers have ever asked about it. Sometimes we as a blog admin need to tell 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.

Today iweblogsite will discuss how to make that fitur with a simple html code. And maybe it looks annoying note box. 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.

also read : How to Make Show Hide Comment Button For Non AMP Blog

The note box with the close button is like the one used for Christmas Day greetings, or it may be used for other things going forward. This post we created because many bloggers ask for a way to display the note box as it is widely used by most famous blog owners

How to Create Note Box With Close Button In Blog


Please save the following CSS into your blog template :

.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 adjust the distance with other elements, please set the margins on the CSS note and for the background gradient please adjust your taste, create a gradient background at colorzilla.com/gradient-editor

Then to display it, use the following HTML code :

For AMP Blog :



<div class='note gradient'>
  <p>Happiness begins with your smile and let your smile change the world dear. Happy birthday to you. Have fun. <b>Happy birthday my dear friend, may the bright colours paint your life and you be happy forever. Stay blessed</b></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 or 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 editing, please replace the code
& times;
with
& amp; times;


For Non AMP Blog :



<div class='note gradient' id='note'>
  <p>Happiness begins with your smile and let your smile change the world dear. Happy birthday to you. Have fun. <b>Happy birthday my dear friend, may the bright colours paint your life and you be happy forever. Stay blessed</b></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 same as for Non AMP.

Oke that's all about How to Create Note Box With Close Button In Blog. We hope this tutorial usefull for you. Please share to your friends and do not forget to leave your comment below. Thanks for visiting.

You Might Also Like

Comment Rule Please leave your comment below. Comments wich contain links will not show up before we approved. Thank you for visiting iweblogsite
Open Comment