How to add a popup changelog feature in Blogger

 Hello everyone welcome to Shiva Technic World, you may be finding a way to make a changelog without creating any extra pages for that, so we made a tutorial for you to make a changelog with any extra page and you can create a popup in the same page that no need an extra page.

We only used here HTML and CSS not JS usage, Are you worried about your website speed? don't worry it does not affect your website speed.

The popup changelog better thing is that you can create content on it instead of changelog also and the popup also closable view gave close button.

Your website has a dark mode function and you worrying about it works perfectly in dark mode? then don't worry about it this changelog feature also has dark mode CSS that you just want to change the dark mode class that we gave with your theme dark mode class, you can easily change it by following this tutorial carefully.

So without wasting much time let's check how to add a popup changelog feature in Blogger.

How to add a popup changelog in Blogger?

Before doing these steps we recommend you to take a backup of your template by chance if any mistake has been done, you can restore it later!

• 
  First, go to your Blogger dashboard
• Then go to Theme option
• Then click on the drop-down icon near Customize option
• Then click on the Edit HTML option
• Now find ]]></b:skin> and paste the following CSS just above it 

/* Changelog */ .changeLog{position:fixed;bottom:0;left:0;right:0;margin:0;padding:40px 0;width:100%;height:100%;background-color:#fefefe;font-family:'Noto Sans', sans-serif;font-size:15px;z-index:22;-webkit-transition:all .1s ease;transition:all .1s ease;overflow-y:auto;opacity:0;visibility:hidden}.changeLog .logClose{display:flex;align-items:center;height:22px;position:absolute;top:20px;right:25px}.changeLog .logClose:before{content:'Close';font-size:11px;padding-right:8px;font-family:'Noto Sans', sans-serif}.changeLog .logContent{width:100%;max-width:820px;padding:0 20px;margin-left:auto;margin-right:auto;font-family:'Noto Sans', sans-serif}.changeLog .logContent h2{margin-top:10px;font-family:'Noto Sans', sans-serif}.changeLog .logContent ol,.changeLog .logContent ul{padding-left:30px}.logInput:checked ~ .changeLog{opacity:1;visibility:visible}.I{color:inherit;text-decoration:underline;font-family:match;line-height:20px}.drK .changeLog{background-color:#1e1e1e}.drK .logContent{background-color:#1e1e1e}

Don't forget to change highlighted drK with your website theme dark mode class, if your theme did not have a dark mode feature then keep default!

<div class='l'>
   <label for='offchangeLog'>Changelogs</label>
</div>

<!--[ Changelog ]-->
<input class='logInput hidden' id='offchangeLog' type='checkbox' />
<div class='changeLog'>
   <label class='logClose' for='offchangeLog'>
      <svg class='line' viewbox='0 0 24 24'><line x1='18' x2='6' y1='6' y2='18'/><line x1='6' x2='18' y1='6' y2='18'/></svg>
   </label>
   <div class='logContent'>
      <!--[ Changelog Heading ]-->
      <h2>Changelogs</h2>
      
      <!--[ Changelog Content ]-->
      <p>contents_here</p>
   </div>
</div>

You can change highlighted texts as you want in the code box!

Conclusion