ChatGPT: MENYEMATKAN (VIEW MODE)/Cara Embed Spreadsheet & Video Google Drive ke BLOGGER/Blogspot.com

on

📊 PART 1 — Embedding Spreadsheet / Office Files

1️⃣ Get the Shareable Link

  • Upload your .xls or .xlsx file to Google Drive.
  • Right-click → Get link.
  • Set permission: Anyone with the link → Viewer.
  • Example link:
    https://drive.google.com/file/d/1AbCDef123XYZ/view?usp=sharing

2️⃣ Convert Link for Embedding

Option A — Standard (Google Drive Preview)

Replace /view?usp=sharing with /preview:

https://drive.google.com/file/d/1AbCDef123XYZ/preview

Option B — Ideal (Publish via Google Sheets)

  1. Open the Excel file in Google Sheets.
  2. Go to File → Publish to web → Embed.
  3. Copy the iframe code provided:
<iframe 
  src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQXYZ123abc/
pubhtml?widget=true&headers=false"
  width="100%" 
  height="480">
</iframe>

3️⃣ Example Embed Codes

Simple (Google Drive Preview)

<div style="text-align:center;">
  <iframe 
     src="https://drive.google.com/file/d/1AbCDef123XYZ/preview"
     width="100%" 
     height="480"
     style="border:none; max-width:100%;">
  </iframe>
</div>

Interactive (Google Sheets Publish)

<div style="text-align:center;">
  <iframe 
     src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQXYZ123abc/
pubhtml?widget=true&headers=false"
     width="100%" 
     height="480"
     style="border:none; max-width:100%;">
  </iframe>
</div>

💡 Tips:

  • Convert to Google Sheets for interactive embedding.
  • .xls with /preview → static view only.
  • Use width="100%" for mobile responsiveness.


🎥 PART 2 — Embedding Audio/Video Files

1️⃣ Get the Shareable Link

  • Upload video/audio to Google Drive.
  • Right-click → Get link.
  • Set permission: Anyone with the link → Viewer.
  • Example link:
    https://drive.google.com/file/d/1abcDEF123xyz/view?usp=sharing

2️⃣ Convert to Embed URL

Change /view?usp=sharing → /preview.

Example:

https://drive.google.com/file/d/1abcDEF123xyz/preview

3️⃣ Embed with IFRAME

Basic Embed

<iframe 
  src="https://drive.google.com/file/d/FILE_ID/preview" 
  width="100%" 
  height="480" 
  allow="autoplay">
</iframe>

Responsive Blogger/WordPress Embed

<div style="text-align:center;">
  <iframe 
     src="https://drive.google.com/file/d/FILE_ID/preview"
     allow="autoplay"
     width="100%" 
     height="480"
     style="border:none; max-width:100%;">
  </iframe>
</div>

⚠️ Important Notes

  • Google Drive has traffic limits (quota exceeded error possible).
  • Always set permission to Anyone with link – Viewer.
  • Recommended format: MP4 for best compatibility.

🔗 Example Conversion

Before:
https://drive.google.com/file/d/13HC4s7YPTf4rFEDyBq9FuHhF_yaqgRTO/view?usp=sharing

Converted:
https://drive.google.com/file/d/13HC4s7YPTf4rFEDyBq9FuHhF_yaqgRTO/preview

Embed Code:

<div style="text-align:center;">
  <iframe 
     src="https://drive.google.com/file/d/13HC4s7YPTf4rFEDyBq9FuHhF_yaqgRTO/preview"
     allow="autoplay"
     width="100%" 
     height="480"
     style="border:none; max-width:100%;">
  </iframe>
</div>

Comments

Post a Comment