A Step-by-Step Guide to Publishing PDFs in Your Blogger Post

Are you keen on enhancing your Blogger posts by adding PDF files? Integrating PDFs into your blog can be valuable if you wish to share documents, reports, or guides with your audience. Thankfully, Blogger makes it a breeze to upload and share PDFs alongside your written content. This guide will walk you through the simple steps to publish PDFs in your Blogger posts.

Step 1: Prepare Your PDF File

Before you commence, ensure you have the PDF file ready for uploading. This could be a document you've created yourself or one you've obtained from another source. Make certain the content is refined and relevant to your blog post's topic.

Step 2: Upload Your PDF to Google Drive

To effortlessly embed PDFs into your Blogger post, you'll need to host the file online. Google Drive provides a convenient solution for this. Follow these steps to upload your PDF to Google Drive:

1. Go to Google Drive and sign in with your Google account.
2. Click on the "New" button and select "File upload."
3. Choose the PDF file from your computer and click "Open" to upload it to your Google Drive.

Step 3: Share the PDF Link

Once your PDF is uploaded to Google Drive, you must generate a shareable link. Here's how:

1. Right-click on the PDF file you uploaded and select "Share."
2. In the sharing settings, click "Get link" to generate a shareable link.
3. Ensure the link sharing is set to "Anyone with the link can view."
4. Copy the generated link.

PDF is ready now we have added this to the blogger post.

Let's Start the Next Process

Copy below CSS code and paste it into your theme custom CSS. (Follow the Youtube Video)

.pdf-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
}
.pdf-container {
	position: relative;
	width: 600px;
	aspect-ratio: 1/1.399;
}
.pdf-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.download-wrapper {
	text-align: center;
	margin: 30px 0;
}
.pdfdownload-btn {
	padding: 8px 15px;
	border-radius: 50px;
	background-color: blue;
	color: white;
	border: none;
	outline: none;
    cursor: pointer;
}

Step 4: Embed the PDF in Your Blogger Post

Now that you have the shareable link, you can embed the PDF into your Blogger post. Follow these steps:

1. Sign in to your Blogger dashboard.
2. Create a new post or edit an existing one.
3. Copy below code and paste it where you want to show your PDF

Make sure you replace the pdf google drive link with your link.

<div class="pdf-wrapper">
   <div class="pdf-container">
      <iframe
         class="pdf-viewer"
         src="YOUR_PDF_LINK_HERE"
         frameborder="0"
         ></iframe>
   </div>
</div>
<div class="download-wrapper">
   <button class="pdfdownload-btn">Download</button>
</div>

Step 5: Final Step!

Copy below code and paste it at the bottom of your post.

<script>
   const downloadBtns = document.querySelectorAll(".pdfdownload-btn");
   downloadBtns.forEach(function (btn, index) {
     btn.addEventListener("click", function () {
       const pdfViewer = document.querySelectorAll(".pdf-viewer")[index];
       const pdfSrc = pdfViewer.src;
       const fileId = pdfSrc.match(/\/file\/d\/(.+)\/preview/)[1];
       const downloadUrl = `https://drive.google.com/uc?export=download&id=${fileId}`;
       window.open(downloadUrl, "_blank");
     });
   });
</script>

Step 5: Preview and Publish Your Post

Before publishing your post, it's wise to preview it to ensure everything looks as intended. Click on the "Preview" button to see how the PDF is displayed within your post. Once you're satisfied, you can publish your post for your audience to see.

Conclusion

Incorporating PDFs into your Blogger posts can enrich your content and provide valuable resources for your readers. By following these simple steps, you can easily upload and share PDF files alongside your written content. Whether you're sharing documents, reports, or guides, integrating PDFs into your Blogger posts is a straightforward process that can elevate your blogging experience. Give it a try and witness how it enhances your blogging journey!

Youtube Video Tutorial