How to show pictures from Google Plus in any website

This article shows how you can make a slideshow of all the photos from an album in your own Google Plus Photo collection, which can be shown on a website or blog.

Sharing a photo album from Google+ Photos

Google's help-pages note that you can share a Google Photos album using a link - and is a good option for showing your photos to people who are outside of Google+.

But what are the options if you want to show a Google Photos album, not just an individual picture, in your blog or website?

• Put the link in your website. But that just gives bland, boring text, like click here to see my photos.

• Put one picture in your website, labelled "click this photo to see the rest", and link it to your Google Photos album. But that just shows one photo - and it takes people away from your website when they go to view your photos.

• Load each photo from the album individually to your website. That's fine for 2-3 or even 10 photos. But what if you've got dozens or even hundreds - it could take hours!

A better option is to use an embedded slideshow.

To do this, you need to get a small piece of HTML code from Google, and put it into your site. Then when someone looks at your site, the code runs and they the see a slideshow made of the photos your album at the current time.   This means that the pictures on the other website are automatically updated when you change the album in Google Photos (eg when you add, change or remove pictures).

Unfortunately there is no tool to make this type of slideshow code in Google Plus Photos at the moment.

But there is was a very simple work-around which gives you get the code that you need, using existing Google tools.  

Update: 

The feature described below was removed from Picasa-web-albums three days after this article was published.    I'm currently investigating other options.

Using Picasa-web-albums to get the slideshow code

If you have loaded pictures into Google Photos, then you can manage them using either Picasa-web-albums (ref: What is Picasa vs PWA?) or Google Photos.

So, to get the embeddable slideshow display code for a photo album:

• Log in to Google with your Google+ account

• Go to Picasa-web-albums using the do-not-redirect link: https://picasaweb.google.com/lh/myphotos?noredirect=1   (more about this link)

• Navigate to the album that you want to make a slideshow for.
  NB  you need to be viewing the album, not the page of all albums, to get the correct code.

• Make sure that the security for this album is set to at least "anyone with the link".

• Choose Link to this Slideshow and then Embed album from the right side bar

• Set the options you want for your slideshow.
  The alternatives explained in detail in How to make a slideshow of from Picasa-web-albums

• Copy the HTML code that is provided

• Install it into your blog or website in the usual way
  (Ref:  options for installing 3rd party code in Blogger).

What your readers see

Readers using a regular web-browser with Flash enabled should see a slideshow of your pictures - like this:

Readers whose device (eg cellphone, tablet) isn't able to show Flash graphics will most likely just see a black square instead of the album - possibly with a message telling them why this is happening.

---

Related Articles:

What are Picsasa and Picasa-web-albums

How to put 3rd party HTML or Javascript into your blog

Understanding Google accounts

Putting a Picasa-web-albums slideshow into a blog post or website

Get your blog-posts into Google's in-depth search results

This QuickTip is about the new in-depth search results feature that Google has recently introduced, and how you set up your blog-posts so they have a chance of being considered as in-depth.

In-depth search results

Google recently announced a new category that may sometimes be shown in a search results page, ie the page of information that is shown to a person after they have run a search in Google.

These suggested "in-depth" results are meant to help people to "find relevant in-depth articles in the main Google Search results"

This feature will be initially only be used on search results from on google.com in English, but is likely to extend to other google searches (eg google.co.uk, google.in, etc) and other languages over time.

Google's stated aim is for the in-depth panel to appear when someone searches for "person or organization name, or other broad topic", and for it to include

"thoughtful in-depth content that will remain relevant for months or even years after publication. ... [including material from] well-known publishers ... [and] lesser-known publications and blogs"

They haven't told us what counts as "in-depth" - but my initial guess is posts / articles that are at least several thousand words long, and possibly which have "enough" headers to show that they cover a range of sub-topics and points-of-view.  

An in-depth panel in Google's search-engine-results-page (SERP) looks like this:

At the moment, it is positioned at the bottom of the first search results page, as shown below.

Getting blog-posts included in in-depth result lists

Some bloggers write in-depth content about individual people, organizations, or other broad topics, and so may be interested in setting up their posts so they can be considered to be included in the in-depth results.

Google's guidelines about how to do this for websites in general are here: https://support.google.com/webmasters/answer/3280182

There are no promises and no magic-bullet solutions here:  competing against blogs and websites published by large organizations with editorial staff and SEO experts isn't easy.   But I think that it will be possible, particularly if you're an expert in your field, and have content that is unique in a particular niche.

Looking at Google's article, particularly relevant points for bloggers are:

• Using Schema.org markup
  Recommended properties are headline, alternativeHeadline, image, description, datePublished and articleBody - some of these are from the general schema.org set, not specifically for articles.

• Authorship markup

• Logo

I also suspect that having a good thumbnail picture for your blog may also be important - especially if you don't have authorship set up.

Pagination and canonicalization is probably not so relevant, as most blogging tools don't provide automatic facilities for multi-part posts. However if you do want to combine several blog-posts into one "in-depth" candidate, note their comment about needing "a rel=canonical pointing at either each individual page, or a "view-all" page" and not just to the first post in the series.

How to implement schema.org properties in Blogger

I've described schema.org before - but I have to admit that I haven't implemented it yet in any of my blogs.   (Though I do have plans to use some, and have done Facebook's Open Graph tags.)

Blogger doesn't currently have tools in its screens that let you to set these features yourself - so to implement them at the moment, you will need to edit your template, and most probably add statements like:

If CURRENT-URL = A SPECIFIC BLOG POST
THEN SCHEMA.ORG COMMANDS

This isn't the correct syntax: I'm assuming that anyone who can figure out the schema.org codes won't need help with the HTML syntax.   And I'm not sure whether the code should go into the header or body sections.  But it gives you the general idea.   And my excuse is that this is a quick-tip, not a fully researched article at this stage.

Hopefully Google will put some features to make this easier into Blogger soon, for the sake of bloggers for whom SEO is important, but who aren't so brave about editing their template.

---

Related Articles:

Why SEO matters for some bloggers

Advantages and disadvantages of editing your Blogger template

Introducing schema.org

Implementing Facebook's Open Graph tags

Post-thumbnail:   a picture to represent a blog-post

Removing the label values from the blog-post header or footer

This article explains how to stop label values from showing in the header or footer lines for each post in a blog that is made with Google's Blogger.

If you have used the Labels / Page-gadget approach to putting your blogposts into separate pages, then each of your posts will have one or more Labels attached to them.

Most Blogger templates are set up so that these label values are shown with the posts, too, in either just underneath the post-title or in the post-footer. And when a reader clicks one of these post-specific label values, they are shown a "post-listing format" blog page, which includes (the first part of) all posts which have that label.

However some people want to stop their blogs from displaying this these label values perhaps because:

• They want their blog to look more like a real website
• They are using some labels which are meaningful to them as administrators but not to readers (eg at the moment, I'm using a label "ZZZ - needs 2013 review" to identify posts that I need to check to make sure they're up to date.
• They just don't like having the label list shown for each post.

Note that you can select which Label values are shown in the Label gadget, but there is no way to do this in the label list shown for each post.

How to turn off the list of labels shown with each blog-post

Log in to the Blogger dashboard with an account that has administrative rights to the blog


Choose Layout from the options for the blog


Locate the Blog Post gadget in layout screen, and click the Edit link for it.


In the list of options that is shown, un-tick the Labels option


Save the changes, using the Save button (currently in the bottom left corner)


Click the Save Arrangement button for the layout (currently in the top right corner of the layout editor).



Job done! The next time anyone looks at your blog, the list of labels for each post should not be visible.

Troubleshooting

Sometimes, changes that are made in the Blog Post gadget don't appear to have been applied when people look at your blog. For example, the labels may still be shown for each post, even though the Labels check-box is turned off.

If this happens, the most likely cause is that your post template (ref: parts of a blogger blog) has become corrupt. The only ways I know to fix this are to either

• Change to a different template:
  This needs to be a total change, eg Simple to Picture Window, not just changing from one to another option within the same template.
• Resetting the blog-post gadget - described in detail here.

The disadvantage of of either of these approaches is that customizations you have made to your blog are lost - this can be easy to forget when your customizations include important-but-more-subtle things like ensuring your Analytics profile gets Adsense data or installing Facebook Open-Graph tags - or just plain annoying if you have put sharing buttons into individual posts, and have to re-instate these

---

Related Articles:

What are the components of a Blogger blog

How to put posts into pages in blogger

Labels: a way to categorize Blogger posts

Posts and Pages - navigating while you are reading a blog

Making a blog look like a real website

Fully Optimized CSS3 Widget To Improve Page Loading

I want to ask you one question, what is the value of losing visitors due to a slow loading of the website? Is it important to you that much? If you really care about your site loading and want to improve visitor's navigation experience then you should take some serious efforts to unlock huge numbers of generic visits. Not only scripts but images are also equally affected by page loading. Learn how to use CSS3 in widget instead of actual images in your page to improve page loading. It is the best practices for a faster web app with CSS3 & HTML5 coding. Learn how to dramatically improve page load time by using the fully optimized CSS3 widget. We have seen and there are lots of pages which shows asynchronous loading plugins to improve page load speed but we are going to see a new tutorial about CSS3 widget that only consists images build up by CSS itself and I am sure this will help you to reduce page loading of your blogger blog. Learn how to use fully optimized CSS3 widget to improve page loading.

CSS3 Optimized Widget To Improve Page Loading

Last time we have seen how to defer the loading of Facebook like box by lazy load script for making page speed much faster. These widgets dramatically slowdown the loading of your page due to additional downloads, several requests and synchronous loading of JavaScript which causes high memory usage to browsers. The goal of this post is to get higher page views, lower bounce rate & to optimize your site for social media.

Optimize the performance of widgets to improve page loading using CSS3

This is one of the best SEO & blogging tip. This widget is fully made by CSS3, that means all images contained by this widget is made only by CSS. Yes that's true, CSS can be written to get an images you want to display on page instead of actual image like .jpg or .png. When you install any third party widget on your page it will call for images to download which causes more requests and extra downloading as well as time; and this mutually affects on your site loading. But this widget will NOT cause any request for images shown by it nor causes downloading of any and hence this improves your site loading.


Here I have given E-mail subscription widget with four CSS3 icons which are not images, its truly CSS based coding. Change blue coloured text as per your information and install this widget in your site.

<div id='email-sub-pbb'>
<style>
#menump {align:center;}
#menump ul {    list-style:none;    padding:0;    margin:0;    overflow:hidden;    font:0.875em/1 Arial, sans-serif; }
#menump ul li {    float:left;    width:46px;    height:49px; padding-left: 20px; }
#menump ul li a {    display:block;    width:45px;    height:45px;    overflow:hidden;    border:1px solid transparent;    line-height:45px;    text-decoration:none;    text-shadow:0 -1px 0 rgba(0,0,0,0.5);    -moz-border-radius:5px;    -webkit-border-radius:5px;    border-radius:5px; }
#menump ul li a:hover, #menump ul li a:focus, #menump ul li a:active {    opacity:0.8;    border-color:#000; }
/* ------------------------------------------------------------------------------------
--  FACEBOOK
------------------------------------------------------------------------------------ */
.facebook a {
    position:relative;
    border-color:#3c5a98;
    text-transform:lowercase;
    text-indent:24px;
    letter-spacing:10px;
    font-weight:bold;
    font-size:40px;
    line-height:50px;
    color:#fff;
    background:#3c5a98;
    /* css3 */
    -moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
    -webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
    box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
}
/* ------------------------------------------------------------------------------------
--  TWITTER
------------------------------------------------------------------------------------ */
.twitter a {
    position:relative;
    border-color:#a8eaec;
    text-transform:lowercase;
    text-indent:13px;
    letter-spacing:40px;
    font:bold 45px/1 Tahoma, sans-serif;
    line-height:35px;
    color:#6ac6df;
    background:#daf6f7;
    /* css3 */
    text-shadow: 3px 3px 1px #fff, -3px -3px 1px #fff, 3px -3px 1px #fff, -3px 3px 1px #fff;
    -moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
    -webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
    box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
    /* NOTE: webkit gradient implementation is not as per spec */
    background:-webkit-gradient(linear, left top, left bottom, from(#dbf7f8), to(#88e1e6));
    background:-moz-linear-gradient(top, #dbf7f8, #88e1e6);
}
/* ------------------------------------------------------------------------------------
--  RSS
------------------------------------------------------------------------------------ */
.rss a {
    position:relative;
    width:45px;
    padding:0 2px;
    border-color:#ea6635;
    text-transform:lowercase;
    text-indent:-186px;
    font-size:30px;
    font-weight:bold;
    color:#fff;
    background:#e36443;
    /* css3 */
    /* NOTE: box-shadow is not currently in any CSS3 module. It may be reappear in a different form altogether */
    -moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
    -webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
    box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
    /* NOTE: webkit gradient implementation is not as per spec */
    background:-webkit-gradient(linear, left top, left bottom, from(#f19242), to(#e36443));
    background:-moz-linear-gradient(top, #f19242, #e36443);
}
/* create circle */
.rss a:before {
    content:&quot;\00a0&quot;;
    position:absolute;
    bottom:4px;
    left:5px;
    width:9px;
    height:9px;
    background:#fff;
    /* css3 */
    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px; /* standards version last */
}

/* create the two arcs */
.rss a:after {
    content:&quot;\00a0&quot;;
    position:absolute;
    bottom:5px;
    left:5px;
    width:14px;
    height:13px;
    border-style:double;
    border-width:24px 24px 0 0;
    border-color:#fff;
    /* css3 */
    -moz-border-radius:0 50px 0 0;
    -webkit-border-top-right-radius:50px;
    border-radius:0 50px 0 0; /* standards version last */
}
/* ------------------------------------------------------------------------------------
--  GOOGLE
------------------------------------------------------------------------------------ */
.google a {
    position:relative;
    border-color:#26478d;
    text-transform:lowercase;
    text-indent:6px;
    letter-spacing:40px;
    font: 71px/21px Georgia, Times New Roman, Times, serif;
    color:#fff;
    background:#1e3c7f;
    /* css3 */
    -moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
    -webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
    box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
    /* NOTE: webkit gradient implementation is not as per spec */
    background:-webkit-gradient(linear, left top, left bottom, from(#447aec), to(#1e3c7f));
    background:-moz-linear-gradient(top, #447aec, #1e3c7f);
}
#sidebar-subscribe-box{
width:auto;
/* border:1px solid #b2b2b2;*/
background:#ececd9;
border-radius: 10px;
padding-top: 25px;
padding-bottom: 1px;
}
.sidebar-subscribe-box-wrapper{
color:#000;
font-size:11px;
padding:1px 20px 10px;
text-align:center;
letter-spacing: normal;
text-transform: capitalize;
font-weight: normal;
}
.sidebar-subscribe-box-form{
clear:both;
display:block;
margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
.sidebar-subscribe-box-email-field{
-moz-border-radius:4px;-webkit-border-radius:4px;
border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
.sidebar-subscribe-box-email-button{
background:#58524b;
border:1px solid #4a453e;
border-radius: 4px;
box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;
color:#fff;
cursor:pointer;
font-family:Droid Serif;
font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}
.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#D83F1D}
.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
#footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
</style>

<div align='center'>
<div id='sidebar-subscribe-box'>
<div class='sidebar-subscribe-box-wrapper'>
<div id='menump'>
<ul>
<li class='facebook'>
<a href='https://facebook.com/problogbooster' rel='nofollow external' title='Share on Facebook'>F</a></li>
<li class='twitter'>
<a href='https://twitter.com/problogbooster' rel='nofollow external' title='Share on Twitter'>T</a></li>
<li class='rss'>
<a href='http://feeds.feedburner.com/problogbooster' rel='nofollow external' title='Subscribe to the RSS feed'>RSS</a></li>
<li class='google'>
<a href='https://plus.google.com/u/0/100539750299570490490' rel='nofollow external' title='Bookmark with Google'>G</a></li>
</ul>
</div>
<p><span style='font-size: 13px; line-height: 20px; text-align: center; text-transform: uppercase;padding:0 10px 0 10px;'>Get Our Latest Articles Delivered To Your Email Inbox And The FREE Access For The Blogger Resource Page </span></p>
<div class='sidebar-subscribe-box-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=problogbooster' class='sidebar-subscribe-box-form' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=problogbooster&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input name='uri' type='hidden' value='problogbooster'/>
<input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='sidebar-subscribe-box-email-field' name='email' placeholder=' Enter your email address here'/>
<input class='sidebar-subscribe-box-email-button' title='' type='submit' value='Subscribe Now'/>
</form>
</div>
</div></div></div>
</div>

Use this HTML widget and see the difference in Page-Speed and YSlow.

Webmaster tools Structured Data Testing Tool - helping bloggers who care about SEO

This quick-tip introduces the Google Webmaster Tools structured data testing tool, which gives you a view of how your site looks to the search-engines.

Today I discovered that Google Webmaster Tools offers tools for testing the structured data on your website.

I haven't seen any announcements about it, just noticed it there when I was looking for something else - so I'm not sure if it's really new, just new-to-me, or I've been lucky enough to get a it before most people do.

You can find it here (or at least that's where I'm finding it):    http://www.google.com/webmasters/tools/richsnippets

Once you're at that page, you can paste in either an URL (your own, or someone else) or some HTML, press preview - and the system will show you how the meta-tags, open-graph tags and other Google-supported structured data on your site looks to Google.   This isn't important for many bloggers - but is very useful information if SEO matters for your blog.

And you can also "Select the HTML tab to view the retrieved HTML and experiment with adjusting it." - and so test out the effect of making changes to your template etc.

The results show you:

• A preview of how the URL looks in a Google search-engine-results-page.
• Authorship testing results - whether have a Google+ page or profile associated with the site
• Authorship email verifications results
• Publisher markup verification status
• An extract of the structured data

I don't even begin to understand what all the results mean.    And I'm not sure if we can do something about all results that are shown - eg   checking Blogger-hints-and-tips currently tells me that there are values for properties that I've never set (eg blogid and postid)  and also properties that aren't part of the schema, eg:

• Error: Page contains property "image_url" which is not part of the schema.
• Error: Page contains property "blogid" which is not part of the schema.
• Error: Page contains property "postid" which is not part of the schema.

But, much like the syntax-checker provided by Facebook for checking how successful you were at  installing Open Graph tags I'm sure that this will be a useful SEO diagnostic tool.

How to replace a file in Google Drive with a new version

This article is about how to update a file that you have loaded to Google drive. It only applies to files that have not been converted to Google Docs format - for example, PDF, Word, Excel etc files.

New versions vs new files in Google Docs

On a couple of my blogs, I provide files that people can download and use themselves.

When you share a file in this way, there are three main issues to consider:

• Where to put the file
• How people will find it
• What format to use.

Today, Google Drive is the most obvious file hosting option for people using Blogger. (A file host is somewhere that you can put files which Blogger cannot upload - see File Hosting options for Blogger for more details and other alternatives.)

I thought a lot about the best format to use for these files: if I convert them to Google Drive (AKA Docs) format, they won't count against my file-storage quota, and everyone has access to Google Drive/Docs.  But not everyone has a Google account, or access to Docs at the time when they want to work on the file. And some people might struggle with using Word tables and formatting. So in the end, I decided to stick with MS Word and PDF formatted versions, for now at least.

Click here to open the PDF version.

And I tell people about these files by writing a blog post (eg "Table Quiz Answer Sheets") introducing the template, and put a link to each files in it (eg like the picture on the right for the PDF version - for info about how I did this see "Putting text and pictures side by side" ).

However I know that some people choose to note / bookmark / share / etc the location of the file, rather than the blog post. This is fine by me: the point of my blog is to provide tools, templates and advice. I ENsure that there is branding and a link to my blog on the downloaded files, so everyone who sees the printed version knows about my blog.   But I'm not fussed if some repeat-business goes directly to the files - I think they'll come back back to my site when they need advice or a different template.

But what happens if I want to change the file, for example to fix a typo that was missed originally, or to add a new feature?

If I just upload a new Word or PDF file to Google Docs then the links to this file will be different - even if it has the same name as a previously uploaded file.   People who go directly to the original file file will get the old (wrong) version - or even worse, I'll delete it and they will have a broken link.

However I've found that if I use Google Drive's tools for loading a new version of the file, then people with the link will always go directly to the latest version - and I can choose whether to keep the older versions inside Drive, or to delete them.

How to load a new version of a file to Google Drive

Log in to Google Drive, using the Google account that owns the document.


Navigate to the folder that the file is in.


Tick the document that you want to replace or update


Select More, from the navigation options bar above the list of documents


Go to Manage Revisions

Upload your updated version, using the Upload New Revision link:

If you want, delete the older non-current one using the "x" checkmark to the right hand side of the screen.

Job done:  anyone who goes to the existing file link will now get your most-recently-uploaded version of the document.

Troubleshooting

If there is no "Manage Revisions" option, then most probably the file is in native Google Docs format rather than another like Microsoft Word or PDF.   In this case, you need to edit it on-line.  Unfortunately I haven't found a way to temporarily leave the old, unedited, version available to any one who looks at the file before you have finished opening it.   This could be particularly annoying if you want to make a lot of changes -  in this case, it may be best to convert the file back to a downloadable format (Word, etc) and work on it locally before re-uploading and then copy-and-pasting te new contents back to your original file.

Can this be done with the Drive desktop software?

The short answer is: I don't know.

 I have multiple Google accounts, for different blogs, so I've decided that it's safest to always use the web-browser based tools to manage files in Drive, rather than try to work with different accounts on different areas of my local file store.

If you do know, please leave a comment below.

Other options?

I'm certain that there are othr tools in which it's easier to replace an existing verison of a file with a new one without changing the link to the file.    The following notes discuss the ones I've tried so far.

Google Sites

Originally I used "filing cabinet" pages in Google Sites to store the files which I make available. This has a couple of advantages:

If you upload a new file with the same name, then

• The link does not change
• The sharable link includes the original file-name, which makes it easier for me to be sure that I'm putting the right link into my blog posts.

However, Sites isn't Google's preferred way of managing documents now and I have a nasty feeling that one day it may go the same way as Google Pages, Reader, Picnik, etc.  So I decided a while ago to stop using Sites for this.

---

Related Articles:

File Hosting - places to store files that you use in your blog

Understandiing Google Accounts

Showing things side-by-side in Blogger