Hi zusammen!
Endlich kommt mal wieder ein Post von mir :)
Ich denke einige Leser hier werden ihren Blog zum Darstellen ihrer Fotos nutzen - ich mache es ja nicht anders ;).
Allerdings besteht bei Blogger nur die Möglichkeit, die Bilder alle einfach in einen Post oder auf eine Seite zu packen und man Scrollt sich dann vertikal durch die Bilder. Jedoch kann man leicht mit ein wenig Bastelei im HTML-Code eine Galerie erstellen, in der man horizontal durch die Bilder scrollt. Ich mag diese Art der Darstellung sehr.
Zuerst müssen wir unsere Bilder auf eine konstante Höhe bringen. Dafür nutze ich in Photoscape die Stapelverarbeitung...
Ihr müsst darauf achten, dass auch Querformatfotos mit der ausgesuchten Höhe noch komplett sichtbar im Postbereich sind. Die Bilder speichert ihr nun ab und ladet sie bei einem Bildhoster eurer Wahl oder direkt im Blog hoch.
Wichtig ist nun, den html-Code von allem überflüssigen zu befreien.
Habt ihr die Bilder mit Blogspot hochgeladen, so stellt die Option "Originalgröße" ein. Dann schauen wir in den html-Code und suchen nach unseren Bildern - der Code lautet immer <img src="LINK" /> - und löschen den Rest. Das sieht dann so aus:
Außerdem sollte man darauf achten, dass zwischen den Bildercodes keine neue Zeile angefangen wird, sondern alles direkt hintereinander steht. Also in meinem Falle so:
<img src="http://www.abload.de/img/galerie_011kohz.jpg" /><img src="http://www.abload.de/img/galerie_02b4r4m.jpg" /><img src="http://www.abload.de/img/galerie_039krjx.jpg" /><img src="http://www.abload.de/img/galerie_044cppg.jpg" /><img src="http://www.abload.de/img/galerie_05vdpp4.jpg" /><img src="http://www.abload.de/img/galerie_062lpra.jpg" />
Nun brauchen wir noch die Galerie, die unsere Bilder beinhalten wird.
Dafür fügen wir folgenden Code vor und nach den Bildern ein:
<div style="border: none; margin: 0px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap;">...BILDERCODES...</div>
Und das wars auch schon!
Die Höhe der Galerie passt sich automatisch der Höhe der Bilder an und die Breite passt sich der Breite des Postbereichs an.
(Das Urheberrecht aller Fotos liegt natürlich bei mir)
Viel Spaß mit diesem kleinen Tutorial und ich wünsche euch einen schönen dritten Advent!
Grüße,
Jenny
♥
danke,das werde ich auf jeden fall ausprobieren! :)
AntwortenLöschentolles tutorial, vielen dank dafür! das werd ich demnächst mal ausprobieren.
AntwortenLöschenübrigens, weißt du, wie man einstellt, dass dieser "Gif-Animator" auch ohne Anklicken funktioniert? Bei mir will das nie klappen...
Liebe Grüße!
super tutorial und wunderschöne bilder. (: <3
AntwortenLöschenDie Fotos hast du gemacht?? Verdammt! Die sind total gut!
AntwortenLöschenKlasse Idee, ich ärgere mich ohnehin ständig über die Blogger-Fix-Anordnung der Bilder =)
AntwortenLöschenLG MissXoxolat
total gute Idee, danke dafür :) werd ich später sicher mal ausprobieren!
AntwortenLöschenSuper Tutorial!
AntwortenLöschenKann man in Photoscape die Bilder auch auf eine konstante Breite bringen. Weil das ist immer noch mein Problem und das stört mich wirklich, dass die horizontalen Bilder nicht so breit sind wie die querformatigen. Oder gibt es da einen anderen Tipp den du mit geben kannst?
Wär super wenn du mit helfen könnstet. Vielen Dank :)
Liebe Grüße, Magdalena :*
@Alice:
AntwortenLöschenDen Gif-Animator habe ich noch nie genutzt, dazu kann ich nichts sagen :)
@Magdalena:
Meinst du wenn du die Bilder normal in den Blog einbindest? Ja, dann ist die fixe Breite sehr praktisch. Mache ich bei meinem Blog ganz genauso, ich verkleiner alle Bilder vorher auf 800px-Breite (so breit sind halt meine Posts).
hallo :) bin durch zufall mal auf deinen blog gestoßen und muss sagen er gefällt mir sehr gut :)
AntwortenLöschendarf ich dich noch fragen , wie du die schönen schneflocken ins bild gezaubert hast, ich weiß leider nicht wie das geht und wollte das schon seit ewigkeiten herausfinden !
alles liebe julie
oh toll das wollt ich schon lange gerne wissen danke!:)
AntwortenLöschengroßes dank ♥ du bist der hammer :D !!!!
AntwortenLöschen@Julie:
AntwortenLöschenDies hier ist nicht mein Blog, ich bin hier nur Autor und schreibe ein paar Tutorials :) Schau doch einfach mal auf die Startseite des Blogs, das Tutorial mit den Schneeflocken hat Mira vor ein paar Tagen erst gepostet :)
Oh ja... das kann ich gut gebrauchen. Werde ich bei Gelegenheit mal ausprobieren.
AntwortenLöschenDankeschön.
LG
ihr wurdet gelobt für eure vielen ganz tollen tutorials. :)
AntwortenLöschenhttp://sparkling-in-the-daylight.blogspot.com/
oh ähm tschuldigung du hast schon einen post gemahct zu schneeflocken , hat mir sehr geholfen , tausend dank, was hast du für einen geilen blog, man findet so tolle einstellungen und alles, wirklich der wahsinn !!!!
AntwortenLöschenund hast du schon mal herausgefunden, wie man den mauszeiger in einem blog verändern kann, ich würde mich sehr freuen, wenn es dazu auch mal einen post geben würde , alles lieb julie ;*
Hey Süße
AntwortenLöschenich veranstalte zurzeit auf meinem Blog ein Gewinnspiel.. schau doch mal vorbei !
http://beautysarosh.blogspot.com/2011/12/weihnachtsgewinnspiel.html
Liebste Grüße
Beautysarosh.blogspot.com ♥
Super Tutorial! Ich hätte mal eine Frage:
AntwortenLöschenWie ändere ich die Hintergrundfarbe bei einem markierten Text? Also wenn ich z.B auf eurem Blog einen Text markiere wird es grün! Wie kann ich das ändern?
♥
Hey. Ich finde euren Blog hier super. (:
AntwortenLöschenIch habe aber trozdem mal noch eine Frage: Wie schaff ich es denn zum Beispiel mehrer Seiten anzulegen und auf denen dann unabhänig voneinander Posts zu erstellen, die auch kommentiert werden können.??
Das ist sehr wichtig für mich, ich würde mich also über eine antwort freuen. (:
Liebe Grüße, Patty.
http://patty-318.blogspot.com/
Ich werds gleich morgen ausprobieren!
AntwortenLöschengefällt mir richtig gut !
AntwortenLöschenaber ich hätte noch eine frage . Könntest du vielleicht ein turtorial machen , wo du ( wenn du weißt wie das geht ) zeigst , wie man sein header fest an einer stelle hat und die post sich nur bewegen ? Verstanden ?:D wenn nicht auch nicht schlimm , würde mich nur freuen oder du schreibst mir einfach wie das geht ( wenn du willst ) auf meinen Blog als kommentar;) Liiebe grüße dena
http://thisisgoingtobeagreatthing.blogspot.com/
Bei mir klappt das ganze leider nicht :(
AntwortenLöschenich hab's ausprobiert & bei mir klappt das leider nicht, weil dann sind alle bilder untereinander und unter dem letzen bild ist dann so ein 'scroll-teil' wo aber nichts zum scrollen ist. maaannn :D achso, und mir würd es auch brennend interessieren, wie man zu anderen seiten einen eigenen link/kommentare hinzufügen kann ! liebste grüße, & wer lieb wenn ihr bei mir als kommentar antworten würdet:) <3 http://superwoman-na.blogspot.com
AntwortenLöschengeht mir genauso :(((
LöschenBei mir funktioniert das leider nicht, ich habe das so gemacht, wie du es beschrieben hast, aber die Bilder sind trotzdem untereinander. :(
AntwortenLöschenKann man die Fotos auch anders auf eine konstante Höhe bringen?
AntwortenLöschenvielleicht mit gimp? ich würde mir ja photoscape runterladen, aber ich habe keinen Windows, deshalb geht's nicht.. :D
ich würde mich freuen, wenn du mir auf meinem Blog antworten könntest. (:
http://fotografieistleben.blogspot.com/
bei mir hast gleich funktioniert! Super Danke!
AntwortenLöschen:o
AntwortenLöschenund ich hab den ganzen Spaß mit HTML (Tabellen, etc. blabla) selbst zusammengeschrieben ! Jetzt entdecke ich hier deine Variante. Oh man :DDD
Hey cool, bin von jemandem hierher geschickt worden und benutze dein System nun auf meinem Blog .. vielen Dank dafür :) Hätte nie gedacht, dass ich das mal hinbekomme!
AntwortenLöschenoch nööö, funktioniert nicht, die scrollbalken erschenen zwar oben und unten, aber die bilder bleiben UNTEREINANDER... :o((
AntwortenLöschenhi ;) das ist ein tolles tutorial ....ich hab noch eine frage ...diesen rahmen als ob es ein zettel wäre der aufliegt ..wo bekommt man den ? lgtani
AntwortenLöschenWirklich richtig hilfreich!
AntwortenLöschenIch hab nur noch ein Poblem: obwohl ich die Höhe der Bilder bei Photoscape mehrmals verkleinert hab, ist die Galerie trotzdem noch genauso "riesig", also von der Höhe her. Ich hätte sie aber gern niedriger, kannst du mir da vlt helfen bzw. sagen was ich vlt falsch gemacht habe? Wäre sehr lieb!
Liebe Grüße
Paloma :)
Dieser Kommentar wurde vom Autor entfernt.
AntwortenLöschenwie speichert man das denn, also die Stapelverarbeitung? :O
AntwortenLöschenkann mir da jemand helfen??
Die musst du gar nicht direkt speichern. Das macht der von automatisch. :)
LöschenDanke für das Tutorial. Hat mir wirklich seeeehr geholfen und ich hab gleich mal eine Fotoschau von mir für meine 'Über mich' Seite erstellt. Ging super schnell und einfach. Danke. :)
AntwortenLöschenhttp://estherliebt.blogspot.de/
Na toll.. Heute Nachmittag hat alles super funktioniert. Und ketzt ist alles ganz anders. Die bilder stehen nebeneinander und darunter ist das zum Scrollen. Bloß kann man nicht scrollen, da dort drinnen keine Bilder sind. Kann sich das vielleicht mal jemand angucken und mir helfen? :)
LöschenVielen Dank für das tolle Tutorial.
AntwortenLöschenIch habe meine Bilder als Link gelassen und einfach Deinen <div style...> Tag um den von Blogger produzierten Code herum gewickelt. Die Höhe der Bilder habe ich nicht vorher angepasst, sondern direkt im Code, in dem ich die height auf 200 gesetzt habe und die width einfach entfernt. Zusätzlich ist noch der rechte und linke border rausgeflogen.
Nochmals vielen Dank für die Anregung!!!
Das ist total klasse, danke!
AntwortenLöschenWeiß hier zufällig jemand, wie man eine vertikale Scrollgalerie einbindet, so wie hier in diesem Post → http://sizzixblog.blogspot.de/2012/11/die-cutting-paper-filigree-reindeer.html
AntwortenLöschenDas würde mich auch sehr interessieren :)!
Laureen ♥
hallo!
AntwortenLöschenalso ich find das total toll und hab es auch geschafft, das ganze einzubauen - danke für die anregung und hilfestellung!!!
jedoch hab ich da schon noch eine frage: wie kann ich denn zwischen den einzelnen bildern die abstände vergrößern?!
mit margin hab ich es bereits versucht und irgendwie klappt's einfach nicht... :/ füge ich es an der falschen stelle ein?! muss ich nach jedem bild extra was einfügen oder geht es auch einfacher?!
liebe grüße und
"fröhliches bloggen"
Michaela
vielen dank :))
AntwortenLöschenhat bei mir eine weile gedauert :D aber ich habs dann doch geschafft ;)
LG, Ronja
ich hab das auch mal probiert - und es hat FUNKTIONIERT :D :D ich hab grad Riesenfreude ^^
AntwortenLöschenDanke für die absolut tollen und inspirierenden Tipps und Posts :)
♥NOMINAO
Hei, habt ihr vielleicht auch einen Code für diese Galerie in CSS? Wäre wirklich super toll!!! :)
AntwortenLöschenViele liebe Grüße!
Dieser Kommentar wurde vom Autor entfernt.
AntwortenLöschen