How To Embed PDF and other Documents In Blogger Blog Posts

Advertisements
One of our readers requested us to figure out how they can embed PDFs in their Blogger blog. There are many ways through which we can embed PDFs or other documents like Microsoft Word, Spreadsheets, PowerPoint Slides, and Excel Spreadsheets into our Blogger Blog. However, Google Docs is probably the most authentic and reliable way of embedding the PDF documents in a website. Therefore, today in this article, we will show you How to Embed PDFs or any other documents in Blogger Blog Posts.

First, go to https://drive.google.com and Sign in into your Gmail or Google account so that you have the admin privilege to the documents that would upload from your system hard drive. 

After signing in to your Google account, the next thing is to upload a PDF file from your system hard drive. On pressing the upload icon from the left side panel a drop down menu will pop out which would consist of two options i.e. File and Folder. Just select “File” and head to the next step.
Now it will inquire you to select the PDF (document) that you want to embed on your website. Now press the open button and move to the next step.
On pressing the open button a small upload wizard would appear on the right side of your screen. It usually takes a minute or two to upload, but it entirely depends upon the size of your file and the speed of your internet connection.
Once uploading is finished, click on the file name and it will take you to a new page. Before, you can embed the document you have to change the permission of the file to the public. Thus, select the share button displaying at the top right corner of your screen and change the permission of the file from private to open. 
Press change, and select “public on the web” so anyone on the Internet can find and access. No sign-in required. Finally, press the Save button to conclude the wizard. For detailed instructions, check out the following screenshot.
After changing the permission settings, now it’s time to grab the embed code. From the quick access tool bar select File >> Embed this PDF file. Now a new window will appear which would provide you the Embed code, copy the whole code and proceed to the next step.
After copying the code go to Blogger.com >> Create a new Post >> Select HTML Tab, and paste the code where you would like to see the document to appear. Now within the code that you pasted few moments a go search for /preview and replace it with /edit?usp=sharing. Now publish your article, and that’s it. See the following screenshot.
Be default the width of the document is set to 640 pixels while the height is set to 480 pixels. You can reduce the width and height according to your needs. You should now see a PDF attached to your blog posts along with some significant options like download and etc.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

78 comments

March 7, 2013 at 7:17 PM

iframe was a cool tag from beginning. Well, thanks dude. Dude, can you help me to make a scroll bar like yours. I mean I read your webkit scroll bar post but it didn't worked for wordpress!

March 7, 2013 at 11:26 PM
This comment has been removed by the author.
March 7, 2013 at 11:29 PM

Your posts are getting better day by day Syed. you are www.technobuzzing.com/
www.blogiri.com/

March 8, 2013 at 3:26 AM

Syed i wana ask you a qestion...

should we insert nofollow with label taq inside blogger post..or not...

probloggertricks.com thanks and hope for earlier reply

March 8, 2013 at 4:05 AM

Another practical tip by MBL. It has always been problem to put pdf file into post which now you have solved with this detailed and instructive post.
Top 5 business ideas for 2013

March 9, 2013 at 4:59 PM

Can you help how to remove blog data from websitevalue.us? It asks to upload a html file to remove, but blogspot blogs don't allow to upload and all posts have date in their urls. Please reply.

March 23, 2013 at 2:54 AM

It appears so simple but in reality a complex thing

March 29, 2013 at 5:44 AM

Thank you for this information. I tried to use this in my blog. It worked but the only problem I encountered is that it does not include the options like download, etc.

Hope to hear from you soon. Thank you!

Editorial Team MOD
March 29, 2013 at 9:30 AM

To enable downloads you have to replace /preview with /edit?usp=sharing From the embed code that you copied.

April 7, 2013 at 7:19 AM

I am here again. May I just ask if there is a way that I could monitor who downloaded my files from google drive (through the blog)?

thanks in advance...

Editorial Team MOD
April 7, 2013 at 10:05 AM

Current this feature is not available in Google Drive.

April 11, 2013 at 9:04 AM

Thank you for the response...

July 4, 2013 at 6:26 PM

I followed the directions however, my pdf does not post on the blog. It only shows the code.https://docs.google.com/file/d/0B-LIL_mz86FnVWlONGdPWFlma1U/edit?usp=sharing

It came up with edit?usp=sharing on it's own and I did not have to change it from preview. Please tell me what I am doing wrong.

Thank you

Editorial Team MOD
July 5, 2013 at 2:39 AM

You have to use iFrame to embed. Just add this code to your Blogger HTML Tab and it would work just fine.

<center>
<iframe height="480" src="https://docs.google.com/file/d/0B-LIL_mz86FnVWlONGdPWFlma1U/edit?usp=sharing" width="540"></iframe></center>

Cheers

July 12, 2013 at 2:01 AM

Is there any other way to place a PDF in Blogger that doesn't require open access to it? I have publications occasionally ask me if I would be open to running one of their articles and I do not want to have to give them away to be able to do it.

Editorial Team MOD
July 12, 2013 at 3:07 AM

Hi,

You can use SlideShare to embed your Presentations. I hope that might give you what you are looking for.

Cheers

July 15, 2013 at 2:54 AM

hi! i want to post just the name of a pdf and a download button infront of it. from which the people can download this book by clicking on the button. i dont want to poeple to open the pdf online..... is it possible????..... if ur ans is yes then plz help me about this

July 22, 2013 at 1:42 AM

thank you for your valuable information

September 30, 2013 at 5:05 AM

Can u tell me if there is any way to permanently hide or remove the left pane.
I searched on the web and found only this article, http://productforums.google.com/forum/#!topic/docs/yKHzGNrdoG4
but it wasn't helpful.

November 18, 2013 at 10:48 AM

I can't even do the first step. I don't see an "upload" button on my Google doc/drive.

Editorial Team MOD
November 19, 2013 at 11:21 AM

Go to https://drive.google.com/ and just beneath the Google Logo you will see this option. (picture attached below might help)
http://3.bp.blogspot.com/-nhsbdrcrFAA/UTd6LO1NVOI/AAAAAAAAO2M/rxfuUhJyOec/s1600/Google-Drive-Upload-File.png

December 7, 2013 at 9:06 AM

a very good solution

December 28, 2013 at 7:35 PM

Love this solution
so good
thank you

January 2, 2014 at 11:50 AM

You did not specify what browser you used .
" From the quick access tool bar select File >> Embed this PDF file..."
There is no such thing in some browsers..

Editorial Team MOD
January 2, 2014 at 9:46 PM

Google Chrome

January 9, 2014 at 4:37 AM

Thanks friend works like a bomb :)

January 20, 2014 at 9:21 PM

my pdf does not show up on my blog.. how to overcome it? i followed each and every step..

January 21, 2014 at 9:04 AM

The embed this link option does not come up in my toolbar. Do you know why or where I can find it?

Thanks

Editorial Team MOD
January 22, 2014 at 6:14 AM

Hi,

Please check this image for solution

http://1.bp.blogspot.com/-kCte84MtXN0/UTeBMnYnpmI/AAAAAAAAO28/xBEcDAfZYmo/s1600/Google-drive-Embed-this-PDF-file.png

January 29, 2014 at 8:41 AM

Following, hope somebody answer us. Thanks in advance

January 29, 2014 at 8:42 AM

Following! hope someone answer our questions. Thanks in advance

Anonymous
January 30, 2014 at 11:41 AM

http://www.chillingeffects.org/input.cgi

March 19, 2014 at 8:45 AM

I've followed these instructions and don't get the options to download, etc either. It automatically had /edit?usp=sharing in the link, so I didn't have to change that. However, it doesn't have the info after that for the height and width of the pdf and it only shows the link when publishing, not the actual pdf doc.

Editorial Team MOD
March 20, 2014 at 9:13 AM

Have you Changed the File to Public? Can you please provide the URL?

March 22, 2014 at 8:43 PM

TQVM its really help..

April 28, 2014 at 7:15 PM

Thank you from both myself and my followers for showing me how to put a pdf file on my blog...it worked like a charm. My only questions would be: You say, "By default the width of the document is set to 640 pixels while the height is set to 480 pixels. You can reduce the width and height according to your needs.". I am not sure how to go about this and does doing so affect a print out size of the file?
Thank you...Joann

Editorial Team MOD
April 29, 2014 at 7:37 AM

No, It doesn't effect the Changes in the print out, that is completely differnet thing.

For Example this is the embed code

<iframe src="https://docs.google.com/file/d/0B0WJjcJEFNziUE5RN0prOWhMTnc/preview" width="640" height="480"></iframe>

Just Replace 640 with any other width and 428 with any other height? Makes sense.

May 12, 2014 at 5:29 AM

no file menu.... wt to do ?

May 20, 2014 at 12:46 AM

thanks. very good.

Anonymous
June 9, 2014 at 3:12 AM

The embed code can now be found by going to File->Publish To Web. Click 'Start Publishing'. You will see a new window that has the embed code on it. You can use this on your website. I though Scribd http://www.scribd.com was much better. It is free.

June 18, 2014 at 4:11 PM

I followed every step and works fine…now i have it on my blog page but i like to be able to click on it and make it big enough to be able to read it well..do i have to add another code to the html tab?

After click the Save, I could not see blogger starter.pdf, so not possible to embed the document, pleade guide me

Editorial Team MOD
August 13, 2014 at 11:13 PM

Can you please provide me a screenshot?

August 14, 2014 at 8:54 PM

Hello, thanks so much for the code - it works great! However, I am finding that the loading of the pdf window auto scrolls the page down as soon as it loads. So for example on this post that you have the PDF embed, it auto scrolls to the embeded PDF as soon as the page loads. I have to scroll to the top to start at the beginning of the article. Any ideas on how to work around that issue?

August 23, 2014 at 12:29 AM

where is quick access toolbar in google drive?

August 23, 2014 at 12:30 AM

where is that quick access toolbar to embed the pdf....?`

August 30, 2014 at 5:16 PM

I would like to use my pdf file as an ebook on my blog. I would like to add it as a gadget. How would I go about doing that once it's embedded? Thank you :)

September 26, 2014 at 4:56 PM

i got the same problem

October 13, 2014 at 4:42 AM

Thanks... I followed the instructions successfully...

October 21, 2014 at 6:59 AM

thanks! its so helpful

November 24, 2014 at 10:04 PM

That's exactly what I am wondering since last so many hours. And after realizing that there is none... decided to use 4shared to embed a pdf file.

Editorial Team MOD
November 25, 2014 at 11:11 PM

Open your uploaded PDF Document or etc. Then you'll notice a some options on the top. Select "More options" icon present in the last >> then select Embed.

February 5, 2015 at 11:36 PM

Please is there any link to download the pdf doc after uploading it to google drive, without making it public or embeding it my blog.

March 3, 2015 at 4:26 AM

Its simple enough. You do not have to use iframe just make it public and use href link instead.

Twistblogger.com

April 6, 2015 at 1:42 AM

Thanks a lot. I followed your instructions and works perfect.

April 15, 2015 at 4:53 AM

Nice guide for adding Pdf document files to our blogger posts and i will try to use.

April 17, 2015 at 7:44 AM

I try but no avail. the pdf doesn't appear. My blog is http://tertiaryeducationghana.blogspot.com/

April 17, 2015 at 1:32 PM

Hi, thanks for this. After I paste the embedded code into my Blogger post and edit the html (taking out /preview and replacing it with /edit?usp=sharing), and publish, what shows up on my blog is the code, not the PDF image. I'm on a Mac, Google Chrome Version 41.0.2272.118.

June 1, 2015 at 4:19 AM

Great Post

June 23, 2015 at 8:48 PM

I noticed that recently, all embedded files from google drive do not show up in my blog. It only shows a blank white box. How can I deal with it? Please help..
my blog is at www.learnatmathematicsrealm.blogspot.com.
Thank you in advance!

June 24, 2015 at 5:58 PM

Thank You! This helped out alot :)

July 6, 2015 at 8:38 AM

Hi,

May I recommend YetiShare as an alternative. Is is a file hosting script that allows you to create your own file sharing site to host files.

http://yetishare.com/

July 17, 2015 at 9:17 AM

There is a file like box showing before my post titles on blogger. Please help me how can I remove it. My page www.bolaesho.com. Thanks.

July 21, 2015 at 1:07 AM

Hey i need help i want to share a file in bloggger i mean a downloadable file how can i

July 21, 2015 at 5:25 AM

Pls how can I remove the image showing before my blog titles. It's annoying.

Editorial Team MOD
July 22, 2015 at 1:33 PM

Here's the link to tutorial

http://www.mybloggerlab.com/2013/04/how-to-host-css-or-javascript-files-in-blogger-using-google-drive.html

July 29, 2015 at 7:46 AM

Hi Ed Team,
Very informative tuto!
Thanks for sharing this!
I am bookmarking it to test in my blogger page
Have a good day
~ Philip V Ariel

August 9, 2015 at 6:34 PM

I don't have a file menu to choose from

Editorial Team MOD
August 15, 2015 at 10:10 AM

You need to open the file in google docs to get the file menu

October 7, 2015 at 3:13 PM

I already shared ur code on my blogger site. thnx.

December 12, 2015 at 9:48 PM

thanks...
But how can i add HTML file in blogger post

Editorial Team MOD
December 18, 2015 at 3:41 AM

You cannot add a HTML File in Blogger!

Anonymous
January 5, 2016 at 4:52 PM

thank you for this info

January 19, 2016 at 6:33 AM

I'm on Google Chrome and the File menu does not show up. I can't find "embed" anywhere in any menu items.

March 1, 2016 at 6:53 AM

This is the second time this blog has completely blown me away with a post that has been extremely useful to me. I want to thank you.

Editorial Team MOD
March 11, 2016 at 4:31 AM

I am glad you liked it

Cheers
Syed

July 29, 2016 at 9:12 PM

Thank you!!!!! This really does work. Google must have changed things as the process described above doesn't work anymore. Google must have broken it.

September 8, 2016 at 1:39 AM

Hi sir my blog www.alloverinfo.com 4 month old and 45 article but no google traffic there what can i do plz help me sir
Thanks

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.