Recent Posts

Donnerstag, 9. Januar 2014

Tutorial: Bebilderte Rezeptgalerie in Blogger erstellen

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!

Rezeptegalerie in Blogger erstellen

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.

Rezeptegalerie in Blogger erstellen


3.    Das Bild inklusive Unterschrift markieren (so wird das Bild UND die Unterschrift verlinkt)
 
Rezeptegalerie in Blogger erstellen

und auf die Seite mit Rezept verlinken.

Rezeptegalerie in Blogger erstellen


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):

Rezeptegalerie in Blogger erstellen


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):

Rezeptegalerie in Blogger erstellen


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):

Rezeptegalerie in Blogger erstellen


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:

Rezeptegalerie in Blogger erstellen


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

Kommentare:

  1. Super sieht das jetzt aus, schön übersichtlich. Meine süßen Rezepte nehmen momentan überhand und ich sollte sie auch langsam mal unterteilen, aber ich bin grad zu faul =D

    AntwortenLöschen
    Antworten
    1. Danke, liebe Kathy. Kann ich verstehen, ist viel Frickelei. Ich finds bei dir aber noch übersichtlich, mach dir da mal keine Sorgen :-)
      Liebe Grüße
      Ilka

      Löschen
  2. Hallo liebe Ilka,

    das ist ja wirklich mal klasse. Dein Tutorial für die Bildergalerie habe ich gleich mal bei mir umgesetzt und es klappt super gut. Ein bisschen muss ich noch werkeln und dann geht auch meine Bildergalerie online! *freu*

    Danke und liebe Grüße nach Ulm,
    Anna-Karina

    AntwortenLöschen
    Antworten
    1. Liebe Anna-Karina,

      das freut mich sehr, dass es klappt und ich dir helfen konnte! Bin schon sehr gespannt, wann deine Galerie online geht!

      Liebe Grüße
      Ilka

      Löschen
    2. Hallo liebe Ilka,
      nun ist sie also online meine kleine Bildergalerie. Ich habe gedacht ich lasse dir mal schnell den Link da, dann kannst du mal schauen.
      Bildergalerie Januar2014
      DAnke nochmal und bis bald mal in Ulm! Anna-Karina

      Löschen
  3. Hallo liebe llka ;)
    Ich habe die letzten 2 Tage mit deiner Anleitung daran gesessen meine Rezeptübersicht zu überarbeiten. War eine ziemlich Arbeit, aber hat sich total gelohnt.
    Vielen vielen Dank dir für die tolle Anleitung!
    Dieses Durcheinander was Blogger da erstellt, sah iwann nur noch schlimm aus :D
    ♥ Liebe Grüße, Dami

    AntwortenLöschen
    Antworten
    1. Hallo liebe Dami,
      wow, sieht voll gut aus! Freu mich total, dass meine kleine Anleitung weiterhilft! :-)
      Ja, die Bilder in Blogger selber werden Kraut und Rüben angezeigt, das schwimmt irgendwann nur noch alles hin und her. Aber jetzt ists ja aufgeräumt :-)
      Liebe Grüße
      Ilka

      Löschen
  4. Vielen Dank für die tolle Anleitung. Mit ihrer Hilfe habe ich es geschafft, meine Zuckerkram-Übersicht etwas übersichtlicher (tolle Doppelung - haha) zu gestalten!

    Lieb Grüße,
    Barbara

    AntwortenLöschen
  5. Eine super Anleitung! Ich war schon am Verzeifeln mit den ganzen herum hüpfenden Bildern, aber jetzt klaptt es wunderbar! Vielen lieben Dank :)

    Liebe Grüße
    Julia von www.alionsworld.blogspot.de

    AntwortenLöschen

Du hast was zu sagen? Ich freue mich sehr über jeden Kommentar!