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/AVvXsEig7s6jihEt7lLFrRIs7NF5EpOHigsSvmegskVJ8Khn6uqXpFib0vI0a3AJW3yMkNf59qioArMfNK5IJAQuQnBs2fqqycn1y0MC18U_gNu5ul8usvm9bQ2nbw1q1leDHmrIepukWY_0yybV/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/AVvXsEhzufvvtaKHu5PDb154P5GQYdfqEN2oFPW1-WsNuDX7Hqp58SsDMM4ugt_IDeuZG7BzIBTSvtlJ1BkZma_vUSIdfrDVq9tJ52HHY5npYo0gDrrpfk1MNio0QxMbicec7lHJhIVRqGKLnTA_/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/AVvXsEixcV763UApzNQ_5fApUAANv0RDZAvkZswRVPuxfn5ez4__wmuC11Yq2KM36uoxQ_Y4r1PJIOag_A2xKYgirfw6NwvIMPTnANTGNJEY2vehh3hO5LDdjVgahsEJn-TIU0r8APVbYOVByyS9/s80/made-new-slideshow-google-drive.png" /><br />
Presentation</a></div>
</div>
<!-- Google drive new file icons gadget, via www.Blogger-hints-and-tips.blogspot.com.   Share and enjoy!  -->

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/AVvXsEig7s6jihEt7lLFrRIs7NF5EpOHigsSvmegskVJ8Khn6uqXpFib0vI0a3AJW3yMkNf59qioArMfNK5IJAQuQnBs2fqqycn1y0MC18U_gNu5ul8usvm9bQ2nbw1q1leDHmrIepukWY_0yybV/s80/made-new-word-processing-document-google-drive.png" /><br />Document</a></div></div><!-- Google drive new file icons gadget, via www.Blogger-hints-and-tips.blogspot.com.   Share and enjoy!  -->

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/AVvXsEhzufvvtaKHu5PDb154P5GQYdfqEN2oFPW1-WsNuDX7Hqp58SsDMM4ugt_IDeuZG7BzIBTSvtlJ1BkZma_vUSIdfrDVq9tJ52HHY5npYo0gDrrpfk1MNio0QxMbicec7lHJhIVRqGKLnTA_/s80/made-new-spreadsheet-google-drive.png" /><br />Spreadsheet</a></div></div><!-- Google drive new file icons gadget, via www.Blogger-hints-and-tips.blogspot.com.   Share and enjoy!  -->

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/AVvXsEixcV763UApzNQ_5fApUAANv0RDZAvkZswRVPuxfn5ez4__wmuC11Yq2KM36uoxQ_Y4r1PJIOag_A2xKYgirfw6NwvIMPTnANTGNJEY2vehh3hO5LDdjVgahsEJn-TIU0r8APVbYOVByyS9/s80/made-new-slideshow-google-drive.png" /><br />Presentation</a></div></div><!-- Google drive new file icons gadget, via www.Blogger-hints-and-tips.blogspot.com.   Share and enjoy!  -->

Stop spammy links from hurting your blog

This article describes the Disavow tool, which you can use to ask Google to stop taking notice of links to your website that you consider to be bad.

Google's Webmaster tools now include a way of telling Google to ignore certain links when it is deciding what reputation your website or blog should have.

This can be important if SEO is important to you, ie if your blog relies on Search to get visitors, because your "reputation" helps Google to decide where to list your site in the search results. And there is plenty of evidence that the higher your listing, the more "clicks" you will get.

Sometimes you can get links to your blog removed by simply by asking the person who made the link in the first place. Maybe they made a mistake, maybe they've reconsidered their own linking strategy, etc.   To ask them, you need to find them.  Options for this include:

• Looking at their website to find contact details
• Finding them on Google+ or via their Blogger profile
• Tracing them on other tools like Facebook or LinkedIn. 

Worst case, your only option may be to leave a comment on their blog, and hope they're still looking at new comments.

But often enough, you won't be able to get "bad" links removed: the person who made them can't be contacted, or won't co-operate. Worst case, they may be a competitor who is trying to make Google think that your site is "bad" by doing "negative SEO", ie creating lots of spam-links to it.

Telling Google about bad links

The Disavow tool is WebMasterTools new approach to dealing with problems like this.

It lets you tell Google that you think they should ignore certain links. To do this, make a text file (using NotePad, etc).    The file should have

• One line for each link that you want to fix.
• The phrase "domain:" at the start of lines listing websites that you don't want any links from
• A hash (# - AKA a pound-sign in the USA) at the start of any lines containing comments (eg your own notes about what's happened) that you want the Disavow tool to ignore.

An example file might look like:

# Left comment on SammySpammy's blog on 4/5/2012. Asked him to
# remove links, but he said "No"
# Fred from BuildYourBlogNetwork.com removed most links, but missed these
http://www.BuildYourBlogNetwork.com/firstPageTheyMissed.html
http://www.BuildYourBlogNetwork.com/another-page-they-missed.html
http://www.BuildYourBlogNetwork.com/and_Another.html

Once you have made your file, go to the Webmaster Tools Disavow page, choose the correct blog from the list (if you have several), and then upload the file.

Note: you need to be verified in WebMaster tools as the owner of your bog to access it on that page.   Blogger-administrators are "supposed" to be automatically verified, but sometimes this has not happened - if this has happened to you, then your blog won't be in the drop-down list. If necessary, you may need to manually verify your ownership by adding a meta-tag to your blog. LINK (Webmaster tools will give you the tag to add.)

Also, notice the warning that they give:

This is an advanced feature and should only be used with caution. If used incorrectly, this feature can potentially harm your site's performance in Google's search results. We recommend that you only disavow backlinks if you believe you have a considerable number of spammy, artificial, or low-quality links pointing to your site, and if you are confident that the links are causing issues for you.

What they are saying is that if you ask them not to take notice of a link which isn't bad, they might well do so - and this could have quite a bad affect on your search results.   In short, if you are going to disclaim all knowledge and validity of a link, be absolutely certain that this is the right thing to do.

What does the Disavow-links action do?  And how fast does it happen?

Effectively, the disavow file lets you suggest that Google should ignore the links you have listed. If Google accepts your suggestions (there are no promises), they will be applied the next time that Google re-indexes the site(s) that you have suggested.

This can take weeks to happen - because if they really are spammy sites, then Google probably isn't that keen on them anyway! So you won't see an immediate effect. But over time, they should improve your standing in Google's eyes if the links really were causing a problem.

The FAQs in Google's announcement of this tool say that it's really aimed at people who know they have done silly things in their own link-building, and who want to fix the problems they have caused - and which Google have told them about. Specifically, they say "If you haven’t gotten [notification of a manual spam action based on “unnatural links” pointing to your site], this tool generally isn’t something you need to worry about".

But my guess is that this approach will be interesting to many blog owners who do worry about inwards links that they aren't happy to be associated with anyway. It won't remove the links from the internet totally (only the other site owner can do that), but it will stop Google from penalizing you because of them when it decides how to show search results.

What your readers see

Visitors to your blog see absolutely nothing different - using this tool has no immediate effect on your layout or content.

But if your suggestions have an impact on how Google ranks your site, they will hopefully see your site at an earlier position in their search-results pages in future.

---

Related Articles:

5 reasons why SEO doesn't matter for your blog

Adding a meta-tag to your blog

Taking action when someone has used your copyright material without permission

How to remove or change the Newer Post and Older Posts links

This article explains how to hide or change the format of the "Older Posts" and "Newer Post" and "Home" links that are shown at the bottom of Blogger blogs with Layout or Designer templates.

Why are the older and newer posts links used

Most designer and layout templates have links at the bottom of your page of blog posts which let readers navigate back and forward among the list of posts.

This is basic to how a blog is intended to work:  you post regularly, and give people a way to get back to previous posts.

The pager-links are particularly important on pages that are reached using the Label or Archive gadgets, which may show more posts than you normally have on your home page, or displaying in your blog.

But some people want to remove them - and this is fine provided readers have other ways of navigating around the blog.

How to remove "Newer Posts" and "Older Posts" from your blog:

To totally remove these items, you just add some new CSS rules to your template in the usual way.

To remove "Older Posts" add:

#blog-pager-older-link {
float: right;
}

To remove "Newer Posts" add:

#blog-pager-older-link {
float: right;
}

Or to remove both of them and the "Home" link that appears in between them, add:

#blog-pager {
display: none;
}

How to format the "Newer Posts" and "Older Posts"

Changing the way that these links look is very similar, you just add the same codes, except instead of 

display: none;

use the CSS element for the effect you want.   For example, to make the text bigger and bold, you might use rules like

font-size: 150%;
font-weight: bold;

You need to put these commands inside the curly brackets, where the display: none; is now - make sure that each component has a semi-colon at the end of it.   It makes the code easier to read if each component is on a new line, but this isn't necessary.

Another option is to swap the "float" commands around to put "older posts" on the left and "newer posts" on the right (I've never quite understood why they were the other way around).

You can also use background images and colours, with elements like:

background-image:url('URL OF YOUR IMAGE');

background-color:#cccccc;

How to change the "Newer Posts" and "Older Posts" text

If you want to change the text values - either to different words, or by replacing them totally with pictures, you need to accept the disadvantages of editing your template.   If this is ok, and you you want to proceed then:

1  Edit your template in the usual way

2  Turn the Expand Widgets checkbox to ON (ie ticked)

3  Replace the existing links:

• To replace the "newer posts" link, find <data:newerPageTitle/>  in your template, and replace it with whatever text you want.   
• To replace the "older posts" link, find <data:olderPageTitle/>  in your template, and replace it with whatever text you want.   
• To replace the "home" link, find <data:homeMsg/>  in your template, and replace it with whatever text you want.   

In each case, the code you are replacing will be inside some other code, like this:

  <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>

Make sure that you only replace exactly the code listed above, including the < and >'s.   The other code around sets up the links to the actual older or newer posts, and you don't want to change this.

Also, if you want to use a picture instead, replace it with <img alt='...' border='0' src='THE URL OF YOUR PICTURE'/> - of course with the right picture URL put in.

Do make sure that the meaning of your pictures is obvious though - what may look like a cute "newer posts" symbol to you may look just like a pretty picture to someone else.

---

Related Articles: 

How to add a CSS rule to your template

How to edit your blogger template

Understand the advantages and disadvantages of template editing

Finding the URL of a picture in Picasa-web-albums

Understanding designer and layout templates

Creative Kit photo editor works in Google+, if not in Picasa

This Quick-Tip is about using the Creative Kit - which as been giving me grief recently when I tried to use it from Picasa-web-albums.

For ages, I've occasionally used the photo-editor in Picasa-web-albums (the online version of Picasa) to edit photos that I've already uploaded, and want to change without changing the URL.   This editor was originally Picnik - until Google sold that product and replaced it with Creative Kit (which seems like a cut-down version) a while ago.

This has sometimes been slow - which was annoying, but I put up with it because it was just so useful.  

But recently it stopped working totally:  it would load, the progress-bar would get about half-way along the screen, and then hang, with a message:

We noticed Picnik is loading slowly. It’s possible waiting
may solve this issue. If you’re still having trouble:
[t1]   Click for Assistance»

Waiting never solved the problem for me (trust me, I tried), so eventually I tried the help-link, which went to this Picnik help page.

After following lots of the instructions, I finally found this helpful line in the Adope Flash Player re-installation instructions:

If you are using the Google Chrome browser, Adobe® Flash® Player is built-in but has been disabled. To enable Flash Player, follow the steps in this TechNote

Which sounded hopeful - it's only recently that I've switched to use Chrome all the time, so maybe this was the problem.   But it didn't help - despite what they said, Flash was enabled in my setup.

Eventually, it occurred to me that since I have a Google Plus profile, my albums are now accessible via the Plus interface too.   So I went there, chose Photos, found the album, opened a photo, chose creative kit ... held my breath for a few seconds ... and the editor opened up and worked nicely.

I'd still like to get this working from Picasa, because it just looks so much nicer from the small screen that I use a lot of the time.   Suggestions are very welcome!


PS   Thanks to Hardeep of Widget Craft who used the picture that I'd made as the thumbnail picture for How to Edit Your Blogger Template in one of his articles, and thus inspired me to start putting my own name onto the image files I make.

Making custom domains work without the www at the start

This Quick-Tip is about an issue that some people have had with their "naked" custom domain not re-directing to the www-at-the-start version, and how to fix it using a feature in your Google Apps account.

Since Blogger released their initial fix to the custom-domain mapping problem of mid-September 2012, some people have found that it's not possible to set up the custom domain so that my-domain.xxx works as well as www.my-domain.xxx does.

There is an option for this in Blogger's Settings > Publishing area.  But last night, when I set up a "subdomain" style entry for news.my-domain.xxx and directed my latest-updates blog from my-domain.blogspot.com to news.my-domain.com, found that this didn't work.
(Obviously I didn't use my-domain.com - but the principle applies.)

However today I found an approach that does seem to fix this:

1   Log in to the Google Apps domain administration account (the same one you used to set up the 2nd CNAME record - if you don't know how to get into it, some of the information here may help)

2   Go to Domain Settings > Domain Names, a

3   Sroll down to where it says:  Redirect the naked domain (http://YOUR-DOMAIN.INFO) to ... (whatever it says now)

4   Click the Change Redirect link under this.

5   Make sure that www (lower case) is entered in the field.

6   Click save.


I cannot guarantee that this will always fix the problem.   But it did for me just now, and I've seen a couple of other posters saying that it helped them too.    So I thought it was worth sharing.