Are you looking to share a PDF document on your Blogger blog? Embedding PDFs directly into your posts can make them more engaging and informative for your readers. In this tutorial, we'll show you how to easily embed a PDF using Google Docs Viewer.
Step 1: Upload your PDF to Google Drive
Begin by uploading your PDF document to Google Drive. Ensure that the document is set to "Anyone with the link can view" to make it accessible to everyone.
Step 2: Get the Shareable Link
Once your PDF is uploaded, right-click on the file and select "Get link." Ensure that the link sharing setting is set to "Anyone with the link."
Step 3: Get the PDF ID
Copy the ID portion of the link. This is the part located between "/d/" and "/view."
Step 4: Generate the Embed Code
Use the following HTML code to generate the embed code:
```html
<div style="overflow: hidden; position: relative; width: 100%; padding-top: 56.25%;">
<iframe src="https://docs.google.com/viewer?url=https://drive.google.com/uc?id=YOUR_PDF_ID_HERE&embedded=true" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0"></iframe>
</div>
```
Replace "YOUR_PDF_ID_HERE" with the PDF ID you copied in Step 3.
Step 5: Embed the PDF in Your Blogger Post
Go to your Blogger dashboard and create a new post. Switch to the HTML view and paste the generated embed code where you want the PDF viewer to appear in your post.
Step 6: Preview and Publish
Preview your post to ensure the PDF viewer is displaying correctly. Once you're satisfied, click "Publish" to make your post live.
That's it! You've successfully embedded a PDF document in your Blogger post using Google Docs Viewer. Now your readers can easily view and interact with your PDF content directly from your blog.
Happy Blogging! 😊
How to Embed a PDF in Your Blogger Post.
Reviewed by Surjeet Roy
on
May 08, 2024
Rating:
No comments:
To insert a short code, use & lt; i rel = & quot; code & quot; & gt; ... CODE ... & lt; / i & gt;
To insert a long code, use & lt; i rel = & quot; pre & quot; & gt; ... CODE ... & lt; / i & gt;
To insert an image, use & lt; i rel = & quot; image & quot; & gt; ... PICTURE URL ... & lt; / i & gt;