Home
blogger
how to

How to add Changelog Section for Blogger

How to add Changelog Section for Blogger

Hello Guys and welcome to Wolv Themes Our Tutorial today is about How to add Changelog Section for Blogger

Benefits

  1. Neumorphism Button Design.
  2. Change those old look buttons with new one that looks awesome.
Let's Start
Changelog Section Demo

How to add Changelog Section for Blogger :-

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 before ]]></b:skin>. 

/* Changelog */ .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:var(--fontBa);line-height:20px}.drK .changeLog{background-color:#1e1e1e}.drK .logContent{background-color:#1e1e1e}
Step 5 :- Replace all the blue background marked parts according to your theme.

Step 6 :- Add this Html code to use the button in your posts or pages 

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

Replace the Blue Background Highlighted Things with your own and click save.

2 comments

  1. Amazing guide