Home
blogger
how to

How to Make Changelog Section

Step 1 :- Go to Blogger's dashboard and click theme. Step 2 :- Click the arrow down icon next to the 'customize' button. Step 3 :- Click Edit Html. ..

 Hello Guys and welcome to Wolv Themes Our Tutorial today is about How To Make Changelog Section In Posts.

What is the changelog :-

the changelog is something like the calendar it have all the changed that happened to the product.

It's Benefits :-

  1. Nice opening and smooth
  2. Stylish ordering and not complicated
Let's Start

How To Make Changelog :- 

this tutorial is for median ui, fletro pro, imagz users only

if you already have this code then you don't have to add this css code

Step 1 :- Go to Blogger's dashboard and click theme.
Step 2 :- Click the arrow down icon next to the 'customize' button.
Step 3 :- Click Edit Html.
Step 4 :- Click on any word then Press CTRL + F and type in the search form ></b:skin>.
Step 5 :- Copy the provided below code and paste it just above ></b:skin>.
  /* Changelog */
.changeLog, .purchase{position:fixed;bottom:0;left:0;right:0;margin:0;padding:40px 0;width:100%;height:100%;background-color:#fefefe;font-size:15px;z-index:22;-webkit-transition:all .1s ease;transition:all .1s ease;overflow-y:auto;opacity:0;visibility:hidden}
.changeLog .logClose, .purchaseClose{display:flex;align-items:center;height:22px;position:absolute;top:20px;right:25px}
.changeLog .logClose:before, .purchaseClose:before{content:'Close';font-size:11px;padding-right:8px;font-family:var(--font-body)}
.Blog .post .logContent h2{margin-top:10px}
.Blog .post .logContent ol, 
.Blog .post .logContent ul{padding-left:30px}
.logInput:checked ~ .changeLog, .purchaseInput:checked ~ .purchase, .purchaseInput:checked ~ .purchase .fullClose{opacity:1;visibility:visible}
Step 6 :- Come Back To Blogger's Dashboard and click posts.
Step 7 :- Select The post that you want to add the changelog in or Create New Post.
Step 8 :- Click the pen button and press HTML view.
Step 9 :- Paste the following provided code where you want the changelog button.
<label for="offchangeLog"><u>Changelog</u></label>
Step 10 :- Paste The Following Code in the last of the post Html Codes.
</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 postSection'>
    <h2>Product Name Changelog</h2>
    
    <p>- Update time here 1</p>
    <ol>
      <li>changelog name</li>
      <li>changelog subname 1
        <ul>
          <li>changelog subname 2</li>
        </ul>
      </li>
      <li>Feature 1</li>
      <li>Feature 2</li>
      <li>Feature 3</li>
      <li>changelog subname 3:
        <ul>
      <li>Feature 1</li>
      <li>Feature 2</li>
      <li>Feature 3</li>
      <li>Feature 4</li>
      <li>Feature 5</li>
      <li>Feature 6</li>
      <li>Feature 7</li>
      <li>Feature 8</li>
        </ul>
      </li>
      <li>Improvements:
        <ul>
      <li>Feature 1</li>
      <li>Feature 2</li>
      <li>Feature 3</li>
      <li>Feature 4</li>
      <li>Feature 5</li>
      <li>Feature 6</li>
      <li>Feature 7</li>
      <li>Feature 8</li>
        </ul>
      </li>
    </ol>
    
    <p>- Update time here 2</p>    
    <ol>
      <li>changelog name</li>
      <li>changelog subname
        <ul>
          <li>Feature 1</li>
          <li>Feature 2</li>
        </ul>
      </li>
      <li>Feature 1</li>
      <li>Feature 2</li>
      <li>Feature 3</li>
      <li>Feature 4</li>
      <li>Feature 5</li>
      <li>Feature 6</li>
      <li>Feature 7</li>
      <li>Feature 8</li>
        </ul>
      </li>
    </ol>
    
    <p>- Update time here 3</p>    
    <ol>
      <li>changelog name</li>
      <li>changelog subname 1:
        <ul>
      <li>Feature 1</li>
      <li>Feature 2</li>
      <li>Feature 3</li>
      <li>Feature 4</li>
      <li>Feature 5</li>
      <li>Feature 6</li>
      <li>Feature 7</li>
      <li>Feature 8</li>
        </ul>
      </li>
      <li>changelog subname 2:        
      <ul>
      <li>Feature 1</li>
      <li>Feature 2</li>
      <li>Feature 3</li>
      <li>Feature 4</li>
      <li>Feature 5</li>
      <li>Feature 6</li>
      <li>Feature 7</li>
      <li>Feature 8</li>
        </ul>
      </li>
      <li>changelog subname 3:        
      <ul>
      <li>Feature 1</li>
      <li>Feature 2</li>      
      <li>Feature 3</li>      
      <li>Feature 4</li>
      <li>Feature 5</li>      
      <li>Feature 6</li>      
      <li>Feature 7</li>      
      <li>Feature 8 </li>
        </ul>
      </li>
    </ol>
    
    <p>- Update time here 4</p>    
    <ol>
      <li>Feature 1</li>
      <li>Feature 2</li>      
      <li>Feature 3</li>      
      <li>Feature 4</li>
      <li>Feature 5</li>      
      <li>Feature 6</li>      
      <li>Feature 7</li>
      <li>Feature 8</li>
    </ol>
    
    <p>- Update time here 5</p>    
    <ol>
      <li>Feature 1</li>
      <li>Feature 2</li>      
      <li>Feature 3</li>      
      <li>Feature 4</li>
      <li>Feature 5</li>      
      lt;li>Feature 6</li>      
      <li>Feature 7</li>      
      <li>Feature 8</li>    
      </ol>
    
    <p>- Update time here 6</p>    
    <ol>
      <li>Feature 1</li>
      <li>Feature 2</li>      
      <li>Feature 3</li>      
      <li>Feature 4</li>
      <li>Feature 5</li>      
      <li>Feature 6</li>      
      <li>Feature 7</li>      
      <li>Feature 8</li>    
      </ol>
    
    <p>- Update time here 7</p>    
    <ol>
      <li>changelog subname 1</li>
    </ol>
    
    <p>- Update time here 8</p>        
    <ol>
      <li>changelog subname 1:
        <ul>
      <li>Feature 1</li>
      <li>Feature 2</li>
      <li>Feature 3</li>
      <li>Feature 4</li>
      <li>Feature 5</li>
      <li>Feature 6</li>
      <li>Feature 7</li>
      <li>Feature 8</li>
        </ul>
      </li>
      <li>changelog subname 2</li>
    </ol>
  </div>-->

Fast Documentation

  1. replace Dates with the real dates
  2. replace changelog name with the changelog name of your product
  3. replace changelog subname with the changelog subname
  4. replace feature 1,2,3,4,5,6,7,8 with your changelog features
  5. to remove feature remove from <li> to </li>
  6. to add feature copy this code    <li>Feature 1</li> and replace it with the feature name

Post a Comment