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,
Passy

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,
Passy

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,
Passy

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.

Enjoy,
Passy

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,
Passy

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,
Passy

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,
Passy