How to Add Alert Message Box in Blogger Using HTML & CSS

TIAL WIZARDS

28 Jun, 2022

A+ A-

Hi to all, here I am going to tell you all about how to create and add alert message box in blogger website easily in just few minutes by using HTML and CSS.

By adding this alert box, you can provided latest updates to your website visitors and you can use this to promote any products and this alert message box is responsive, so this works in all devices accurately.

The codes given below will not effect your webpage speed or any other issue, so you can use this code in any blogger website template.

You can show latest and important message in this box and alert box is an important feature of JavaScript , it is used to inform the clients or the user about the click events and more.

How to Add Alert Message Box in Blogger by tial wizards

Read the below provided steps carefully and completely to get clear understanding about how to add alert message box in blogger website easily without getting any error.

Steps to Add Alert Message Box in Blogger

Step-1: First of all you need to login to your blogger website dashboard.

Step-2: Go to blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on backup -> Click on download Theme to backup.

Step-3: Go to blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on Edit HTML -> Theme editor.

Step-4: Now copy below provided HTML code and paste the copied HTML code below open body tag or <body> tag.

<div class='AT-alert-card' id='document.getElementById(at746427)'> <div class='AT-alert-card-close' onclick='document.getElementById("document.getElementById(at746427)").style.display="none"'><svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg></div> <div class='text-component'> <div class='text-layer'> <svg aria-hidden='true' class='iconsvg' viewBox='0 0 48 48'><path d='M46.019,38.447,26.566,6.309a3,3,0,0,0-5.132,0L1.982,38.447A3,3,0,0,0,4.548,43h38.9a3,3,0,0,0,2.568-4.553Z' fill='#ffd633' opacity='0.5'/><g fill='#222'><polygon points='25.757 16.182 25.481 31.725 22.53 31.725 22.252 16.182 25.757 16.182'/><circle cx='24' cy='36' r='2'/></g></svg> <span>This is an important message</span></div> <p class='sub-text'>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium accusantium maxime voluptatem praesentium neque consectetur delectus debitis quibusdam quisquam at?</p> <div class='flex'> <a class='btn--subtle' href='#0'>Learn more</a> <a class='btn--primary' href='#0'>Start free trial</a> </div> </div> </div>

Step-5: Now copy below provided CSS code and paste the copied CSS code above closing head tag or </head> tag.

Step-6: Click on save button.

Step-7: It will take few seconds to process your blogger website theme code and after successful processing you will see a message i.e. Updated Successfully.

Strep-8: You have successfully added alert message box in your blogger website easily in just few minutes.

Note

If you get any error while saving the code then you need to restore the backup code again and need to repeat the same process as given in above steps carefully.

You can edit the style and color of the box by modifying the CSS code and for chaining the colors you need to change the color codes and you will get color codes from google color picker.

Conclusion

I hope that you have understood about how to add alert message box in blogger website easily in just few minutes by using HTML and CSS.

How to Add Alert Message Box in Blogger Using HTML & CSS

Steps to Add Alert Message Box in Blogger

Note

Conclusion

Subscribe

Oops! No Internet!

Cookies Consent

Steps to Add Alert Message Box in Blogger

Note

Conclusion

Subscribe

Follow by Email

Oops! No Internet!

Cookies Consent

Disclaimer

Disclaimer