Wednesday, January 13, 2010

Linking to a Picasa web-album in a blogger post

This article shows how to put an album link into your sidebar (or anywhere that you can put a gadget on your template) in Blogger.

Make your album

Previously I've introduced Picasa and Picasa-web-albums (PWA), and listed some ways that you can link PWA to your blog.

Go to Picasa Web Albums
Check that you have already uploaded the album you want from your PC to Picasa-web-albums.
(and if you haven't, go back to Picasa and upload it now) - and that you are allowed to publish all of the pictures
Choose an album by clicking on it.
The album view opens, showing you a thumbnail of all the photos in it on the left of the screen. On the right of the screen, there is a sidebar of useful tools. One of these is "Link to this Album".
Click on "Link to this Album".
This opens two options, showing the code to use to link to the album in an email, and one with the HTML to embed in a website.
Copy the entry under "HTML to embed in website".

Put it into your blog:

The HTML code that you copied from PWA is just like HTML code from and other 3rd party source, so it can be in stalled the same way: option 2 in this article shows you how to put it into a post.

Once it's there, you can use any of the regular options for formatting items in the Post Editor - though you will probably need to use HTML mode to this, because the code from PWA puts the album inside a table, which is something that the Post Editor doesn't handle well.

Amazon recommendations

What your readers see:

This puts a picture-link to your album into your sidebar (or wherever you chose to put the gadget): it will have a white border (like the one beside this paragraph) - though you may want to edit the HTML to make it look different.

When a reader clicks on the picture-link they are taken to the Picasa-web-album, where they can view, but not edit, the album you've linked to.

Targeting AdSense ads to a subset of page content

There are some websites where contextual targetting is not a good idea, because they attract the wrong sort of advertisements. For AdSense, one work-around is to target your ad-content to a certain sub-section of the overall post..

Contextal Advertising

Google's AdSense is perhaps one of the best known contextual advertising programmes.

It works by looking at the page that and advert is to be shown on, and choosing a suitable ad for that page based on the key words shown on the page.

In many cases, this works well: a page about losing weight will have lots of words that attract ads from a weight loss company, for example.

But there are cases when it doesn't work so well: a blog exposing the "myths" of conventional medicine, and suggesting natural remedies for many problems may well target advertisements from mainstream practitioners and companies.

To avoid this, use section targetting.

Section targeing tells Google what sections to take more (and less) notice of when matching ads to page content.

It can be particularly useful to get some parts of sites ignored. For example, if you have a paragraph like

"my site shows blah, blah, blah, excluding foo1, foo2 and foo3"

and foo1, foo2 and foo3 are things that there are a lot of irrelevant ads for, then using targeting to say "ignore the bit starting with excluding" might be a good idea.

For instructions how to do section targeting that works with AdSense, see: https://www.google.com/adsense/support/bin/answer.py?answer=23168

What your readers see

Ideally, the only difference that your readers will see is more relevant advertising.

Inserting a picture into a blog post

This article about integrating Picasa and Blogger has instructions for inserting a picture into a blog post or page.

It applies no matter whether the picture comes from, but has particular information about pictures that are already in Picasa.

Pictures and blog posts

When you want to put a picture into a blog post, you can either upload it through Blogger's editor, or upload it to somewhere on the internet first, and then just link to that location from Blogger.

I recommend uploading pictures outside Blogger because you can control the size and picture quality of the uploaded files: if you do the upload through Blogger, then the resolution is often reduced and this can make your pictures look fuzzy. However I do recommend using Picasa-web-albums as the "somewhere else on the internet, because only pictures stored in Picasa can be used as thumbnail images for your post.

How to put a picture into a post

1 Make sure you know where the original picture is and that you have copyright permission to use it.

2 If the photo is not already on the internet, upload it to Picasa-web-albums, or another tool (eg Flickr, Photobox, etc) that will give you the link to the picture.

3 Copy the internet-location (ie the URL) of the picture file, (This article tells you how to find the location of a picture that's stored in-Picasa web-albums.)

4 Click the picture icon on the toolbar:

4 Enter the picture location into the box that opens.

If the picture is on your computer use the "Upload an image" dialog, or if it is on the internet, use the "Web address(URL" option.

5 Click Ok.

6 The picture you have chosen appears in your Edit Posts window.

Controlling the pictures in your post:

Size and alignment:
When you click on a picture, a small menu opens (generally beside or under the picture), with options to:

choose the size (small, medium, large, extra-large),
align it (left, centre or right)
remove it

If you want the picture to sit in the middle of a paragraph of text, rather than underneath it,

Go in to Edit HTML mode
Locate the picture you want
Delete the line before it that says

<div class="separator" style="clear: both; text-align: center;">

Delete the first line after it that says

</div>

Picture Position:
Quite often, pictures that you add through the toolbar are put at the start of the post, or perhaps the start of the current paragraph, instead of exactly where you want them.

You can often move a picture around by drag-and-drop (click the picture, drag it, and drop it where you want it to go) - though sometimes this doesn't work as well as it should.

You may need to edit the HTML to move the picture around: to do this, go into Edit HTML mode, and find the code for your picture relative to the other text in your post. Every case is a little different, but in general the code for a picture looks like:

<a href="http://4.bp.blogspot.com/tkoGx2454hA/s1600-h/Inserting+a+picture.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-ufFKAr0d1qmq9aW1KZfNNsv-AbPNBP0y739vGFE5k_qh3d0L2VvpYad99hacIJ43NVQtcwTW5ABdd4rba9DLBlzz0RABme-IMzdy28SvaiCwDB_-1EG6oqf4kDwZfgylWifcOKtc5it5/s400/Inserting+a+picture.gif" /> </a>

If you want to move a picture by editing the HTML, make sure that you take all the code between the opening <a href .... and the closing </a>

For more information about how picture code is structured and how you can change it, see stopping pictures in your blog from being "clickable". and putting text and pictures side by side.

Jaguar XFR

A marca inglesa aumenta sua oferta no Brasil, oferecendo agora o sedã esportivo XFR. Custando 450 mil reais, ele chega num nível alto, fazendo oposição aos consagrados BMW M5, Audi RS6 e Mercedes-Benz E63 AMG.

A letra R traz variadas melhorias ao XF comum. Por fora, os quatro canos de escapamento e as tomadas de ar no capô e na frente das portas dianteiras denunciam que se trata de um Jaguar mais “nervoso”. No interior, a esportividade é sinalizada pelo painel com detalhes em alumínio, e pelo couro perfurado que reveste volante e bancos, estes na cor vermelha, e ambos ostentando a inicial de Racing.

O pacote de equipamentos condiz com o luxo exterior ao unir a eletrônica com a sofisticação, resultando no computador de bordo com touchscreen, e que regula funções como o ajuste eletrônico do diferencial e o controle de tração. Comandado pelo câmbio de seis marchas, seu excelente desempenho é garantido pelo 5.0 V8 de 510 cv, resultando em 0 a 100 km/h em 5 segundos e velocidade máxima de 250 km/h, limitados eletronicamente.

Putting a Picasa slideshow into your sidebar

This article shows how to put a slideshow from Picasa-web-albums into a gadget on your blog.

Overview

Previously I've described the options for linking your blog and Picasa-web-albums, and noted that putting a slideshow into a gadget is one option.

A slideshow is a set of photos that automatically advance from one to the next - it's a little different from an album, which is just a collection of photos with no auto-advance feature.

There are two approaches you can take to putting a PWA slideshow into your blog:

Getting the code from Picasa and using a HTML/Javascript gadget.
Using Blogger's slideshow gadget.

The 2nd option is easier, but the first (usually) gives you more control over how the slideshow works.

HTML/Javascript Gadget Approach:

(NB a similar approach will work for other blogging tools, eg Wordpress, thought the details will vary slightly)

Go to Picasa Web Albums (http://picasaweb.google.com/home).
Check that you have already uploaded the album you want from your PC to Picasa-web-albums.
(and if you haven't, go back to Picasa and upload it now)
Choose an album by clicking on it.

The album view opens, showing you a thumbnail of all the photos in it on the left of the screen. On the right of the screen, there is a sidebar of useful tools. One of these is "Link to this Album".
Click on "Link to this Album"
Click on "Embed Slideshow"
This opens a new dialog box, over the top of your current browser window.
Fill in the option details you want (slideshow size, whether or not to show captions and to autoplay the slides, etc)
Copy the HTML from the box at the bottom of the left hand-side (the one labelled "Copy and paste ..."
You can now put this HTML into your blog, the same way you would add any other 3rd party HTML : option 1 in this article describes how to put it into a gadget.

Alternative:

You may be able to use the slideshow gadget instead. To do this, follow steps 1 and 2, and then:

Go to Picasa Web Albums (http://picasaweb.google.com/home).
Check that you have already uploaded the album you want from your PC to Picasa-web-albums.
(and if you haven't, go back to Picasa and upload it now)
Return to Blogger, and:
In pre-Sept-2011 Blogger, go to Design / Page Elements in Blogger, or
In post-Sept-211 Blogger, to do the Layout tab
Click "Add a gadget" in the area where you want to put the slideshow.
Choose the Slideshow gadget,
Choose these options - in the order shown (ie work down the page - some of the bottom options won't have the right values availabl until the earlier ones are set)

Source = Picasa web albums
Option = Album
Username = the name of the google account where the album is stored. (eg, mine is maryc.fromnz)
Album = which ever album your photos are in.

Save the gadget, and check that the position is correct.

Some people advise against saying that Picasa-web-albums is the source: they suggest choosing Other, and just pasting in the album's URL. I haven't yet found any reasons for this, but it's worth trying if using Picasa as a source doesn't work for you.

Options for linking Picasa into your Blog

There are various places on your blog where you can put items from Picasa - and different options from Picasa too (individual pictures, albums, slideshows). This article describes them, and links to articles with specific instructions about each combination.

Where to put Picasa items on your blog:

Previously, I looked at how Picasa manages pictures, and the advantages and disadvantages of using each type of Picasa item in your blog.

In short, you can choose where to put Picasa pictures, album links or slideshows in your Blog.

Options include:

inside an individual post,
as a gadget in your sidebar
as a gadget in some other part of the blog that is set up to take gadgets (eg the header or footer)

The advantanges and disadvantages of each position are just the same as they are for other types of item (widget, diagram, map, graph, spreadsheet, etc) that you might put on your blog, ie they're not specific to Picasa items, and they vary a lot depending on your blog's design and niche. So I'm not going in to them here..

How to put Picasa items into your Blogger blog:

(may of the principles here will work with Picasa and other types of blogging software - eg Wordpress, Typepad, etc - but these articles are targetted to Blogger)

	Inside a Blog Post	In a Gadget
As an individual picture	Putting a Picture into a page on Blogger	Inserting a Picture as a Gadget.
As an Album link	Linking to a Picasa album in a Blogger post	Linking to a Picasa album in your sidebar (or other gadget)
As a Slideshow	Putting a Slideshow (from a Picasa album) into a Blogger post	Putting a Slideshow (from a Picasa album) into your sidebar

Picasa & Blogger - series overview

Blogger-Hints-and-Tips has a series of posts about integrating Blogger and Picasa. This is the "home page" for the series, and has links to all the articles.

Articles in the series include:

What is Picasa - a very basic introduction

How Picasa Manages Pictures: Understanding Picasa, Picasa-web-albums and Blogger (under development)

Advantages and disadvantages of using each type of Picasa item

Options for putting things from Picasa into Blogger (with links to detailed how-to instructions for inserting pictures, albums and slidehows into Blogger posts and gadgets)

Finding a picture's URL in a Picasa-web-album

Wednesday, January 13, 2010

Blog Archive