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.
About the Editorial Team
The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).
78 comments
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!
Your posts are getting better day by day Syed. you are www.technobuzzing.com/
www.blogiri.com/
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
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
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.
It appears so simple but in reality a complex thing
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!
To enable downloads you have to replace /preview with /edit?usp=sharing From the embed code that you copied.
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...
Current this feature is not available in Google Drive.
Thank you for the response...
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
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
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.
Hi,
You can use SlideShare to embed your Presentations. I hope that might give you what you are looking for.
Cheers
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
thank you for your valuable information
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.
I can't even do the first step. I don't see an "upload" button on my Google doc/drive.
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
a very good solution
Love this solution
so good
thank you
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..
Google Chrome
Thanks friend works like a bomb :)
my pdf does not show up on my blog.. how to overcome it? i followed each and every step..
The embed this link option does not come up in my toolbar. Do you know why or where I can find it?
Thanks
Hi,
Please check this image for solution
http://1.bp.blogspot.com/-kCte84MtXN0/UTeBMnYnpmI/AAAAAAAAO28/xBEcDAfZYmo/s1600/Google-drive-Embed-this-PDF-file.png
Following, hope somebody answer us. Thanks in advance
Following! hope someone answer our questions. Thanks in advance
http://www.chillingeffects.org/input.cgi
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.
Have you Changed the File to Public? Can you please provide the URL?
TQVM its really help..
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
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.
no file menu.... wt to do ?
thanks. very good.
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.
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
Can you please provide me a screenshot?
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?
where is quick access toolbar in google drive?
where is that quick access toolbar to embed the pdf....?`
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 :)
i got the same problem
Thanks... I followed the instructions successfully...
thanks! its so helpful
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.
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.
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.
Its simple enough. You do not have to use iframe just make it public and use href link instead.
Twistblogger.com
Thanks a lot. I followed your instructions and works perfect.
Nice guide for adding Pdf document files to our blogger posts and i will try to use.
I try but no avail. the pdf doesn't appear. My blog is http://tertiaryeducationghana.blogspot.com/
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.
Great Post
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!
Thank You! This helped out alot :)
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/
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.
Hey i need help i want to share a file in bloggger i mean a downloadable file how can i
Pls how can I remove the image showing before my blog titles. It's annoying.
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
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
I don't have a file menu to choose from
You need to open the file in google docs to get the file menu
I already shared ur code on my blogger site. thnx.
thanks...
But how can i add HTML file in blogger post
You cannot add a HTML File in Blogger!
thank you for this info
I'm on Google Chrome and the File menu does not show up. I can't find "embed" anywhere in any menu items.
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.
I am glad you liked it
Cheers
Syed
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.
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.