14 Juli 2012

Tutorial - Viele kleine Bildchen nebeneinander?

Hallo Pancakefreunde :)

Heute gibt es auf Books & Senses mal etwas ganz neues: ein Tutorial! Ich bekomme immer wieder Anfragen, wie ich es denn hinbekomme, in ein Gadget auf der Seitenleiste so viele kleine Bildchen einzufügen.

Siehe beispielsweise hier:




Oder auch  hier: 


Für beides ist es im Grunde genommen das Gleiche, nur dass es sich bei dem oberen um ein Gadget auf der Seitenleiste handelt, und das zweite eine Seite ist.

Ich werde es euch anhand des Gadgets erkären. Was ich machen will ist, folgendes Gagdet zu erstellen:



Dazu macht ihr folgendes:

1. Geht bei euren Blogger Oberfläche auf "Layout" und klickt auf Gadget hinzufügen!



2. Wählt das Gagdet "HTML / Java Skript"




3. In das Gadget fürgt ihr den unteren Code von diesem Post ein: KLICK


Das sieht dann so aus:



4. Als nächtest müsst ihr die Bilder hochladen, die ihr in das Gadget einfügen wollt. (Ihr könnt aber auch bereits hochgeladene Bilder verwenden, dann müsst ihr lediglich den Link raussuchen und einfügen.

4.1 Geht dazu auf eure Picasa Seite (über Blogger seid ihr da automatisch angemeldet) und klickt auf "Hochladen"



4.2 Dann zieht ihr die gewünschten Bilder einfach in das Feld, in dem steht "Fotos hierher ziehen"



4.3 Wenn alle Bilder angezeigt werden, dann klickt ihr auf "OK"



5. Dann geht ihr zurück zu dem Album, in das ihr die Bilder hochgeladen habt. Klick dazu auf Startseite und da müsste das Album dann zu finden sein. Klickt auf das Album und dann auf das Bild, dass ihr haben wollt. Wenn das Bild geöffnet ist, macht ihr einen Rechtsklick auf das Bild und wählt "Gradikadresse kopieren" aus.



6. Geht nun wieder zu eurem Gadget zurück und markiert folgende Zeile:



7. Macht nun wieder einen Rechtsklick und wählt "Einfügen" aus. Das müsste dann so aussehen:



8. Macht das auch mit den anderen Bildern und ersetzt immer "Link zum Bild" mit der Grafikadresse des Bildes. Die "Links zur Seite" kommen gleich nocht.
Wenn alle Grafikadressen eingesetzt sind, müsste das so aussehen:



9. Nun wollen wir noch den Link bestimmen, zu dem das Bild führen soll. Markiert dazu folgenden Bereich...



9.1 Sucht euch dann den Link, bzw die URL zu der Seite, zu der euch das Bild führen soll. Ich nehme dazu mal einen Rezensionslink. Wenn ihr ihn habt, dann markiert ihn und kopiert ihn mit einem Rechtsklick.






9.2 Ersetzt nun das bei 9. markierte mit dem Link, den ihr euch rausgesucht habt. Das sieht dann so aus:



9.3 Wenn ihr alle Links eingesetzt habt, sollte das so aussehen. Klickt dann oben rechts auf "Rich Text" um in die "normale Ansicht zu welchseln.



10. Im "Rich Text Modus" sollte es dann so aussehen:




11. Wenn ihr nun auf das Bild klickt, könnt ihr die Größe durch ziehen verändern.



12. Wenn ihr mit den Bildern zufrieden seid, dann klickt auf Speichern und geht wieder auf die Layout Seite. Dort positioniert ihr dann das Gadget an die Stelle, wo ihr es haben wollt per Drag&Drop.






13. Habt ihr das gemacht, klickt ihr wieder auf "Layot speichern"und Tadaaaaa, das Gadget ist da (Hoffentlich :D ) 





Bei der Rezensionsseite funktioniert das ganz ähnlich. Da müsst ihr statt im "Verfassen" Modus, einfach im HTML Modus arbeiten und den selben Code einfügen. Wenn ihr mehr als drei Bilder einfügen wollt, dann kopiert den bei 3. genannten Code einfach ganz oft hintereinander ein.

Ihr findet den Code auch auf der Seite Blogger FAQ, wo es noch viele Erklärungen rund um Blogger gibt. Schaut da einfach mal vorbei :)


So, ich hoffe, ich konnte die Frage zu eurer Zufriedenheit beantworten. Falls immer noch Fragen offen bleiben: Einfach eine eMail schreiben :)

Liebe Grüße, Lisa



Kommentare:

  1. Genial :D ich danke dir... ich hab mich schon gefragt wie das geht. Ich werde es die nächsten Tage auf meinen Blog ausprobieren.

    Sehr schön Beschrieben und ein toller Beitrag :)

    Liebe Grüße :))

    AntwortenLöschen
  2. Tolle Idee, cool, dass du das mal erklärst =) Ich habe diese Frage schon total oft gelesen ^^
    LG

    AntwortenLöschen
  3. Super Post :) Ich habe mich schon sehr oft gefragt wie das geht. Danke für die tolle Anleitung ♥

    AntwortenLöschen
  4. Genial! Danke :D Blogspot ärgert mich mit sowas immer xD

    AntwortenLöschen
  5. Wow, super, jetzt kann ich das auch mal machen! ;)
    Danke und LG,
    Ley

    AntwortenLöschen
  6. Wuhaa! Danke fuer das Tutorial! *-*

    AntwortenLöschen
  7. richtig cooles Tutorial, das ich bei Gelegnheit ausprobieren werde. LG :)

    AntwortenLöschen
  8. Danke Danke Danke ♥ Ich hab gestern den ganzen Tag rumprobiert aber es hat nicht funktioniert :D Jetzt endlich!! :D
    Danke !

    Allerliebstelieblingsgrüße
    Weisselilie

    AntwortenLöschen
  9. Ich will von euch allen Beleglinks :D :D :D
    Damit ich weiß, dass man das auch wirklich versteht ;) :D

    AntwortenLöschen
    Antworten
    1. Mein Beleg ist auf meiner linken Gedgetseite :D

      (http://www.eintauchen-in-eine-andere-welt.blogspot.de)

      Danke!! Fühl dich gedrückt :)

      Löschen
    2. Taadaaa =P Schau einfach nach rechts ;)
      Ich bedank mich sogar, hehe, und andere Erneuerungen hat unser Bloggi auch mtigemacht^^

      http://book-and-shoppaholics.blogspot.de/2012/07/blubbi-blub-impressum-brauchen-wir-das.html

      Hat mir echt geholfen! Das Größe-ändern-Problem hab ich nicht ;)
      LG Ley

      Löschen
  10. Danke für dein ausführliches Tutorial. :)

    LG Yvonne

    AntwortenLöschen
  11. Sehr schön beschrieben!
    Mache ich im Prinzip genauso... (nur das ich nur im HTML arbeite und dann dort auch die Größe ändere)

    glg
    Steffi

    Habe dich übrigens gerade "verlinkt"... das Wanderbuch ist heute angekommen!
    http://his-and-her-books.blogspot.de/2012/07/buchpost-und-gewinnspielwerbung.html

    AntwortenLöschen
  12. Danke!!! Das ist echt genial!!!
    Ich liebe solche Tutorials ♥

    LG
    Niniji

    AntwortenLöschen
  13. In den nächsten Tagen setze ich mich mal in ruhe an meinen PC und versuche das auch. Mal schauen ob das was wird, bin nämlich nicht die geduldigste Person =D
    Danke dir =)

    LG
    Silke

    AntwortenLöschen
  14. Tolle Idee! Und danke für die Anleitung ;-)
    LG von Marie, die ja bekannterweise manchmal auf dem Schlauch steht *hihi*

    AntwortenLöschen
  15. Wuhu, Dankeschön :D
    Muss ich gleich mal probieren ... ;D
    Wollte sowas schon immer auf meinem Blog machen, hab aber
    die meisten Tutorials nicht wirklich verstanden ... o.O
    Fachchinesisch lässt grüßen :P

    LG Lenchen

    AntwortenLöschen
  16. Tolles Tutorial!
    Das wollt ich schon immer mal wissen ;)
    Aber ich kann bei mir irgendwie nicht die Größe einstellen ...

    AntwortenLöschen
    Antworten
    1. Uh! Hinbekommen! ;)
      Aber ich konnte das trotzdem nicht so ziehen, hab das beim Link des Bildes irgendwo mit angegeben.

      Liebe Grüße
      Jessi

      Löschen
  17. Danke schön :-)

    Das hat mir sehr geholfen...
    Ich kämpf nur noch etwas mit der Größe von den Bildern :-(

    Liebe Grüße
    Claudia
    von i-loving-books

    AntwortenLöschen
  18. DANKE!!! ♥ Damit ist das Mysterium der kleinen Bilder geklärt xD

    AntwortenLöschen
  19. aww *___* danke
    Das ist super <3
    Ich finde es toll das du uns das erklärt hast ^^

    AntwortenLöschen
  20. Danke für das Tutorial <3
    Das ist lieb von dir :)
    Ich hab es gleich a usprobiert ^^
    Liebe Grüße

    AntwortenLöschen
  21. ich muss dir auch danken! das war SEHR hilfreich :D

    AntwortenLöschen
  22. Danke für das Tutorial. War sehr hilfreich :)
    Hast du das Layout eigentlich selbst gemacht?Wenn ja, vielleicht könntest du dazu auch noch ein Tutorial machen.
    Natürlich nur wenn du willst. :)

    LG Larissa

    AntwortenLöschen
  23. Dankeschön, ABER ich habe eine Frage: Ich kann meine Bilder nicht verkleinern! Ich kann das auch bei normalen Posts nicht... Hab da nur die Wahl "klein, mittel groß Original und XL" Wie funktioniert das? O.o

    AntwortenLöschen
  24. Tja das klappt wahrscheinlich wieder nur mit Firefox xD

    AntwortenLöschen
  25. Danke übrigens für den Tipp mit den Picasa-Alben! Ich habe da erstmal aufgeräumt ^.^ Da waren sogar noch die ganzen Fotos von meinen zwei Blogs, die ich vor 2 Jahren mal hatte xD

    AntwortenLöschen
  26. Oh mann, ich muss mich nochmal bedanken! Du hast mir wahrlich ein riesiges Mysterium aufgedeckt! DANKESCHÖN! <3

    LG, Lydia

    AntwortenLöschen
  27. Könntest du vielleicht ein Tutorial machen wie man Bilder in einem Post nebeneinander reiht? Das wäre super lieb von dir! Kriegs einfach nicht gebacken :/

    xx
    snowwhite90.blogspot.com

    AntwortenLöschen
  28. Ich habs hinbekommen, vielen lieben Dank! Das war eine total verständliche Erklärung, danke :D

    Liebe Grüße,
    Lyrica

    AntwortenLöschen
  29. An sich sehr toll, aber ich kann die Größe irgendwie gar nicht verändern ... Bin ich zu blöd dazu? /:

    Alles Liebe!

    AntwortenLöschen
    Antworten
    1. Es war zwar eine Spielerei, aber es hat sich erledigt, DANKE fürs Tutorial! :D (Auch wenn sich die meisten wahrscheinlich mit ein paar Bildern weniger auch ausgekannt hätten ;))

      Löschen
  30. Huhu, also ich wollte das mit anderen Bildchen machen, aber irgendwie ging das nicht?! Was kann ich denn ändern?
    LG JuFax3

    AntwortenLöschen
  31. Ich verstehe, dass mit dem Bilder verkleinern immer noch nicht. Bitte um Antwort.
    Ich hoffe du kannst mir helfen.
    Liebste Grüße Niz von bookmoiselles.blogspot.com

    AntwortenLöschen
    Antworten
    1. Inwiefern verstehst du das nicht? Geht es bei dir nicht per Klick&Ziehen? Dann musst du es direkt im HTML Modus versuchen. Bei meinen Tutorials habe ich das auch mal erklärt :)

      Löschen
    2. Danke hat sich erledigt ;)
      Übrigens super Tutorial

      Löschen
  32. Super Tutorial! Vielen Dank!
    LG, Jane

    AntwortenLöschen
  33. Huhu,
    ich wollte das heute auch mal ausprobieren, aber wie komme ich denn zu der Picasa Seite?
    Dankeschön :)
    <3 Fiorella

    AntwortenLöschen
    Antworten
    1. Hey :) Google doch einfach mal "Picasa Webalben". Am besten wenn du auch bei Google angemeldet bist, dann solltest du eigentlich dahin kommen. Villeicht hilft dir da das weiter: https://plus.google.com/photos

      Das ist die gekürzte Version meines Links. Einfach mal probieren. Meld dich, wenn du noch fragen hast :)

      Löschen

Hallöchen :)

Schön, dass du einen Kommentar hinterlassen willst! Ich freue mich immer über Feedback! Meine Antwort zu deinem Kommentar findest du, wenn ich sie geschrieben habe, immer direkt unter deinem :)

Liebe Grüße :)