We are also on YouTube! Subscribe

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!

  • Then Save HTML
  • Then go to the page/post or place which you want to add changelog
  • Then if you are doing this in page/post then don't forget to change Compose view to the HTML view
  • Now paste the following HTML code to that place
  • <div class='l'>
       <label for='offchangeLog'>Changelogs</label>
    <!--[ 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>
       <div class='logContent'>
          <!--[ Changelog Heading ]-->
          <!--[ Changelog Content ]-->

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

  • Then Save or Publish
  • Conclusion

    Hope this How to add a popup changelog feature in Blogger article will be useful to you, If you have any doubts or facing any issues while installing it then you can ask me in the comment, Do share with your friends, Thanks for visiting, Have a nice day!

    Rate this article

    Hi, I am Shiva I am a student I like to learn new things and share them with others.
    Buy Me a Coffe

    Post a Comment

    What do you think about this article?