Add Popup Changelog in Blogger

 

Hi to all, in this article I am going to tell you all about how to add popup changelog feature in blogger website easily in just few minutes.

You all may be searching a way to add changelog without creating any extra pages for that, so we made this article for you to make a changelog with any extra page and you can create a popup in the same page that no need to create an extra page.

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

Here we are only using HTML and CSS not JS usage, If you are worrying about your website speed then don not worry it does not affect your website speed or any other.

If your website have dark mode feature and worrying about this changelog then don't worry, this changelog will work in dark mode too, for that you just need to change the class name instead of default class in the code.

So read the below provided steps carefully to get clear understanding about adding popup feature in blogger website without any error or issue.

Steps to Add Popup Changelog in Blogger

---

Login to Blogger Dashboard

First of all you need to visit official blogger website.

Now you need to login to your blogger website dashboard by using your login credentials.

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!

Open Blogger Theme Editor

If you want to open your blogger website theme editor then you need to follow below provided path:

Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on Edit HTML -> Blogger theme editor section.

Adding CSS Code

Go to blogger theme editor.

Now find ]]></b:skin> and paste the following CSS just above it.

.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}

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

Now you need to save the code.

Now you need to go to the page or post or place which you want to add this changelog feature.

Change the compose view to HTML view.

Now you need to copy below provide HTML code and paste the copied code in the post or page.

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

After adding the code you need inside your post or page, then you nee to click on publish or update.

Conclusion

---

I hope that you all have understood about adding popup changelog in your blogger website easily in just few minutes without any issue or error.

If you have any doubts related to this article then feel free to contact us through contact page.