Montag, 7. April 2014

Eine Bildergalerie einbinden

Eine Bildergalerie kannst du in deinem Blogger-Blog entweder in die Sidebar mithilfe eines Gadgets einbinden, oder direkt in einem Blogbeitrag.

Slideshow in der Sidebar

Für eine Sidebar-Slideshow gibt es in Blogger ein Gadget. Klicke im Blogger-Dashboard auf "Layout" und dann auf "Gadget hinzufügen".


Wähle das Gadget "Diashow", in dem du auf das + Zeichen klickst.

Es öffnet sich ein Popup, indem du deine gewünschten Einstellungen vornehmen kannst.

Klicke anschließend auf "Speichern" und dann nochmal auf "Layout speichern". Die Slideshow ist nun in deinem Blog eingebunden.


Bildergalerie in einen Blogbeitrag einbinden

Die Fotos sollten alle die gleiche Höhe haben! Lade die Fotos einzeln über den Bildupload-Button über dem Beitragsfeld hoch ...



... und gib allen die gleiche Größe (klein oder mittel).



Wenn die Bilder fertig hochgeladen sind, wechselst du in die HTML-Ansicht deines Beitrags, indem du oben links den Button "HTML" klickst.


Hier fügst du in jedem <img>-Tag die CSS-Klasse "galerie" hinzu:

<img border="0" class="galerie" src="http://2.bp.blogspot.com/-UYUFiNz9AME/U0K4QZTsdgI/AAAAAAAABPI/NN7vz1yJebg/s1600/1396776962-658.jpg" height="150" width="200" />

 Gehe dann im Blogger-Dashboard auf "Vorlage" und dann auf "HTML bearbeiten".


Hier suchst du dir nun den Teil mit den CSS-Angaben für deinen Blog heraus. Drücke dafür Strg+F und suche nach ".post". Du landest nun mitten im CSS-Code und kannst nun einfach die neue CSS-Klasse ".galerie" hinzufügen.

Gib diesen Code in die CSS-Datei ein und klicke dann auf "Virlage speichern":

.galerie {
float: left;
margin: 0px 10px 10px 0;
width: 240px;
height: auto;
}

Wenn deine Bilder nun noch nicht nebeneinander stehen, schau nochmal in der HTML-Ansicht deines Beitrags nach, ob dem Bild oder den Bild-umfassenden Links eventuell ein "clear: both;" enthalten ist. Wenn ja, lösche es raus (ich habe sicherheitshalber alle Angaben bei style="" entfernt.


Und fertig ist deine kleine Galerie :)

 



Kommentare :

  1. Hallo,
    erst einmal wollte ich sagen, dass ich es wirklich toll finde, dass du dir so viel Mühe gemacht hast, diesen Workshop zusammenzustellen. Ich kann gar nicht sagen, wie dankbar ich bin, wenn man als Laie keine Ahnung hat und nichts so funktionieren will, wie es soll... Deine Erklärungen sind super!

    Allerdings habe ich doch noch ein kleines Problem und komme einfach nicht dahinter, was ich machen kann. Und zwar habe ich ausprobiert, so eine Bildergalerie in einem Eintrag zu erstellen. Das funktioniert auch, mein Problem ist aber, dass manchmal eines der Bilder in der Galerie innerhalb einer Reihe ein kleines Stück nach unten verschoben ist. Versteht man, wie ich das meine? Ich steige leider nicht dahinter, wo mein Fehler liegt, dass immer nur ein Bild so verschoben wird. Hast du vielleicht noch einen Tipp für mich?

    LG, Gerdi

    AntwortenLöschen
  2. Hallo liebe Gerdi, das kann viele Ursachen haben. Dafür müsste ich direkt im Code deines Blogs nachsehen.

    Gern kannst du meine HTML-Bloghilfe in Anspruch nehmen: http://www.julia-braeunig.de/leistungen/html-bloghilfe/ Schreib mir dazu einfach eine Mail an info(at)julia-braeunig.de - Vielen Dank!

    AntwortenLöschen
    Antworten
    1. Ich habe dasselbe Problem, kenne mich auch ein wenig aus, vielleicht könntest du mir das Problem ja mitteilen und was geholfen hat:)

      Löschen
  3. Hey,
    versuche gerade nach deiner Anleitung eine "Bildergalerie in einen Blogbeitrag einbinden".

    Scheitere aber daran das ich kein Wort mit ".post" in meinem HTML-Code finde.

    AntwortenLöschen
    Antworten
    1. Lass bei der Suche mal den Punkt vor post weg und es wird alles angezeigt mit post. Dann einfach manuell die Zeile mit .post suchen

      Löschen
  4. danke für den Tip. Wenn ich mir aber grad vorstelle das 20 Fotos so einbinden soll...ohh. Gibt es denn kein Tool ? Früher konnte man Picasa Alben einbinden .
    mit 2 Klicks.

    AntwortenLöschen
  5. Besten Dank für den Tip. Das man für so etwas einfaches soviel Aufwand betreiben muss ist mir unverständlich. Eine Grundfunktion die ohne HTML im Editor machbar sein muss. Was haben sich die Leute von Blogger wohl dabei gedacht als sie diesen prähistorischen Mist entwickelt haben. Einfach nur traurig! Gut gibt es andere Anbieter.

    AntwortenLöschen
  6. Hei deine Tipps und Tricks finde ich mega hilfreich, besser als das von Google selber,werde es weiter empfehlen und weiterhin rein schauen.! :D

    AntwortenLöschen
  7. I am very grateful to read your blog. Thank for the share

    Werbebanner

    AntwortenLöschen
  8. Hallo der Beitrag ist klasse und funktioniert bei mir, ich würde allerdings gerne eine Reine Galerie Seite erstellen, hast du dafür einen Tipp was ich machen muss?

    AntwortenLöschen
  9. Hey, danke für deine Tipps aber ich kann leider nirgendwo das Gadget "DIashow" finden.
    WOllte meinen Blog für meine Weltreise machen und so einfach wie möglich Bilder Hochladen und sie möglichst in einer Galerie halten. Das ganze mit dem HTML etc ist für mich schon zu viel Aufwand. Hast du da einen Tipp?

    Liebe Grüße

    AntwortenLöschen
    Antworten
    1. Geht mir genauso, ich glaube die haben das aus welchen Gründen auch immer entfernt. Ist mir völlig unverständilch wie ein so großer Bloganbieter da wirklich überhaupt keine Lösungen zur Fotoverwaltung und -anzeige liefern kann. :(

      Löschen
    2. Es sind einige Funktionen verschwunden leider und auch viele Css Code funktionieren nicht mehr

      Löschen