How to add a popup changelog feature in Blogger

If you are looking for how to add a nice popup changelog feature to blogger or wordpress website then this post is just for you.

You may know that adding popup changelog feature requires the use of various third-party plugins or code libraries, which slow down the loading speed of the website. So no problem read this post today, even if you don't know coding you can add awesome popup changelog feature to your website. You will work the way I tell you and the result will be beautiful when the job is done.

I am Monish. I have been involved with coding for a long time. I will give you proper advice from long experience so let's start.

We only used then HTML and CSS not JS operation, Are you upset about your website speed? do not worry it doesn't affect your website speed.

The popup changelog more thing is that you can produce content on it rather of changelog also and the popup also closable view gave close button. Your website has a dark mode function and you fussing about it works impeccably in dark mode?

Also do not worry about it this changelog point 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 fluently change it by following this tutorial precisely.

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

Demo

How to add a popup changelog in Blogger?

Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On Blogger Dashboard, click Theme.

Step 3: Click the arrow down icon next to 'customize' button.

Step 4: Click Edit HTML, you will be redirected to editing page.

Step 5: Now search the code ]]></b:skin> or /*]]>*/</style> and paste the following CSS Codes just above to it.

/* Changelog by The Pro Project*/ .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!

Step 6: Save the html changes by clicking on this icon

Step 7: Then go to the page/post or place which you want to add Changelog

Step 8: Then if you are doing this in page/post then don't forget to change Compose view to the HTML view

Step 9: Now paste the following HTML code to that place

<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!

Step 10: Then Save or Publish.

Terms of Use

To appreciate our workshop, consider keeping the credits in canons.

We do not allow to rewrite this post in any manner. Do not copy this post, canons or any part from this composition without authorization, it's rigorously prohibited.However, Legal conduct will be taken, If you do so.

Conclusion

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