Description: Responsive embed your PDF files, or Microsoft Word .doc & Microsoft Excel .XLS documents into your Blogger Blog Post.
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.
Related Posts:
Go to your Blogger dashboard -> select your blog -> Template -> Edit HTMl -> Click anywhere on the source code and press Ctrl+F to find ]]></b:skin>. Paste the above code just above to ]]></b:skin> code.
Now, in your Blogger post editor, you can use the following code in your HTML tab to display your documents in full width.
The preview of above code is,
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.
Related Posts:
How to Embed PDF, Doc & XLS Files in Blogger Post
- Go to your Google drive account, and upload your file that you want to embed in your Blogger.
- 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)
https://drive.google.com/file/d/0BynUyePIYUATU3VFZHlKc1FuS1k/view?usp=sharing
You must replace the blue part of your link as here in the above link 'view?usp=sharing' with 'preview'. Once I change it in our example. I will look like as the following link.
https://drive.google.com/file/d/0BynUyePIYUATU3VFZHlKc1FuS1k/preview
- Now, we will use this link to embed in our blogger post. Copy the following code, and paste it to your Blogger post editor under HTML tab.
<iframe allowfullscreen="" frameborder="0" height="480" src="https://drive.google.com/file/d/0BynUyePIYUATU3VFZHlKc1FuS1k/preview" width="300"></iframe>
Here is a preview of above code,
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>.
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%;
}Go to your Blogger dashboard -> select your blog -> Template -> Edit HTMl -> Click anywhere on the source code and press Ctrl+F to find ]]></b:skin>. Paste the above code just above to ]]></b:skin> code.
Now, in your Blogger post editor, you can use the following code in your HTML tab to display your documents in full width.
<div class="bst-responsive">
<iframe allowfullscreen="" frameborder="0" src="https://drive.google.com/file/d/0BynUyePIYUATU3VFZHlKc1FuS1k/preview"></iframe></div>The preview of above code is,
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.
