ONE ssss: CODE : blogger post list theme

<style>

#opensite {
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 99999999;
    color: black;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
     
     
     
       #post-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
    }

.post-div {
      width: auto;
      height: 100px;
      background-color: #3498db;
      color: #fff;
      font-size: 15px;
      line-height: 100px;
      cursor: pointer;
      transition: background-color 0.3s;
      display: inline-block;
      margin-right: 10px;
      text-align: center;
      vertical-align: middle;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      padding: 2%;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      cursor: pointer;
      background-color: white;
      color: black;
      transition: background-color 1s;
      border-radius: 0;
    }

.post-div:hover {
      background-color: #FFD700;
      box-shadow: 0 0 500px yellow;
      color: blue;
    }

.post-div-sp {
      width: auto;
      height: 100px;
      background-color: #3498db;
      color: #fff;
      font-size: 15px;
      line-height: 100px;
      cursor: pointer;
      transition: background-color 0.3s;
      display: inline-block;
      margin-right: 10px;
      text-align: center;
      vertical-align: middle;
      border-radius: 10px;
      box-shadow: 1px 1px 5px grey;
      padding: 2%;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      cursor: pointer;
      background-color: black;
      color: white;
      transition: background-color 1s;
      border-radius: 0;
    }

.post-div-sp:hover {
      background-color: white;
      box-shadow: 0 0 500px white;
      color: black;
    }
    #iframe {
      position: fixed;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      z-index: 99999;
      border: none;
      outline: none;
      backdrop-filter: blur(20px);
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
    }
    
     
      #iframe-buttons {
      display:none;
      position: fixed;
      top: 4%;
      left: 80%;
      z-index: 100000;
    }

.iframe-buttona {
      width: 30px;
      height: 30px;
      background-color: blue;
      color: #fff;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      margin-right: 5px;
    }
    
    .iframe-buttonb {
      width: 30px;
      height: 30px;
      background-color: red;
      color: #fff;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      margin-right: 5px;
    }
    
    
    
        
.headerif {
   margin: 0;
  text-align: center;
            background-color: #333;
            color: #fff;
            padding: 20px 0;
        }

.motto {
        font-family:courier, courier new, serif;
            color: white;
        }

.tagline {
        font-family:arial, verdana, sans-serif;
            color: white;
        }

</style>

<div id="opensite">
  <h1>Loading...</h1><br />
  <span>Programmed by Subham Mandal</span>
</div>

<div class="headerif">
        <h1>ONESSSSWEB</h1>
        <p class="motto">Simple Smart Standard System</p>
        <p class="tagline">Programmed by Subham Mandal</p>

</div>
      <br />
      
      <br />

</center>

// Gradually expand the iframe to 90% height and width
      let width = 0;
      let height = 0;

// Function to center the iframe on the page
    function centerIframe() {
      const iframe = document.getElementById('iframe');
      const windowWidth = window.innerWidth;
      const windowHeight = window.innerHeight;
      const iframeWidth = iframe.offsetWidth;
      const iframeHeight = iframe.offsetHeight;

const left = (windowWidth - iframeWidth) / 2;
      const top = (windowHeight - iframeHeight) / 2;

iframe.style.left = left + 'px';
      iframe.style.top = top + 'px';
    }

fetch('https://www.googleapis.com/blogger/v3/blogs/2693207758598499829/pages?key=AIzaSyDEhgVwwkCTst0V1DOZUKvtjaXBppuMI3M&maxResults=500&startIndex=0')
      .then(response => response.json())
      .then(data => {
      
        const postList = document.getElementById('post-list');
        const reversedItems = data.items;

setTimeout(() => {
                    document.getElementById('opensite').style.display = 'none';
                }, 1000);
                nowpost();
        reversedItems.forEach((post, index) => {
          const div = document.createElement('div');
          div.classList.add('post-div-sp');

// Add an event listener to open the iframe when the div is clicked
          div.addEventListener('click', () => {
            const newIframeURL = 'https://' + post.url.slice(7);

// Remove the existing iframe
            const iframe = document.getElementById('iframe');
            iframe.remove();

// Create a new iframe element
            const newIframe = document.createElement('iframe');
            newIframe.id = 'iframe';
            newIframe.onload=showButtons;
            document.body.appendChild(newIframe);

openIframe(newIframeURL);
          });

// Create a clickable link within the div
          const link = document.createElement('span');
          link.target = '_blank'; // Open link in a new tab
          link.textContent = `${data.items.length - index}. ${post.title}`;

div.appendChild(link);
          postList.appendChild(div);
        });
      })
      .catch(error => {
        alert(error);
      });
      
      
      function nowpost(){
      
  fetch('https://www.googleapis.com/blogger/v3/blogs/2693207758598499829/posts?key=AIzaSyDEhgVwwkCTst0V1DOZUKvtjaXBppuMI3M&maxResults=500&startIndex=0')
      .then(response => response.json())
      .then(data => {
        const postList = document.getElementById('post-list');
        const reversedItems = data.items;

setTimeout(() => {
                    document.getElementById('opensite').style.display = 'none';
                }, 1000);
                
        reversedItems.forEach((post, index) => {
          const div = document.createElement('div');
          div.classList.add('post-div');

// Add an event listener to open the iframe when the div is clicked
          div.addEventListener('click', () => {
            const newIframeURL = 'https://' + post.url.slice(7);

// Remove the existing iframe
            const iframe = document.getElementById('iframe');
            iframe.remove();

openIframe(newIframeURL);
          });

div.appendChild(link);
          postList.appendChild(div);
        });
      })
      .catch(error => {
        alert(error);
      });
      
      
      }
      
        function showButtons() {
        setTimeout(function(){document.querySelector('#iframe-buttons').style.display = 'block';    
   },1000);
      }

function openInNewTab() {
      const iframe = document.getElementById('iframe');
      if (iframe.src) {
        window.open(iframe.src, '_blank');
      }
    }

// Function to remove the iframe
    function removeIframe() {
      const iframe = document.getElementById('iframe');
      if (iframe) {
        iframe.style.display='none';
        document.querySelector('#iframe-buttons').style.display = 'none';  
      }
    }

</script>

var urlPrefix = 'https://onessssweb.blogspot.com/?fbclid';

if (!currentUrl.startsWith(urlPrefix)) {

document.getElementById('openbox').style.display = 'none';
  document.getElementById('opensite').style.display = 'none';
}

}
else{document.getElementById('openbox').style.display='block';
document.getElementById('opensite').style.display = 'flex';
}
</script>