{Tutorial} Bilderliste/ Galerie

» 11.09.2015  9 Federgrüße «

Heute gibt es mal ein bisschen was neues auf meinem Blog, und zwar ein Tutorial!

Ich möchte euch zeigen, wie man eine Galerie bzw. eine Liste aus Bildern, zum Beispiel für eine Wunschliste oder euren SuB, in einer Blogpage einfügen kann, in etwa so:


Zu allererst geht ihr auf Blogger und klickt links auf "Seiten"

Wenn ihr das gemacht habt, geht ihr entweder auf "neue Seite" oder ihr nehmt eine bereits vorhandene Seite:

Wenn ihr dann im Bearbeitungsmodus seid, klickt ihr auf html:


Wenn ihr eine neue Seite angefangen habt, werdet ihr ein leeres Bearbeitungsfenster sehen


Dort gebt ihr dann einfach folgenden Code ein:

<div align="center">

<a title="angezeigter Text"><img src="Bild URL" style="border-radius: 5px; height: 125px; width: 80px;" /></a>

</div>

Kopiert einfach den Code in das HTML Fenster und fügt den Rest in die Anführungszeichen ein. Das ganze kopiert ihr dann einfach immer und immer wieder, so oft wie ihr es braucht.


<div align="center">

<a title="angezeigter Text"><img src="Bild URL" style="border-radius: 5px; height: 125px; width: 80px;" /></a>

<a title="angezeigter Text"><img src="Bild URL" style="border-radius: 5px; height: 125px; width: 80px;" /></a>

<a title="angezeigter Text"><img src="Bild URL" style="border-radius: 5px; height: 125px; width: 80px;" /></a>

</div>




Das Ergebnis sieht bei mir so aus:





Noch eine kurze Erläuterung:

angezeigter Text: Dort schreibt ihr rein, welcher Text angezeigt werden soll, wenn ihr mit dem Cursor über das Bild fahrt.
Bsp: "Selection, Kiera Cass" o.ä.


Bild URL: Sucht nach dem Bild das angezeigt werden soll und macht einen Rechtsklick mit der Maus. Dort sollte dann "Bild URL kopieren" oder ähnliches stehen. Da klickt ihr drauf und fügt den kopierten Link zwischen die Anführungszeichen ein. Verlagsseiten und Amazon haben meistens Bilder in einer guten Qualität und mit einem kurzen, übersichtlichen Dateipfad.


border- radius: 5px: Das ist dafür verantwortlich, dass eure Bilder abgerundete Ecken mit dem Radius 5px haben. Wenn ihr lieber eckige Bilder haben wollt, lasst den Teil einfach weg. Wollt ihr die Ecken abgerundeter haben, gebt anstelle der 5 eine größere Zahl ein (oder andersherum, wenn ihr die Ecken etwas eckiger haben wollt, gebt eine kleinere Zahl ein) da müsst ihr ein bisschen ausprobieren, was euch gefällt. 

height: 125px; width: 80px; : Das ist die Gesamtgröße des Bildes. Wenn ihr diese ändern wollt, probiert einfach ein bisschen an den Zahlen rum bis es euch gefällt.

<div align="center">: Das ist dafür zuständig, die Bilder unter- und nebeneinander anzuzeigen. 
Möchtet ihr einen Zeilenumbruch (also praktisch wie ein klick mit der Enter- Taste) erzwingen, fügt einfach nach dem Bild, nach dem ein Zeilenumbruch stattfinden soll <br/> ein.


Ich hoffe mein Tutorial hat euch geholfen und war verständlich:)
Wenn ihr noch Fragen habt, schreibt sie in die Kommentare!

Liebe Grüße und ein schönes Wochenende

Kommentare:

  1. Huhu Jojo,
    Danke für die schöne knappe Erklärung :) Muss ich unbedingt ausprobieren.
    Liebe Grüße und ein schönes Wochenende,
    Sophie

    AntwortenLöschen
    Antworten
    1. Hi Sophie,
      schön, dass ich dir weiterhelfen konnte:)

      Löschen
  2. Hey Jojo,
    danke für das Tutorial. Wie würde denn der Code aussehen, wenn man in das Bild noch eine Seite verlinken will, z. B. einen dazugehörigen Blogbeitrag?

    AntwortenLöschen
    Antworten
    1. Huhu,
      das ganze würde so aussehen: <a href="Link zur Rezension"
      das fügst du einfach vor title ein

      Löschen
    2. Ach und das <a musst du natürlich nicht zweimal da stehen haben, es reicht wenn du das href= usw blah blah blah vor title einfügst!
      Bitte:)

      Löschen
  3. Huhu:)
    Super tolles Tutorial, werde ich bei der nächsten Gelegenheit gleich mal austesten, bei mir hapert es immer wenn ich eine Bildergalerie erstellen will :D
    Liebste Grüße
    Natalie

    AntwortenLöschen
  4. Hallo liebe Jojo,

    danke für diese tolle Hilfe. Ich hatte schon mal den Code von jemandem bekommen, aber da hat das nicht so geklappt wie ich das wollte. :D Mit deinem Code klappt das aber wunderbar. Jetzt dauert es nur eine Weile bis ich aaaaaaale Bildlinks gesucht habe. Ich hab einen recht umfangreichen SuB. ^^

    Danke nochmal und ein schönes Wochenende noch :)

    AntwortenLöschen

Ich freue mich über jeden Kommentar und versuche jedem eine Antwort zu geben:)