How to add Popup Changelog in Blogger

In this post will show you how to add a nice popup changelog feature to your blogger or wordpress website.

You may be aware that adding a popup changelog feature necessitates the use of various third-party plugins or code libraries, which slow down the website's loading speed. So don't be afraid to read this post today; even if you don't know how to code, you can add an awesome popup changelog feature to your website. You will work the way I instruct you, and the end result will be stunning.

I'm Farhan. I've been doing programming for a long time. Let me begin by giving you sound advice based on my extensive experience.

How to add popup changelog in Blogger

We only used HTML and CSS, not JS. Are you upset about the speed of your website? Not to worry, it won't slow down your site.

Another thing about the popup changelog is that you can add content to it instead of the changelog, and the popup also has a button to close it. Your website has a "dark mode" feature, and you're complaining that it works perfectly in that mode?

Also, don't worry about the fact that this changelog point also has dark mode CSS. If you just want to change the dark mode class that we gave you for your theme, you can do so easily by following this tutorial.

So, let's not waste any more time and look at how to add a pop-up changelog to 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 PGilvey */ .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

If you like our work, you might want to keep the credits in canons.

We don't let anyone change this post in any way. It is strictly against the law to copy this post, its canons, or any other part of this piece without permission. But if you do that, you will be in trouble with the law.

Conclusion

Hope this article about How to add a pop-up changelog to Blogger will be helpful to you. If you have any questions or run into problems while installing it, please let me know in the comments. Thank you for coming, Have a pleasant day!

Rate This Article

Thanks for reading: How to add Popup Changelog in Blogger, Stay tune to get latest Blogging Tips.