Allgemein

Unterseiten mit Bildergalerie [Tutorial]

Ich wurde gefragt, ob ich nicht einmal erklären könnte, wie ich diese kleinen Bildergalerien auf meinen Unterseiten AMUs, Nagellacke und Bücher erstellt habe. Eigentlich ist es gar nichts besonderes, aber manchmal helfen ja schon ganz einfache Tipps weiter. Also gibt es jetzt ein kleines Tutorial dazu. Für viele wird das nix Neues sein, aber dann schaut einfach beim nächsten Post wieder vorbei 😉
Zunächst einmal müsst ihr eine Seite anlegen. Dazu geht ihr im Designbereich von Blogger links auf den Menüpunkt Seiten
Bei mir sind da schon meine Seiten drin. Wenn ihr noch keine angelegt habt, dann ist der Bereich natürlich noch leer. Ihr klickt dann einfach oben auf Neue Seite.
Dann öffnet sich ein kleines Fenster und da wählt ihr dann einfach Leere Seite an. Anschließend öffnet sich ein Editorfenster analog zudem, in dem ihr normalerweise eure Posts schreibt. Oben könnt ihr einen Seitentitel eingeben. Bei mir steht da beispielsweise Nagellacke. Nun klickt ihr in den Contentbereich und klickt oben auf das kleine Foto-Symbol. Jetzt könnt ihr ein Bild von eurem Computer hochladen und es erscheint dann auch sofort. Ich bearbeite/verkleinere die Previewbilder immer vorher mit meinem Grafikprogramm, sodass sie alle die gleiche Größe haben und auch nicht so viel Speicherplatz verbrauchen.
Dann klickt ihr das Bild, das ihr zu dem entsprechenden Post verlinken wollt, an und markiert es sozusagen. Nun geht ihr oben in der Navigationsleiste auf Link.
Es öffnet sich ein neues Fenster, in welchem ihr unter dem Punkt Webadresse einfach eure Zielurl eingebt. Anschließend klickt ihr auf OK. Euer Bild ist nun mit dem Post verlinkt. Ihr könnt das Ganze natürlich auch per HTML-Code machen.
Der Verweis wird mittel a href-Tag codiert. Den Aufbau seht ihr oben (zum Vergrößern einfach Klicken). Das kleine A steht für anchor und href für hyper reference. Danach folgt ein = und die Adresse der Zielseite in Anführungsstrichen. Ihr müsst beachten, dass ein Tag immer geöffnten und geschlossen werden muss und zwar mit dieser eckigen Klammer. Das target=“_blank“ bedeutet nur, dass die Zielseite in einem neuen Fenster geöffnet wird. Das könnt ihr auch weglassen oder ändern. Gleich im Anschluss folgt das, was verlinkt werden soll, also quasi euer Bild. Hier beginnt es mit img scr (image source) – in meinem Beispiel seht ihr noch den Zusatz border=“0″, was soviel heißt, wie keinen Rahmen um das Bild. Hier gibt es jede Menge von Attributen, die ihr hinzufügen könnt. In Anführungsstrichen setzt ihr dann wieder die Url zu eurem Bild. Da das Bild ja Teil des Links ist, müsst ihr nun den gesamten Tag noch schließen mit einem Slash vor dem a und der eckigen Klammer.
Wenn ihr wollt, dass eure Bilder gleich so neben einander stehen wie bei mir, dann müsst ihr die einzelnen a href-Tags aneinander setzen nur mit Leerzeichen dazwischen. Also kein br in eckiger Klammer. Im Nicht-HTML-Editor ist das etwas schwieriger, weil man da nur die Standardeinstellungen hat. Es ist dort nicht möglich, die Bilder so einzustellen, dass sie alle nebeneinander stehen. Ihr könnt die Bilder zwar hin und her ziehen, aber irgendwas springt dann immer so um, wie man es eben nicht haben möchte. Ich finde es wesentlich einfacher, dann gleich den HTML-Code zu editieren. Also nur MUT!!!
Konntet ihr mit den Infos etwas anfangen?

You Might Also Like

9 Comments

  • Reply
    Si~ist~Mone
    6. April 2013 at 7:05

    Danke für die Anleitung und die Mühe die du dir gemacht hast.
    Finde deine Galerie wirklich toll und habe das schon öfters auch auf anderen Blogs gesehen.
    Auf meiner To Do Liste ist es schon, genauso wie vieles andere 😉

  • Reply
    Andrea
    6. April 2013 at 8:27

    Das werd ich mal ausprobieren. Danke für den Anreiz und deine Mühen!

  • Reply
    Isa
    6. April 2013 at 9:07

    Sowas habe ich mit meinen AMUs gemacht sehr tolle Übersicht hast du 🙂 wie man eine schöne Swatchsammlung macht würde mich interessieren, ich habe zwar eine aber die Bilder sind teilweise unterschiedlich groß

  • Reply
    Arina Schinköthe
    6. April 2013 at 11:15

    wunderbar, sowas wollte ich schon lange machen 🙂
    lg, arina

  • Reply
    Katharina
    6. April 2013 at 13:36

    Cool, vielen dank! Das würde ich gerne mit meinen amus und mit den Büchern machen, die ich rezensiert habe.

  • Reply
    shalely
    8. April 2013 at 1:43

    das ist ne super Anleitung. Wenn ich demnächst mal etwas mehr Zeit habe -.- werde ich es sicher ausprobieren.

  • Reply
    Babs
    8. April 2013 at 6:24

    Vielen Dank! Eigentlich logisch wie du es gemacht hast und trotzdem habe ich mich immer gefragt wie du das hinbekommen hast. Wollte das schon so lange selbst mit meinen Nagellacken, Büchern und Filmen machen. Jetzt kann ich mich da mal dran setzen 🙂

  • Reply
    Silva
    12. April 2013 at 19:55

    Danke für die Anleitung, es ist ja wirklich ganz einfach 😀 Das werde ich mal ausprobieren, wenn ich Zeit habe.
    Alles Liebe!

  • Leave a Reply