How to add Popup Changelog in Blogger

Hello guys. how are you? I hope you are all good. In this post I will show you how to add a nice popup changelog feature to your blogger 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 write 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.

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.

Before create this let's see a preview

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. Or you can paste it above <head/> tag by adding <style></style>

 /* Changelog by FreemiumTech */ .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 didn't have a dark mode feature then keep default!

Step 6: Save the changes code by clicking on this Save 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.

CONCLUSION

In this article, I shared with you How to add Popup Changelog in Blogger? I hope you have liked It. Please do share it with your friends and follow our blog for more.

Join our Telegram Channel to get the lastest posts updates daily.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken.