Showing posts with label Docs. Show all posts

Friday, October 26, 2012

Add Google Drive's one-click-new icons to your blog or website

This Quick-Tip is about Google Docs / Drive's new short-cut buttons for making a new document, spreadsheet or presentation - and how you can install them into your blog.

Google have announced that one-click icons to create a Document, Spreadsheet or Presentation (now called Docs, Sheets, and Slides respectivly) are available as apps in the Chrome Web Store (a place where you can get various useful tools to install to your Chrome desktop or toolbar.

This is great for people who use Chrome - but some people don't, for whatever reason.

Another option is to simply put links to the new commands into a place that you visit often - like your blog. I've done this with a gadget called "Make a file in Google Drive" which you can see in my sidebar now.

To add this to your blog, simply add a HTML/Javascript gadget in the usual way, and put this code into the contents field.

<div style="text-align: center;">
<div style="display: inline-block; margin-right: 1em;">
<a target="_blank" href="https://docs.google.com/document/create"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibiGAWNygGQWq1VNBhrvqCks-NdLe4MvXXQdmV4dVeQAuwzr2idEdVu_RHXS3MDqFYtd_TfYrckyPue3XWppnRGehYOj2uhvClTvneRLre8Fwy353vxiOqCVRiwb70C0eEch_3VubKIwp9/s80/made-new-word-processing-document-google-drive.png" /><br />
Document</a></div>
<div style="display: inline-block; margin-right: 1em;">
<a target="_blank" href="https://docs.google.com/spreadsheet"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRUJm4wJBCxX6SCZDeA3-KbZIdY3wskyt3l7z7JpEf4uKShQHBmKej5AEmt3S7IN-i5aX_iM70VzNvsvZ4G9wh8xvDZnEe7WD1HM_YPMiAd5-7i2FEWzDh0hZ6xZON3TTgWQe6oMkCDwnF/s80/made-new-spreadsheet-google-drive.png" /><br />
Spreadsheet</a></div>
<div style="display: inline-block; margin-right: 0;">
<a target="_blank" href="https://docs.google.com/presentation/create"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7lH4Q68GwK-1sRi6f8LDBtUWpjGmCXh-SMhco2OJdizVfuhl2VxZAvstyoZCjsn0bIaMclnlhqIw0L9PFWUsoOFH1yWuEwFzO_wg7_rGCYk3c6MXoZh-t8qiiTS6y9x58LQXYX8ngU555/s80/made-new-slideshow-google-drive.png" /><br />
Presentation</a></div>
</div>

Features

There is no gadget title in the code, so that you can put whatever title you want into the title field of the gadget.
People can click either the picture of the text to create a new document - and when they do, the new document will be opened in a new tab or window. Your blog (etc) will stay open in its current tab or window.
There is one "em" of space between the icons - this is enough to look good on most blogs. However if your sidebar (or wherever you put the gadget) is particularly wide you might like to increase it - do this by finding "1em" in the code above, and replacing it with a larger value.

Code for just one type of document

You don't have to put the code into a gadget - it can go equally well into a post - for example if you want to tell people to make a document of their own, and do it "right now".

In this case,you might like to show just one type of document icon, rather than all three. The blockks of code for that are shown below - note that I would usually recommend pasting them into the HTML view of the post editor, to be 100% certain that they work correctly.

To make a new word-processing document:

<div style="text-align: center;"><div style="display: inline-block; margin-right: 1em;"><a target="_blank" href="https://docs.google.com/document/create"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibiGAWNygGQWq1VNBhrvqCks-NdLe4MvXXQdmV4dVeQAuwzr2idEdVu_RHXS3MDqFYtd_TfYrckyPue3XWppnRGehYOj2uhvClTvneRLre8Fwy353vxiOqCVRiwb70C0eEch_3VubKIwp9/s80/made-new-word-processing-document-google-drive.png" /><br />Document</a></div></div>

To make a new spreadsheet file:

<div style="text-align: center;"><div style="display: inline-block; margin-right: 1em;"><a target="_blank" href="https://docs.google.com/spreadsheet"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRUJm4wJBCxX6SCZDeA3-KbZIdY3wskyt3l7z7JpEf4uKShQHBmKej5AEmt3S7IN-i5aX_iM70VzNvsvZ4G9wh8xvDZnEe7WD1HM_YPMiAd5-7i2FEWzDh0hZ6xZON3TTgWQe6oMkCDwnF/s80/made-new-spreadsheet-google-drive.png" /><br />Spreadsheet</a></div></div>

To make a new Google Docs / Drive presentation:

<div style="text-align: center;">
<div style="display: inline-block; margin-right: 0;"><a target="_blank" href="https://docs.google.com/presentation/create"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7lH4Q68GwK-1sRi6f8LDBtUWpjGmCXh-SMhco2OJdizVfuhl2VxZAvstyoZCjsn0bIaMclnlhqIw0L9PFWUsoOFH1yWuEwFzO_wg7_rGCYk3c6MXoZh-t8qiiTS6y9x58LQXYX8ngU555/s80/made-new-slideshow-google-drive.png" /><br />Presentation</a></div></div>

Friday, June 3, 2011

Showing a PowerPoint presentation in your blog as an embedded slideshow

You can show content from a PowerPoint presentation inside your blog, by converting it to a Google Docs document and then using the "embed" code that Docs provide.

Overview:

This article shows you how to put a PowerPoint file into Google Docs, and then use the "Publish" feature from Docs to show the presentation right inside your blog - in slideshow mode.

For many presentations, this is currently my favourite way of displaying them, because it gives a very nice-looking display.   Here's an example of a presentation displayed like this:

Follow these steps to embed a presentation in your blog:

1 Upload the PowerPoint file to Google Docs, making sure that the "Convert documents, presentations, and spreadsheets to the corresponding Google Docs formats"... option is ticked.

2 Once it's uploaded, choose Return to Google Docs

3 Open the presentation (by clicking on it)

4 Click on the Share button in the top RIGHT corner of the Presentation Editor, and choose Publish / Embed.
(Note: for this option, you must be inside the Presentation Editor. You know you are in the correct place if the Share button is on the far right of the screen.   If it's on the left, then you are possibly going to share the document, but this won't get you the embedding code).

5 Click the Publish Document button.

6 Choose your options.   These include:

a player size (I like Medium for presentations that are going inside posts),
how fast to advance slides,
whether to start the presentation as soon as the player loads (I don't like this - readers may want time to take in the rest of the article first)
what to do when the last slide is reached.

7 Copy the HTML that is provided.

8 Return to Blogger, and paste in the HTML code, in any of the ways that 3rd party HTML can be added.

What your visitors see:

People who read your blog directly through a web-browser see the first slide of the presentation, with controls (play, back, forward) in the bottom left corner. When they click the Play icon, the slideshow plays, and at the end it shows a summary slide and gives the code that your reader can use to embed the same slideshow themselves.

I'm still investigating what people who see your blog in a feed reader (eg Google Reader) or via an email subscription see: it's possible that the embedded slideshow won't actually display in these tools.

Are you reading this in a feed-reader (other than Google Reader)?
I'd be very grateful if you could leave a comment about how the slideshow looks for you.

Thursday, April 28, 2011

Uploading MS Word documents to Blogger - via Google Docs

This article is about transferring material from Microsoft Word .doc documents to your Blog posts, using Google Docs to keep the formatting.

Previously in writing posts for Blogger in MS Word, I noted that if the source document is MS Word, then the only approach is to copy/paste via a text-editor.

Unless, of course you use a totally different tool like Windows Live Writer instead of Word.

But recently I had a Flash of the Blindingly Obvious (TM): Google Docs lets you upload MS Word documents, and offers to convert them to Docs format during the upload. Google Docs is web-friendly, and is pretty compatible with Blogger. So it should be possible to upload a Word .doc to Docs, convert and open it in Docs and copy/paste into Blogger.

Does it work?

So far, I've tested this approach with two different documents: a very simple document (one header and two paragraphs) and a slightly longer document with a lot of formatting (I took my own CV, took all the personal details out but kept the formatting).

You can see the results in these posts:

The results are promising. In each case, the pasted contents were accepted by Blogger and the post published without any further editing.

There are some issues:

In the complex document, the tablular layouts are followed strictly, resulting in some parts of the post that are wider than the standard column.
I haven't tested it with a long document (more than 4 pages): in theory there shouldn't be any problems, but I have had issues with conversion of some larger document previously.
And I'm sure that it won't work with some of Word's advanced features that aren't (yet) supported by Docs,eg auto-generated tables.
I'm not sure how well conversion from Word on a Mac to Google Docs works.

I'm keen to hear about other people's experience with this approach - please leave a comment below comment below.

Detailed Instructions:

Follow these steps to transfer material from Word to Blogger via Google Docs:

Log in to Docs (www.docs.googe.com)
Click Upload ...
Click Select files to upload ...
Select the source files from your computer
Made sure that "Convert documents, presentations, and spreadsheets to the corresponding Google Docs formats" is ticked
Click Start Upload ...
When the upload is finished, choose Go Back to Google Docs
Open the file in Docs
Select the contents that you want to upload (possibly use Select All from the Docs menu)
Copy (you may need to use Edit / Copy from the browser, not from inside Docs)
Switch to the Blogger post editor, in Compose mode
Paste.
Add any other content that you want in your post.
Preview the post, and do any final formatting changes that are needed.

Writing posts for Blogger in MS Word.

Showing a PowerPoint Presentation as a slideshow in your blog

File sharing hosts: places to store files used in your blog

blog