Bewegende afbeeldingen - animated gif - in Blogger

[Google Gids]

Hallo Bloggers,

Ik kreeg laatst een vraag (van Lutje) of het mogelijk is om bewegende
gif-plaatjes (animated gif in de volksmond) aan je blog toe te voegen
en ik wilde deze vraag uitgebreid behandelen. Het antwoord is nee en
ook ja. Nee omdat het niet mogelijk is via de standaard methode waarop
je afbeeldingen toevoegt. Maar ook ja, want er is wel een mogelijkheid
maar hiervoor is een tikkeltje HTML kennis nodig en je afbeelding moet
ergens anders worden gehost (m.a.w. opgeslagen op een andere locatie
op het internet).

Stel, je kan je afbeelding ergens anders hosten. Dan krijgt jouw
afbeelding een adres zoals bijvoorbeeld http://www.blogger.com/img/logo40.gif.
De afbeelding heet logo40.gif en is opgeslagen in de map 'img' op
www.blogger.com.

Als je een adres hebt, dan kun je in Blogger je afbeelding als volgt
toevoegen:
1. Meld je aan op je Blogger account
2. Klik op 'NIEUW BERICHT'
3. Voer een titel in
4. Boven het bericht-veld staan een aantal knoppen, klik op de
afbeelding van een foto (Afbeelding toevoegen, de derde van rechts)
5. Aan de rechterkant van het venster dat nu verschijnt zie je de
tekst 'U kunt ook een afbeelding vanaf het web toevoegen'. Onder deze
tekst kun je het URL van je afbeelding invullen. (Bijvoorbeeld
http://www.blogger.com/img/logo40.gif)
6. Klik onderaan op 'AFBEELDING UPLOADEN'

Tadaa!

***
(De volgende stappen zijn een stuk ingewikkelder. Als je hier wilt
stoppen klik je op 'BERICHT PUBLICEREN')
***

Nu staat je afbeelding er al, maar meestal niet op ware grote en als
link (de afbeelding is klikbaar) naar de locatie waar de afbeelding is
opgeslagen. Om dit te corrigeren duiken we in de HTML.

1. Met het berichtvenster nog open klik je rechtsboven je bericht op
het tabblad 'Html bewerken'
2. Je ziet nu de volgende tekst/code:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"
href="http://www.blogger.com/img/logo40.gif"><img style="margin: 0pt
10px 10px 0pt; float: left; cursor: pointer; width: 320px;"
src="http://www.blogger.com/img/logo40.gif" alt="" border="0" /></a>

3. Verwijder '<a onblur="try
{parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://
www.blogger.com/img/logo40.gif">'

4. Verwijder '</a>'

Nu staat er alleen nog:
'<img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;
width: 320px;" src="http://www.blogger.com/img/logo40.gif" alt=""
border="0" />'

5. Verwijder hiervan [ style="margin: 0pt 10px 10px 0pt; float: left;
cursor: pointer; width: 320px;" ]

6. Het enige wat er hierna nog staat is: '<img src="http://
www.blogger.com/img/logo40.gif" alt="" border="0" />' Dit is voldoende
om de afbeelding weer te geven in originele afmetingen en niet
klikbaar (dus niet als link).

7. Klik op 'BERICHT PUBLICEREN' en bekijk je blog!

***

Nog een kleine toelichting als je wilt weten wat je net hebt
verwijderd:
HTML werkt met tags en een tag staat altijd tussen < >. De eerste
letter of letters bepalen de functie, de rol van een tag. Bij stap 3
begon de tag met <a wat inhoudt dat dit een link is. De hele tag zag
er als volgt uit:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"
href="http://www.blogger.com/img/logo40.gif">
Ik ga hier niet alles van uitleggen, maar let op het teken aan het
begin en het einde. De tag begint met < en eindigt met >. Alles wat
hierna komt is link en dus klikbaar. Dit houdt pas op bij de
afsluitende tag, namelijk </a>, dit betekend dat het plaatje hier
tussen moet zitten.

En het plaatje zit hier inderdaad tussen. De tag voor een afbeelding
begint met <img en omdat een tag altijd moet eindigen met > gaat dit
hele stuk over de afbeelding:
<img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;
width: 320px;" src="http://www.blogger.com/img/logo40.gif" alt=""
border="0" />
Een kleine toelichting hierop: na scr= staat altijd de bestandsnaam en
de locatie van de afbeelding tussen aanhalingstekens. In dit geval
"http://www.blogger.com/img/logo40.gif". Dit is (natuurlijk) het
belangrijkste deel van deze tag en de rest hebben we eigenlijk niet
nodig... en daarom verwijderen we de rest ook :)

Het volgende onderdeel bepaalt (deels) de locatie en de afmetingen van
de afbeelding:
style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width:
320px;"
Dit willen we in ons geval allemaal niet, dus hebben we dit
verwijderd.

Het enige wat je dus nodig hebt in HTML om een afbeelding weer te
geven is <img src="afbeelding.jpg"> en als de afbeelding op een andere
locatie staat, zoals in ons geval, dan moeten we dit erbij vermelden.
Dus: <img src="http://www.het-adres-van-de-lokatie.nl/afbeelding.jpg">

***

Succes hiermee en alle vragen hierover beantwoord ik graag!

Groeten Jerry

[Evert van Merkestein, Klaas Walravens, Dirk van Os.]

Dit is echt een fantastische oplossing en het is gelukt. Bedankt. Wat
ben jij een geweldenaar.
Groet Eef.

On 23 aug, 12:34, Google Gids <google-guide...@google.com> wrote:
> Hallo Bloggers,
>
> Ik kreeg laatst een vraag (van Lutje) of het mogelijk is om bewegende
> gif-plaatjes (animated gif in de volksmond) aan je blog toe te voegen
> en ik wilde deze vraag uitgebreid behandelen. Het antwoord is nee en
> ook ja. Nee omdat het niet mogelijk is via de standaard methode waarop
> je afbeeldingen toevoegt. Maar ook ja, want er is wel een mogelijkheid
> maar hiervoor is een tikkeltje HTML kennis nodig en je afbeelding moet
> ergens anders worden gehost (m.a.w. opgeslagen op een andere locatie
> op het internet).
>
> Stel, je kan je afbeelding ergens anders hosten. Dan krijgt jouw

> afbeelding een adres zoals bijvoorbeeldhttp://www.blogger.com/img/logo40.gif.

> De afbeelding heet logo40.gif en is opgeslagen in de map 'img' opwww.blogger.com.
>
> Als je een adres hebt, dan kun je in Blogger je afbeelding als volgt
> toevoegen:
> 1. Meld je aan op je Blogger account
> 2. Klik op 'NIEUW BERICHT'
> 3. Voer een titel in
> 4. Boven het bericht-veld staan een aantal knoppen, klik op de
> afbeelding van een foto (Afbeelding toevoegen, de derde van rechts)
> 5. Aan de rechterkant van het venster dat nu verschijnt zie je de
> tekst 'U kunt ook een afbeelding vanaf het web toevoegen'. Onder deze

> tekst kun je het URL van je afbeelding invullen. (Bijvoorbeeldhttp://www.blogger.com/img/logo40.gif)

> 6. Het enige wat er hierna nog staat is: '<img src="http://www.blogger.com/img/logo40.gif" alt="" border="0" />' Dit is voldoende