Stay Connected With Us Follow Us Google News!

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
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

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

Changelog pop-up img

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.


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>

<!--[ 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>
   <div class='logContent'>
      <!--[ Changelog Heading ]-->
      <!--[ Changelog Content ]-->

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.


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:

About the Author

Hi, I’m Narayan Kir Known as Mack the founder of Gamingsalt. I dropped out in 2012 to pursue my passion in blogging, digital marketing and training. I help people like you to learn blogging …

Post a Comment

Please don't share any sensitive or personal details here.

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.