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/AVvXsEh5lzxYobe0PGtFhAhiJQcVtvmgQxFEoPM33tJ2NQY35e02R6moF9ryM04azwsYyE9EgOPfrMqFmgOgJMBoFVJMxoS9khUDT4nUS7p0xvDPwgFuIk0N8y2lxlPwyrn-MfP9tDqN7iZLk9oA/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/AVvXsEisdU56iJeb6stM7oBr8mqzVY8eVeT4fk_-S1tRcW83ufJ0lGjpFsPVP3ppExg93hAslZPCjgUEdCJ4Tp4j7jE6jD-Y1ri6ZNdqQ9hxoJHDTq2GYoGcODGBdB2jah5iF8dORTrLcdzvmOak/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/AVvXsEjvDPg3Mr_N255GcrT4pjI6nxI_kcg8oFeGbgcqW5cqPipyQ7YqZOzg4P2AuwVCrWScbgFPH3YMMCbbFCMqRB0XFh-W4kWnaQKHVk7V3_mWc-IXefq4SwFakUQEVJLUEgn8J9gOlnvcKZLP/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/AVvXsEh5lzxYobe0PGtFhAhiJQcVtvmgQxFEoPM33tJ2NQY35e02R6moF9ryM04azwsYyE9EgOPfrMqFmgOgJMBoFVJMxoS9khUDT4nUS7p0xvDPwgFuIk0N8y2lxlPwyrn-MfP9tDqN7iZLk9oA/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/AVvXsEisdU56iJeb6stM7oBr8mqzVY8eVeT4fk_-S1tRcW83ufJ0lGjpFsPVP3ppExg93hAslZPCjgUEdCJ4Tp4j7jE6jD-Y1ri6ZNdqQ9hxoJHDTq2GYoGcODGBdB2jah5iF8dORTrLcdzvmOak/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/AVvXsEjvDPg3Mr_N255GcrT4pjI6nxI_kcg8oFeGbgcqW5cqPipyQ7YqZOzg4P2AuwVCrWScbgFPH3YMMCbbFCMqRB0XFh-W4kWnaQKHVk7V3_mWc-IXefq4SwFakUQEVJLUEgn8J9gOlnvcKZLP/s80/made-new-slideshow-google-drive.png" /><br />Presentation</a></div></div>