Ihr Lieben,
heute gibt’s mal was ganz anderes an dieser Stelle. Einige meiner lieben Blogger-Kolleginnen haben mich gefragt, wie ich meine kleine aber feine Rezeptegalerie erstellt habe. Ehrlich gesagt war das ein längerer Prozess, bei dem mein Mann keine zu vernachlässigende Rolle gespielt hat. Danke für die Geduld!

Fügt man auf einer Blogger-Seite nämlich Bilder ein, dann machen die durchaus einfach mal, was sie wollen. Ich war oft am verzweifeln, weil die Bilder verrutscht und kreuz und quer waren.

Grundidee meiner Lösung ist, das die Rezeptkarten in einer Tabelle festgehalten, und somit nicht mehr verrutschen können. Dabei ist wiederum jede Rezeptkarte eine eigene kleine Tabelle, in der oben das Bild und unten die Unterschrift steht. Das bedeutet durchaus ein bisschen Programmierei mit html, aber ich habe versucht es so zu beschreiben, dass auch ich es kapiere 😉

Wichtig ist, das ihr schon wisst, wie man in Blogger Seiten erstellt, Bilder einfügt und mit Links versieht. Praktisch ist es auch, die Bilder bereits vorher so zu verkleinern, dass Blogger das nicht machen muss. Meine Bilder haben alle eine Größe von 200 Pixel Breite und 132 Pixel Höhe. Das ist die Größe, die im Blogger-Editor auch angewendet wird, wenn man auf Bildgröße klein klickt. Sind die Bilder auch im Original so klein, verzerren sie sich z.B. in der mobilen Ansicht nicht so sehr.

Überlegt euch vorher, wie ihr eure Rezepte sortieren wollt. Ich sortiere sie alphabetisch und dann chronologisch (das neueste zuletzt).

Step-by-step-Anleitung

1.    Neue Seite in Blogger erstellen (Testrezepte).

2.    Rezeptbild einfügen. Bei der Auswahl der Bildgröße auf „klein“ einstellen bzw Originalgröße lassen und eine Bilderunterschrift eingeben.

3.    Das Bild inklusive Unterschrift markieren (so wird das Bild UND die Unterschrift verlinkt)
 

und auf die Seite mit Rezept verlinken.

Euer html-code dazu sieht dann so aus (das gelb unterlegt table erstellt die Tabelle eurer Rezeptkarte)(klick aufs Bild vergrößert und wird dann lesbar):

An dieser Stelle empfehle ich euch, den html-Code auszuschneiden und in einen externen html-Editor einzufügen. Die sind in der Regel übersichtlicher und ihr macht auf eurem Blog nichts kaputt. Ich habe diesen hier: http://www.thru-soft.de/pages/software/htmleditor/daten.php

4.    Aus dem code löscht ihr folgende Attribute raus (klick aufs Bild vergrößert und wird dann lesbar):

align=“center“
style=“margin-left: auto; margin-right: auto; text-align: center;“

Das ist dann eure fertige Rezeptkarte. Diese Rezeptkarte muss nun in die äußere Tabelle eingebaut werden.

5.    Der Code für die „äußere“ Tabelle lautet

Die äußere Tabelle kopiert ihr so in euren html-Editor. In diese äußere Tabelle werden nun die Rezeptkarten eingefügt, und zwar da, wo momentan noch die Zahlen stehen. Die obere Mustertabelle besteht momentan aus zwei Reihen à drei Bildern.

6.    Der Code für die fertige Tabelle mit der Rezeptkarte „Zitronenwirsing“ sieht dann so aus (klick aufs Bild vergrößert und wird dann lesbar):

Wundert euch nicht, wenn ihr in Blogger zwischen html-Ansicht und ‚verfassen‘- Ansicht hin- und herspringt, lässt Blogger die unnötigen Zeilenumbrüche weg. Die unteren td und tr stehen dann nicht mehr unter- sondern nebeneinander.

In der ‘Verfassen’-bzw. Vorschau-Ansicht müsste das dann wie folgt aussehen:

7.    Wiederholt die Punkte 2.-4. und 6. für alle Rezepte.

8.    Wenn ihr fertig seid kopiert ihr den gesamten Code (hilfreiche Tastenkombinationen: strg+a markiert den gesamten Text, strg+c kopiert alles, mit strg+v fügt ihr alles wieder ein) und fügt ihn in eine neue Seite bei Blogger (Rezepte, Rezeptübersicht) ein.

Ich hoffe, dass euch meine kleine Anleitung hilft. Bei Fragen könnt ihr euch gerne an mich wenden, ich versuche dann mein bestes :-).

Alles Liebe
Ilka