{Tutorial} Bilderliste/ Galerie

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