How to Embed a PDF in Your Blogger Post.

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. How to Embed a PDF in Your Blogger Post. Reviewed by Surjeet Roy on May 08, 2024 Rating: 5

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;

Powered by Blogger.