Adding notes in blogger blog professionally

 

Creating an alert message in Blogger blog or a note is an addition that we very need in order to inform visitors about a specific matter within the post, and this addition is to create a distinctive box for an alert message or note and be formatted in the way you want to be compatible with your blog system and your template



You just have to read the topic well and then you will get a nice note template


The following code is the focus of the explanation


<style>#cnmumesclose {   background:rgba(0, 0, 0, 0);   border: 0 none;   border-radius: 0;   color: #888;   cursor: pointer;   display: inline-block;   float: right;   font: bold 14px Arial Black;   margin: 9px -18px 0 0;   position: absolute;   text-align: center;   width: 15px; } #cnmumesclose:hover {color: #d50000;} #cnmumes1 {   background-color: #d0fdbc;   background-image: url("https://4.bp.blogspot.com/-zarAvoKGc_U/V4qkxGLQWGI/AAAAAAAAA64/9DKIbkyZ_6IQcoYj49AmW9J4dbRI6_Y7ACLcB/s1600/Accept.jpg");   background-position: 14px 8px;   background-repeat: no-repeat;   border: 1px solid #6abf45;   border-radius: 4px;   font: 17px/36px tahoma;   height: 40px;   overflow: hidden;   padding: 0 25px 0 42px;   width: 400px; } </style><div id="cnmumes1">
<button id="cnmumesclose" type="button" onclick="{document.getElementById('cnmumes1') .style.display='none'}">X</button><marquee behavior="scroll" direction="right" scrolldelay="90" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);"><div style="text-align:left;">
Write text here </div>
</marquee></div>


Code Formats:


# d0fdbc background color

# 6abf45 frame color

Figure 17 color font size

The number 36 is after the line from the top

tahoma type special font as well

The number 400 is the width of the special tape in addition

Number 14 is after the icon to the left

Number 8 is after the icon from the top

The number 90 is the speed of movement of the instrument, and the higher the number, the slower the movement of the tool becomes

Do not forget to replace "Write text here" Replace it with what you want to appear inside the tool


How to add notes / handle and install with the tool


You can add all the code inside the HTML / javascript tool


Or you can add the part between the <style> </style> code

Above the tag below inside the template

]]> </ b: skin>

The rest of the code is used within your topic


Note: If you want more than one format for messages, meaning that you want a message in one color and another message in another color, just repeat the following code with modification every time in the appropriate shape and icon and change number 1 with another number, and whenever you repeat it, change the number


#cnmumes1 {   background-color: #d0fdbc;   background-image: url("https://4.bp.blogspot.com/-zarAvoKGc_U/V4qkxGLQWGI/AAAAAAAAA64/9DKIbkyZ_6IQcoYj49AmW9J4dbRI6_Y7ACLcB/s1600/Accept.jpg");   background-position: 14px 8px;   background-repeat: no-repeat;   border: 1px solid #6abf45;   border-radius: 4px;   font: 17px/36px tahoma;   height: 40px;   overflow: hidden;   padding: 0 25px 0 42px;   width: 400px; }


Also, change the number 1 in the code, which will be added as a message with the same number that you put in the recurrence


 An illustrative example is as follows


<div id="cnmumes1">
<button id="cnmumesclose" type="button" onclick="{document.getElementById('cnmumes1') .style.display='none'}">X</button><marquee behavior="scroll" direction="right" scrolldelay="90" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);"><div style="text-align:left;">
Write text here </div>
</marquee></div>


Of course, you can access any number of formats you want


How to create a privacy policy page for your website

Why is your site not thriving ? Find out the best way to promote your blog or website