How to add a cool pop-up changelog feature in Blogger website

if you're looking for instructions on how to add a cool popup changelog feature in Blogger website. This tutorial is just for you

You may be aware that using different third-party plugins or code libraries to add a pop-up changelog feature slows down the website's loading time. So read this text without hesitation even if you are not familiar with coding, you can still add a fantastic pop-up changelog feature to your website. If you follow my instructions, the task will be completed with stunning results.

This is NK. For a very long period, I have been working with coding. From my extensive knowledge, I will provide you with sound adviced, so let's get started.

Are you concerned about the speed of your website? We just utilised HTML and CSS here. So don't worry it won't slow down your website.

The popup changelog's added feature is that you may add content to it instead of only changelogs, and it has a close button. Do you whine about how perfectly your website functions in dark mode even if it has a dark mode feature?

Don't worry about it either. Added to this changelog point is dark mode. By carefully following this instruction, you can easily change the dark mode class that we provided with your theme's dark mode class in CSS.

So without wasting too much time let's check how to add a cool popup changelog feature in Blogger website.

Demo

How to add a cool popup changelog in Blogger website?

ImportantBefore 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 on Theme.

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

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

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

 /* Changelog by mack gamingsalt media */
.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 pop-up 

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

Think of preserving the credits in canons so that you can enjoy our workshop.

This content may not be modified in any way. It is strictly forbidden to copy this post, the canons, or any other component of the composition without permission. However, if you do, legal action will be taken against you.

Conclusion

I hope this tutorial on how to add a cool pop-up changelog feature in Blogger website will be helpful to you. If you have any questions or run into any problems while installing it, feel free to ask me in the comments. 

I appreciate your visit. Enjoy your day!

© Copyright:
www.gamingsalt.com