Today, I am going to share how can you embed PDF, .DOC, .XLS or other documents in your Blogger blog. This question is asked by one of our Facebook page's fan. He also want to display the embed documents to different devices like mobile and tablet that means the embed code should be responsive. I will consider here to embed your pdf files in your blog for both types of design, responsive or non-responsive. If your Blogger template is responsive, you can use our responsive embed code to show your pdf files otherwise you can use the other one in which you can specify the width and height as per your requirement. If your blog is responsive, you may also like to read adding responsive social media buttons & responsive Facebook Fan page like box to your blog.

Basically Blogger doesn't allow you to upload any document files directly from your Blogger post editor. There are several third party websites that can do the job, but why do you need to go with third party websites, Google drive is here & free for you folks! You can use your Google drive cloud storage to upload a document such as pdf, doc or xls files, and anybody can access those documents if you have permitted. Therefore, here is a step by step guide to embed PDF files to Blogger post.

How to Embed PDF, Doc & XLS Files in Blogger Post

Once you have uploaded your PDF, DOC or XLS file to your Google drive account, double click on it. It will show you a live preview. Now, click on share button as in the following preview.

After that click on 'Advanced' placed at the bottom. Here you have to set the file access from private to public since you are going to embed your PDF file into your blog that can be seen by your readers.

Click on 'Change', and set it to 'Public'.

Now, click on 'Save' button.

Once you click on 'Save' button, you'll see a link underneath "Link to share" that would be look like as the following link. (I am considering a PDF file in the example)

Obviously, you can change the width and height of your embed code as per your requirement. Don't forget to change the direct link with your pdf file. If you want to display your PDF file into the center of your Blogger post just place the embed code between <center>YOUR CODE HERE </center>.

If you want to embed Google Docs, you can create it, and double click on the file that will open in new tab. Now click on 'File' -> 'Embed' set your width and height. Now, copy the iframe code that you can use it in your Blogger post. Now, let's go further to display embed code into responsive websites.

Embed PDF, DOC or XLS Files to Responsive Blogger Blogs

The responsive embed code will also work for the non-responsive blogs too as it considers the width from its parent container. We'll use a class here to wrap the iframe code to being it responsive. Therefore, the width of your document will cover the width of your post container, but height would be a difficult task here for me as I don't know the aspect ratio of your original document. However, I have fix the height but you can change it as per your requirement. Just copy the following CSS code,
.bst-responsive {
position: relative;
padding-bottom: 120%;
height: 0;
overflow: hidden;
}
.bst-responsive iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}

You can adjust the height by changing padding-bottom in the above CSS code.

Have you any doubt to embed any documents in your Blogger blog responsive? Don't hesitate to write your doubt in the following comment. If you like this post, appreciate your love by sharing this article.