Google sheets Jobs - Qwen2.5 (Please Check Procedure to Add in Blogger)

Page Title Enhanced Vertical Tables with Sharing Buttons

Procedure

1. Fist Go to Blogger template EDIT HTML and paste the below code and you'll get the error for special characters &. To avoid this add & replace wherever  you find this special character.
2. Now Paste the CSS Code in the Template EDIT HTML
3. Now paste the Dynamic Script code in the Post pages
4. Replace 'Your Google Sheet ID' and Edit Sheet Range.

PASTE THIS CSS CODE IN THE TEMPLATE

  <title>Enhanced Vertical Tables with Sharing Buttons</title>
  <style>
    body.vertical-tables-page {
      font-family: Arial, sans-serif;
      margin: 20px;
      line-height: 1.6;
      background-color: #f4f4f9;
    }

    h1.table-title {
      text-align: center;
      color: #333;
      font-size: 24px;
      margin-bottom: 15px;
    }

    .table-container-vertical {
      margin-bottom: 20px;
    }

    .vertical-table-section {
      border: 1px solid #ddd;
      padding: 20px;
      border-radius: 15px;
      background-color: #fff;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .header-row-vertical {
      background-color: #f0f0f0;
      padding: 10px;
      border-bottom: 1px solid #ddd;
      text-align: center;
      font-weight: bold;
      font-size: 18px;
      color: #333;
      margin-bottom: 15px;
    }

    .row-item-vertical {
      margin-bottom: 0;
      padding: 10px;
      border-bottom: 1px solid #eee;
      transition: background-color 0.3s ease;
    }

    .row-item-vertical:hover {
      background-color: #f9f9f9;
    }

    .row-item-vertical span {
      font-weight: bold;
      margin-right: 10px;
      color: #555;
    }

    .clickable-link-vertical {
      color: #007bff;
      text-decoration: none;
      font-weight: bold;
    }

    .clickable-link-vertical:hover {
      text-decoration: underline;
      color: #0056b3;
    }

    .hidden-column-vertical {
      display: none;
    }

    .read-more-btn-vertical {
      display: block;
      margin-top: 15px;
      padding: 12px 25px;
      background-color: #007bff;
      color: white;
      border: none;
      cursor: pointer;
      border-radius: 8px;
      text-align: center;
      font-size: 16px;
      transition: background-color 0.3s ease;
    }

    .read-more-btn-vertical:hover {
      background-color: #0056b3;
    }

    /* Social Media Sharing Buttons */
    .share-buttons-container {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 15px;
    }

    .share-button {
      background-color: #007bff;
      color: white;
      padding: 10px 15px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: background-color 0.3s ease;
    }

    .share-button:hover {
      background-color: #0056b3;
    }

    .share-button img {
      width: 20px;
      height: 20px;
    }

    @media (max-width: 600px) {
      .vertical-table-section {
        padding: 15px;
      }
      .row-item-vertical {
        padding: 8px;
      }
    }
  </style>

PASTE THIS SCRIPT IN THE EDIT HTML TEMPLATE 
<script>
  // Main Script: To be added in the Blogger template (static part)

  // Function to fetch data from Google Sheets using gviz/tq endpoint
  async function fetchSheetData(sheetID, range) {
    try {
      const url = `https://docs.google.com/spreadsheets/d/${sheetID}/gviz/tq?tqx=out:json&range=${range}`;
      const response = await fetch(url);
      const data = await response.text();

      // Parse the JSONP response
      const jsonStart = data.indexOf('{');
      const jsonEnd = data.lastIndexOf('}');
      const jsonData = JSON.parse(data.substring(jsonStart, jsonEnd + 1));

      // Extract table headers and rows
      const headers = jsonData.table.cols.map(col => col.label || '');
      const rows = jsonData.table.rows.map(row => row.c.map(cell => cell?.v || ''));

      return { headers, rows };
    } catch (error) {
      console.error("Error fetching spreadsheet data:", error);
      return { headers: [], rows: [] };
    }
  }

  // Function to check if a string is a valid URL
  function isValidUrl(str) {
    try {
      new URL(str); // Attempt to construct a URL object
      return true;
    } catch (_) {
      return false;
    }
  }

  // Function to generate enhanced vertical tables dynamically
  async function generateVerticalTables(sheetID, range, containerId, websiteLink) {
    const container = document.getElementById(containerId);
    container.innerHTML = ""; // Clear previous content

    const { headers, rows } = await fetchSheetData(sheetID, range);

    if (rows.length === 0) {
      container.innerHTML = "<p>No data available.</p>";
      return;
    }

    // Generate a table for each row
    rows.forEach((row, rowIndex) => {
      const tableContainer = document.createElement("div");
      tableContainer.className = "table-container-vertical";

      // Add title for the table (first cell as a heading)
      const tableTitle = document.createElement("div");
      tableTitle.className = "header-row-vertical";
      tableTitle.textContent = row[0]; // First cell as the title
      tableContainer.appendChild(tableTitle);

      // Create vertical rows for each table
      const tableDiv = document.createElement("div");
      tableDiv.className = "vertical-table-section";

      // Add key-value pairs for each column
      row.forEach((cell, cellIndex) => {
        const rowItem = document.createElement("div");
        rowItem.className = "row-item-vertical";

        // Check if the cell contains a valid URL
        if (isValidUrl(cell)) {
          const link = document.createElement("a");
          link.href = cell;
          link.textContent = "Visit";
          link.target = "_blank"; // Open in a new tab
          link.className = "clickable-link-vertical";
          rowItem.innerHTML = `<span>${headers[cellIndex]}:</span> `;
          rowItem.appendChild(link);
        } else {
          rowItem.innerHTML = `<span>${headers[cellIndex]}:</span> ${cell}`;
        }

        // Hide columns beyond the 5th column initially
        if (cellIndex >= 5) {
          rowItem.classList.add("hidden-column-vertical");
        }

        tableDiv.appendChild(rowItem);
      });

      // Append the vertical table to the container
      tableContainer.appendChild(tableDiv);

      // Add "Read More" button for this table
      const readMoreBtn = document.createElement("button");
      readMoreBtn.className = "read-more-btn-vertical";
      readMoreBtn.textContent = "Read More";
      let isExpanded = false; // Track the state of the button
      readMoreBtn.onclick = () => {
        const hiddenColumns = tableDiv.querySelectorAll(".hidden-column-vertical");
        hiddenColumns.forEach(column => {
          if (isExpanded) {
            column.classList.add("hidden-column-vertical"); // Collapse
          } else {
            column.classList.remove("hidden-column-vertical"); // Expand
          }
        });
        isExpanded = !isExpanded; // Toggle the state
        readMoreBtn.textContent = isExpanded ? "Read Less" : "Read More";
      };
      tableContainer.appendChild(readMoreBtn);

      // Add sharing buttons
      const shareButtonsContainer = document.createElement("div");
      shareButtonsContainer.className = "share-buttons-container";

      // Helper function to create a share button
      function createShareButton(platform, iconSrc, shareUrl) {
        const button = document.createElement("button");
        button.className = "share-button";
        button.onclick = () => window.open(shareUrl, "_blank", "width=600,height=400");

        const icon = document.createElement("img");
        icon.src = iconSrc;
        icon.alt = platform;

        const text = document.createTextNode(platform);
        button.appendChild(icon);
        button.appendChild(text);

        return button;
      }

      // Prepare half of the data for sharing
      const halfData = row.slice(0, Math.ceil(row.length / 2)).map((cell, index) => `${headers[index]}: ${cell}`).join("\n");
      const shareMessage = `${halfData}\n\nKnow More Details: ${websiteLink}`;

      // Create X (Twitter) button
      const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareMessage)}`;
      shareButtonsContainer.appendChild(createShareButton("X", "https://upload.wikimedia.org/wikipedia/commons/6/6f/Logo_of_Twitter.svg", twitterUrl));

      // Create Facebook button
      const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(websiteLink)}&quote=${encodeURIComponent(shareMessage)}`;
      shareButtonsContainer.appendChild(createShareButton("Facebook", "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg", facebookUrl));

      // Create WhatsApp button
      const whatsappUrl = `https://wa.me/?text=${encodeURIComponent(shareMessage)}`;
      shareButtonsContainer.appendChild(createShareButton("WhatsApp", "https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg", whatsappUrl));

      // Append sharing buttons to the table container
      tableContainer.appendChild(shareButtonsContainer);

      // Append the table container to the main container
      container.appendChild(tableContainer);
    });
  }
</script>
PASTE THIS SCRIPT IN THE POST PAGES.

FOR POST
<div id="table-container-vertical"></div>

<script>
  // Dynamic Script: To be added in each Blogger post
  const sheetID = 'Your Google Sheet ID'; // Replace with your Google Sheet ID
  const range = 'Sheet12!Q2:S27'; // Adjust this range to fetch more rows
  const containerId = 'table-container-vertical'; // ID of the container where the table will be rendered
  const websiteLink = 'https://www.yourwebsite.com'; // Your website link

  // Call the main function to generate the tables
  window.onload = async () => {
    await generateVerticalTables(sheetID, range, containerId, websiteLink);
  };
</script>

FOR POST 1
<div id="table-container-vertical"></div>

<script>
  const sheetID = 'Your Google Sheet ID';
  const range = 'Sheet12!Q2:S27';
  const containerId = 'table-container-vertical';
  const websiteLink = 'https://www.yourwebsite.com/post1';

  window.onload = async () => {
    await generateVerticalTables(sheetID, range, containerId, websiteLink);
  };
</script>
FOR POST2
<div id="table-container-vertical"></div>
<script>
  const sheetID = 'Your Google Sheet ID';
  const range = 'Sheet13!A1:D10';
  const containerId = 'table-container-vertical';
  const websiteLink = 'https://www.yourwebsite.com/post2';

  window.onload = async () => {
    await generateVerticalTables(sheetID, range, containerId, websiteLink);
  };
</script>

Tags

You may like these posts

Show more

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !