March 7, 2013

How To Embed PDF and other Documents In Blogger Blog Posts

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.

78 comments:

  1. UnknownMarch 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!

    ReplyDelete
  2. UnknownMarch 7, 2013 at 11:26 PM

    This comment has been removed by the author.

    ReplyDelete
  3. UnknownMarch 7, 2013 at 11:29 PM

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

    ReplyDelete
  4. Life blogMarch 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

    ReplyDelete
  5. Mirza Mujtaba BaigMarch 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

    ReplyDelete
  6. AdminMarch 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.

    ReplyDelete
  7. UnknownMarch 23, 2013 at 2:54 AM

    It appears so simple but in reality a complex thing

    ReplyDelete
  8. MathrealmMarch 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!

    ReplyDelete
    Replies
    1. Syed Faizan AliMarch 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.

      Delete
    2. UnknownMarch 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.

      Delete
    3. Syed Faizan AliMarch 20, 2014 at 9:13 AM

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

      Delete
    4. UnknownSeptember 26, 2014 at 4:56 PM

      i got the same problem

      Delete
  9. MathrealmApril 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...

    ReplyDelete
    Replies
    1. Syed Faizan AliApril 7, 2013 at 10:05 AM

      Current this feature is not available in Google Drive.

      Delete
    2. MathrealmApril 11, 2013 at 9:04 AM

      Thank you for the response...

      Delete
  10. Frank KennyJuly 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

    ReplyDelete
    Replies
    1. Syed Faizan AliJuly 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

      Delete
  11. Rich DavidsonJuly 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.

    ReplyDelete
    Replies
    1. Syed Faizan AliJuly 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

      Delete
  12. UnknownJuly 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

    ReplyDelete
    Replies
    1. UnknownJanuary 29, 2014 at 8:42 AM

      Following! hope someone answer our questions. Thanks in advance

      Delete
    2. SatbirMarch 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

      Delete
  13. మోహనJuly 22, 2013 at 1:42 AM

    thank you for your valuable information

    ReplyDelete
  14. UnknownSeptember 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.

    ReplyDelete
    Replies
    1. UnknownJanuary 29, 2014 at 8:41 AM

      Following, hope somebody answer us. Thanks in advance

      Delete
  15. Brenda McDonaldNovember 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.

    ReplyDelete
    Replies
    1. Syed Faizan AliNovember 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

      Delete
  16. UnknownDecember 7, 2013 at 9:06 AM

    a very good solution

    ReplyDelete
  17. Soreya FallahDecember 28, 2013 at 7:35 PM

    Love this solution
    so good
    thank you

    ReplyDelete
  18. UnknownJanuary 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..

    ReplyDelete
    Replies
    1. Syed Faizan AliJanuary 2, 2014 at 9:46 PM

      Google Chrome

      Delete
    2. Bola EshoJuly 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.

      Delete
    3. Bola EshoJuly 21, 2015 at 5:25 AM

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

      Delete
    4. FAMU LibrariesJanuary 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.

      Delete
    5. UnknownJuly 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.

      Delete
  19. TodayJanuary 9, 2014 at 4:37 AM

    Thanks friend works like a bomb :)

    ReplyDelete
  20. UnknownJanuary 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..

    ReplyDelete
  21. Brad ClarkJanuary 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

    ReplyDelete
    Replies
    1. Syed Faizan AliJanuary 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

      Delete
  22. AnonymousJanuary 30, 2014 at 11:41 AM

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

    ReplyDelete
  23. ROZAINITA ROSLEYMarch 22, 2014 at 8:43 PM

    TQVM its really help..

    ReplyDelete
  24. Joann SwansonApril 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

    ReplyDelete
    Replies
    1. Syed Faizan AliApril 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.

      Delete
  25. Darshan May 12, 2014 at 5:29 AM

    no file menu.... wt to do ?

    ReplyDelete
  26. Zk ChannelMay 20, 2014 at 12:46 AM

    thanks. very good.

    ReplyDelete
  27. AnonymousJune 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.

    ReplyDelete
  28. UnknownJune 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?

    ReplyDelete
  29. நவ்ரோஸ்பாலகவி August 13, 2014 at 1:21 AM

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

    ReplyDelete
  30. Naomi C.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?

    ReplyDelete
  31. NimishanAugust 23, 2014 at 12:29 AM

    where is quick access toolbar in google drive?

    ReplyDelete
    Replies
    1. Shahzad Masood RoomiNovember 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.

      Delete
    2. Syed Faizan AliNovember 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.

      Delete
  32. NimishanAugust 23, 2014 at 12:30 AM

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

    ReplyDelete
  33. UnknownAugust 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 :)

    ReplyDelete
  34. Rathika LOctober 13, 2014 at 4:42 AM

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

    ReplyDelete
  35. UnknownOctober 21, 2014 at 6:59 AM

    thanks! its so helpful

    ReplyDelete
  36. Rodney CFebruary 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.

    ReplyDelete
  37. Anastasia KatsaounidouApril 6, 2015 at 1:42 AM

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

    ReplyDelete
  38. UnknownApril 15, 2015 at 4:53 AM

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

    ReplyDelete
  39. UnknownApril 17, 2015 at 7:44 AM

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

    ReplyDelete
  40. FamiliesApril 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.

    ReplyDelete
  41. UnknownJune 1, 2015 at 4:19 AM

    Great Post

    ReplyDelete
  42. MathrealmJune 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!

    ReplyDelete
  43. UnknownJune 24, 2015 at 5:58 PM

    Thank You! This helped out alot :)

    ReplyDelete
  44. UnknownJuly 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/

    ReplyDelete
  45. AbdiazizJuly 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

    ReplyDelete
    Replies
    1. Syed Faizan AliJuly 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

      Delete
  46. Philip Verghese 'Ariel'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

    ReplyDelete
  47. UnknownAugust 9, 2015 at 6:34 PM

    I don't have a file menu to choose from

    ReplyDelete
    Replies
    1. Syed Faizan AliAugust 15, 2015 at 10:10 AM

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

      Delete
  48. UnknownOctober 7, 2015 at 3:13 PM

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

    ReplyDelete
  49. Tech AdminDecember 12, 2015 at 9:48 PM

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

    ReplyDelete
  50. AnonymousJanuary 5, 2016 at 4:52 PM

    thank you for this info

    ReplyDelete
  51. UnknownMarch 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.

    ReplyDelete
  52. Shrawan K VaishnavSeptember 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

    ReplyDelete

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.