Making Web Pages at Google Sites

The screen capture above is actually stored on my brand new Google Site located at: http://sites.google.com/site/passyworldtestone

It does seem a bit slower to load in than pictures I have stored elsewhere for this blog on my "Passy World" privately run website. However the Google Sites storage is free, whereas my private site is not.

But let me just say in passing that the hosting and support for my private site supplied by http://www.namecheap.com has been nothing short of sensational, and certainly worth every US greenback dollar I've paid them!

Here is a good 3 minute video intro to Google Sites from YouTube,
(actually made by a member of the Google Sites team) :



And this is going to be a very video intensive post, because we now have four videos from Radford University in Virginia U.S.A.
(My old home state from a few years back).

Video 1 - Setting up a Free Google Website:



Video 2 - Adding Content to the Site:



Video 3 - Changing the Appearance and Sidebar

Note: The layout for Google Sites has changed slightly since this tutorial was created. In order to edit the site appearance, you must now click on the "more actions" tab on the top right of your homepage and then click on "manage site." Now on the left-hand side you will see the heading "site appearance" with "site layout," "colors and fonts," and "themes," listed under it. "Site layout" in this case is the same as "site elements" in the tutorial. The rest of the process is the same.



Video 4 - Converting to a Wiki-like Collaborative Site:

The layout for Google Sites has changed slightly since this tutorial was created. In order to share your site, you must now click on the "more actions" tab on the top right of your homepage and then click on "share site." The rest of the process is exactly the same as in the video.



These four tutorials will give you a very good grounding in making free web pages using Google Sites.

However, immediately below, there is also a PDF document that gives step by step guidance on exactly how to set up a Google Site for the first time. In this document we also explore using a Google Site as a document storage warehouse that can feed a Blog.

The PDF document used for the viewable iframe is actually stored on our "Passy World" Private site. This is because the same version of the PDF stored at our Google Site refused to work in the iframe, and only seems to be downloadable into Adobe reader on a local PC.

So this is the one part of our plan that has failed in our quest to use the Google site to totally feed this Blog post.

If you would like to have your own full size copy of this PDF, then simply click the save disk icon button on the PDF viewer, and you should be able to save it to your own hard disk.


Alternatively, you can download the full size PDF from our Google Site location by clicking the link below:

Click to Download the “How to Make a Google Site” PDF

Shown below is a typical education use of Google Sites, where a school teacher has setup a site for her students to use:



Open the full size version of the site by clicking this link:
Mrs Richau's Class

The following link is to a PowerPoint Overview of Google Sites that was obtained from Slideshare.net and has been uploaded to our Google Sites page:

Download Google Sites Presentation as MS 2003 PPT

Note that we can only download the file from our Google Site, and that we cannot open it Online. This seems to be a characteristic of all of the files currently stored on our Google site.

Trying to embed an SWF Open Office version of the Google Sites Powerpoint onto this blog also failed.

IT SEEMS THAT SOMETIME AFTER EARLY JUNE 2009, GOOGLE HAVE PLACED THIS NEW "attredirects=0" SUFFIX ONTO THE FILE NAME OF ALL UPLOADED FILES. This new naming convention somehow stops the files from being linked to from any other web pages or Blogs. It makes the files downloadable only, and not at all viewable online. I have raised a Support Request with Google about the problems this change has caused, and I will update this post when I get a reply back from them.

Conclusions

Considering what can be done with Google Blogs, I was expecting a few more options and fancier templates than what is currently available.

The look and feel of a Google Site is more like a Wiki than a website. Perhaps this is the target market for the product, since Universities and other Education content suppliers seem quite eager to use Google Sites. A Google Site would certainly be a very good way to gather together reference materials for a class of students to use. (But not quite as nice looking as a “Wall” made in “Wall Wisher”).

However, if you have Photos in Picasa, and Presentations and so on in Google Docs, then Google Sites serves as a very nice integration tool indeed.

Personally, I would make a Google Site just to have free access to the 100MB online filing cabinet for my most referenced documents.

But what I find most disappointing is that the filing cabinet, with its direct URLs ending in attredirects=0, can no longer be used to service my Google Blog, or any other web pages. This has all come about since Google started recently suffixing all the file names with the new "?attredirects=0" ending.

Google Sites are perhaps not the fanciest looking free web presence in town, but they are certainly very useful just the same. Each site has 100MB of storage, plenty of flexibility, unlimited pages, and it is totally free of any charges.

Enjoy,
Big Passy Wasabi

Google Foreign Language Translator

Down at the very bottom of the right hand side bar of this blog, you will notice a language translator menu like this:


Clicking any of the buttons will open up a new window containing the Blog translated into that foreign language. This add-on is made by Google, and it is amazing that they do not include it in the standard Blogger gadgets, (or maybe they do, and I couldn't find it ?) .

I obtained the Gadget from this link:
http://www.mintblogger.com/2009/01/30-blogger-widgets-and-plugins.html
and it is the second widget that is on the list of thirty great items that can be added to any Google Blogger Blog.

If you want to add this same translator to your own blog:

- First make sure that you are logged into your Blog in another tab or window
- Click to go to the above link, and then click on item 2.
- This will take you to another page that has a "one click" installation.
- I found it hard to reposition my translator down the Blogger gadgets list, and so I just did "Save", and went back to my Blog by clicking "View Blog".
- I then moved the translator gadget from the top of my blog to the bottom by using the normal "customize", followed by "Page Elements", options available in Blogger.

I tried out translating my own Blog to French (which I know how to read), and the results were outstanding. I remember reading a couple of years ago that the folks at Google were working on language translators, and looks like they have really come up with the goods !

(The look of Japanese characters all over a Blog is also quite amazing !).

This tool would be great for Language teachers. Two students seated next to each other could write a short Blog post in English, and then each press the translate button to put the post into "German". They could then swap seats and try to read each other's blog post in German, and see if they can understand it or not.

Note that there is also a general Google Language Translator page at:
http://translate.google.com/#

On this page you can type or paste in some text in English, (or whatever language you like), and then translate it to a different language of your choice. Again, really amazing and simple to use technology.

May I suggest going to the following Blog to do some quick “e-travel”, and see some beautiful pictures of the French countryside: http://pissenlits.blogspot.com/
Take the text from this French Blog, use http://translate.google.com/# to translate the French to English, and really begin to see the big picture !


Language Translation : Fantastic and Free.

So now lots of people in lots of places can easily read our Blog.

Enjoy (or is that "Jouir" ? ) ,
Big Passy Wasabi

Adding a Slideshow to Blog Sidebar

You may have noticed that this Blog has a Slideshow of surfing pictures down the right hand side of the page. This is similar to the screen shot shown above.

It is quite easy to add a slideshow to a Google Blog, especially if we are happy for Google to pick the photos at random for us. (Rather than us uploading them all ourself to Google Picasa and then building our own unique slide show).

The following PDF document gives detailed step by step instructions on how to set up a slide show on our blog sidebar.

If you would like to have your own copy of this PDF, then simply click the save disk icon button on the PDF viewer, and you should be able to save it to your own hard disk.

Alternatively, you can view or save the PDF by clicking the link below:

Click here to open or save the above PDF

Hope you like the Surfing pictures,

Enjoy,
Big Passy Wasabi

Using Google PICASA for Photos

The Slideshow below was made by using Google Picasa:


The example slide show contains composite images made by students using Adobe Fireworks. Students are set the task to make "people" using plants, fruits, and vegetables. This teaches them how to use the selection, resize, and copy tools in Adobe CS3. They also have a lot of fun creating their family of "Plant People".

Google “Picasa” is a Web 2.0 photo display and online storage application, much like its main rival Yahoo’s “Flickr”.

In Picasa, we can upload up to 1 gigabyte of Photos for free, and assemble them into “Web Albums” and then create slideshows of these albums.

We can then email our Photo Album to friends, or get the web link for our album to put it into a word document. We can also generate embed HTML to put a slideshow of our album onto a webpage, like we have done at the start of this blog post.

Google Picasa is located at: http://picasaweb.google.com

The following PDF document gives detailed information about how to get started using Google Picasa:

If you would like to have your own full size copy of this PDF, then simply click the save disk icon button on the PDF viewer, and you should be able to save it to your own hard disk.

Alternatively, you can view or save the PDF by clicking the link below:

Click here to open or save the "How to Use Picasa" PDF


Although I have been using Yahoo's Flickr for my photos, (see previous post on this), I have recently started using Google Picasa as well.

Picasa is easier than Flickr, (less steps), for quickly getting a slideshow up onto a web page; however we don't get all of Flickr's fancy bottom-of-screen scrolling and viewing options.

Enjoy,
Big Passy Wasabi

Blogger Technical Tips - Lisa Huff

Using Google Docs with Blogger

View more OpenOffice presentations from Lisa Huff.

Lisa Huff has several Slide Show technical presentations at www.slideshare.net about using Blogger. I have embedded these onto this post, so that people can learn what she has been able to do with Blogger.

The slide shows cover incorporationg the following items into any Google Blog:

- Google Docs
- Images and Photos
- You Tube videos and SlideShare Presentations
- Create and Link to an "About Me" page

Embed Images in Blog Post

View more OpenOffice presentations from Lisa Huff.

Embed Video in Blogger

View more OpenOffice presentations from Lisa Huff.

Blogger About Page

View more OpenOffice presentations from Lisa Huff.

Enjoy,
Big Passy Wasabi

Blogger "How To" Presentations

How To Create Blogs

View more OpenOffice presentations from Jacqui Sharp.

The above is a SlideShare presentation that shows step by step how to join up with Google and set up a Blogger blog.

The bottom right hand corner "full screen" icon can be clicked to make the presentation full size (and more readable). Simply re-click the icon, or press the Escape key to come back down to normal size back in this blog.

The slideshow also covers how to add widgets and all types of useful items to the blog's sidebar, and has many useful hints and tips.

Here is another Slideshow all about Blogger, that will reinforce the material covered in the previous presentation.

Tutorial Blogspot

View more OpenOffice presentations from udalaitz.

I might do one or two more posts about How To Use Blogger, because I found quite a few useful presentations on Blogging at www.slideshare.com, and figure I might as well share the best of them.

There is also a You Tube Channel dedicated to how to do things in Blogger.
Click this link to go there: http://www.youtube.com/BloggerHelp

Enjoy,
Big Passy Wasabi

Making Your Own Blog Background

While clicking along through "Next Blog" in Blogger, I stumbled onto a Blog called "Bark Angel" which is shown above.

I investigated how they had got the really cool background onto their blog. I was also very impressed by the way the dark brown vertical lines in the image framed the post text, and how the whole thing fitted together so well.

Basically I figured: "I gotta get me one of them !"

In the PDF document link below, is a full set of instructions on how to make and install a background image into a Blogger Blog.

Click Here for PDF on How to Make a Blog Background

Enjoy,
Big Passy Wasabi

Insert Larger Images into a Blog

If we want a picture bigger than the default blogger size on our page, then we have to link to it ourself. This is often the case when we have made our blog wider than the standard 400 pixels, and increased it up to 550 pixels. The standard blogger pictures can look quite undersized on this wider setup.

Enlarging a standard sized blogger picture in edit mode on the Blog Post will often just make the picture blurry and fuzzy. In order to get a good quality larger picture, we need to use our own larger sized pictures.

Using an Image editor, (like Photoshop or Fireworks), resize the picture to be 500 pixels wide. We then transfer the image up to our own private website, and then link to it from within the blog Html like this:



Click the above image to see a larger version of it.

Eg. The above HTML will put the picture from the website at:

http://www.passyworld.com/F111%20Photos/alienppa.jpg

into the blog. Note that we also need to specify the picture’s size for the styling part as well, so we need to know how big our picture is by taking it into an image editor and noting its image size (Width and Height in pixels) .

This is why in the above HTML code we wrote the code as: style="WIDTH: 500px; CURSOR: pointer; HEIGHT: 360px because our “alien” picture we are linking to is an actual size of 500 pixels wide by 360 pixels high.

Another way to find out how big a picture is, right click on it, on its original web page, and then click on “Properties” (in Windows XP).

And that's about all there is to it.

Enjoy,
Big Passy Wasabi

Make Your Own Blogger Header

Let's say we want to make our own custom Heading for our Blog, like the one shown above.

We can make the letters by getting a font we like from www.dafont.com (my one here is "Designer Block"). We then use Adobe Fireworks or Photoshop to make the heading text with a transparent background, using an image size of 750x71 pixels in size. (Save the image as .PNG or .GIF type to retain the transparency).

It is then just a matter of editing our Blog via Customize> Layout > Page Settings and replacing the normal header with our Image Header. There is also some header Html that we have to remove from our template as well.

Clicking the link below will open a PDF document that contains all the necessary detailed step by step instructions for making a custom Blog heading.

Click Here for PDF of How to Make a Custom Blog Heading

Enjoy,
Big Passy Wasabi

How to Make a Blog Wider

We all need a bit of extra width to increase capacity, especially on our Blog.

There is a great set of instructions for doing this on the web at this address: http://beginner-blogger-basics.blogspot.com/2008/03/how-to-change-width-of-blogger-blogs.html.

Click Here to View the How to Widen Blog Instructions

Changing the standard blog template basically entails 4 things.

First we increase the width of the Outer Wrapper and then we increase the width of the Header.

We then adjust the two columns inside the Outer Wrapper. These two columns are the Post column and the Sidebar column. Lastly we increase the width of the Footer.

The result for our blog is a text width of 550 pixels, rather than the standard 400 pixels.

This blog has been widened to 550 pixels, which is very handy for when we need to embed You Tube videos, Flickr Slidshows, scrollable PDF's or Open Office SWF format Presentations, because we can also make all these items up to 550 pixels wide.

If you cannot reach the previously mentioned website, and want a detailed copy of the "How to Widen" instructions, then click the link below.

Click Here for PDF of How to Widen Blog Instructions

Enjoy,
Big Passy Wasabi

Note that the original wide ship picture used for this entry is located at http://www.go-africa.co.za/wp-content/uploads/2007/06/shenzhen.jpg, and was found using Google Images.

Changing the Navbar in Blogger

The above image can be clicked on to be viewed full-size, and the main thing to note is the Navbar which is circled in yellow. This blue Navbar is the default color for Blogger, but it can be changed to a color more suited to the color of your blog. Eg. I would like to change my Navbar to be a black color.

We need to click the top right hand "customize" link, then choose the "Layout" tab, and then within this choose the "Page Elements" tab.

We then click the edit link that is on the Navbar and circled in bright green in the image below.

(Click on this image below to make it full size inorder to be able to see all of the tabs). Then use the browser's back button to return to this blog.



Doing the above navigation, and then clicking "edit" on Navbar should open up the following window where we can pick our Navbar color, from the four options that are available: Blue, Tan, Black, and Silver.



Let's suppose I was a bit "color blind" and chose the Tan color, then after saving and Viewing my blog I would see this:



Anyway, as you can see on my current Blog Page Design, I have chosen the black Navbar, which is the one that blends in best with my color scheme.

I have noticed on the web that there are Blogs that have no Navbar on them, but I do not know how they removed the bar, and I do not know how they would sign in to change their blogs, unless they do that at the blogger home page, and go in via their profile.

Enjoy,
Big Passy Wasabi