HTML #35: Bilder als Link einfügen

Wenn ich Fragen bekomme, dann freue ich mich immer sehr, wenn sie dann gleich doppelt gestellt werden und ich eh schon so eine Idee hatte, dann ist es umso schöner, denn dann weiß ich, dass ich auf dem richtigen Weg war. So auch heute, denn nicht nur Moni von "Oma macht das schon" sondern auch Sabine von "Binimey" wollten wissen wie ich das mit den Vorschaubildern bei meiner Linkpartysammlung gemacht habe. Moni wollte gerne ihre Tutorials in dieser Weise präsentieren und Sabine sammelt fleißig und stellt gerade eine Sammlung an gratis Schnitten zusammen. Natürlich helfe ich da gerne.



Bevor ich loslege muss ich mich aber noch bei Doro von "Doros Kinderreich" bedanken. Sie war so lieb mir zu erlauben, dass ich am Beispiel ihrer Linkparty "Maritim & Meer" erklären darf wie das Bild von ihrem Blog in meine Sammlung wandert. Danke!


So sieht die Sammlung der Linkpartys bei mir im Blog aus. Angefangen hat alles mit ein ganz paar Linkups in der Sidebar doch wurde es da bald sehr voll und unübersichtlich. Eine eigene Seite musste her. Aber jeder Button hat ein anders Format und ich wollte ein ausgewogenes Bild haben. Die Mittelpunkte aller Button sollten wie auf einem Raster liegen. Aber wie bekommt man das hin? Ein befreundeter Webdesigner hat versucht mir da was zu erklären und ich hab nur Bahnhof verstanden. Wie bitte soll das realstisch sein? Also eben eine vielleicht weniger elegante, dafür aber gut umsetzbare Lösung. Elegant wäre es, man müsste nur den Link zum Bild und zum Blog einfügen und alles steht. Hier bereiten wir uns das Bild komplett vor und verlinken es erst dann. Geht auch alles. Braucht aber eine Zwischenstation...

Schritt 1: Bilddatei vorbereiten


Als erstes öffnen wir die Seite zur Linkparty, zum Tutorial oder was auch immer wir verlinken wollen. In diesem Fall also die Seite von Doro. Hier gibt es dann auch gleich das Bild zur Linkparty, was ich gerne verlinken möchte.


Nun klicken wir rechts auf das Bild und speichern es ab, damit wir es bearbeiten können.


Jetzt brauchen wir ein Bildbearbeitungsprogramm. Ich benutze wie immer Photoshop, aber auch mit GIMP kann man viel machen (Photoshop verdirbt. Ich weiß bei GIMP genau was ich machen will und finde nichts!). Neben er eben gespeicherten Bilddatei von Doro habe ich noch eine leere Datei mit der Größe 170x170 px geöffnet. Diese Größe haben später alle Linkpartysbildchen, die ich auf der Seite einfüge.


Zunächst einmal müssen wir die Bildgröße ändern. Da dieser Schritt wirklich banal ist geht das mit eigentlich jedem Bildbearbeitungsprogramm.


Die Bilder für die Linkpartysammlung werden so verkleinert, dass die Seitenverhältnisse bestehen bleiben und die lange Seite (egal ob das die Höhe oder die Breite ist) 160 px lang ist. Welche Größe für euch passt müsst ihr einfach ausprobieren.


So klein ist das Bild nun geworden. Ich markiere (Strg+A) und kopiere (Strg+C) es um es dann in die zweite geöffnete Datei einzufügen (Strg+V). Diese hat wie gesagt eine Größe von 170x170 px. Das Schachbrettmuster bedeutet bei Photoshop immer, dass der Hintergrund durchsichtig ist. Der Hintergrund meines Blogs ist weiß, da wäre es nicht so tragisch. Wenn ich aber nun die Farbe ändere, dann schweben die Bilder immer vor dem Hintergrund und bekommen keinen weißen Rahmen.


So sieht es aus, wenn das Bild in der neuen Datei ist. An der langen Seite ist links und rechts noch ein bisschen durchsichtiger Hintergrund. So verhindere ich, dass die Bilder später direkt aneinander liegen. Oben und unten ist mehr frei. Bei einem Bild im Hochformat wäre es genau anders herum. Aber egal welches Format die Datei hat, die Mitte liegt immer in der Mitte und darauf kommt es mir an.


Nun nur noch speichern. Wichtig ist, dass die Datei als *.gif gespeichert wird. Nur dann bleibt der Hintergrund durchsichtig. Wenn ihr die Datei z.B. als *.jpg speichert, dann wird der Hintergrund automatisch weiß.

Schritt 2: Bild als Link bei Blogger einfügen

Der nächste Schritt, das Einfügen der Bilder bei Blogger, funktioniert für die Linkpartybilder genau so wie für jedes andere Bild, das ihr gerne als Link hättet. Vielleicht wollt ihr ja in euren Post ein Bild einbauen, dass sich nicht in groß öffnen sondern zu einer anderen Seite führt, wenn man es anklickt.


Da es schon zwei maritime Linkpartys gibt (leider wohl gerade noch im Winterschlaf) soll die dritte natürlich dazu. Dazu brauchen wir erst mal eine neue Zeile, da es sonst nicht funktioniert.


Durch einen Klick auf das Bildsymbol öffnet sich dieses Fenster. Im Reiter "Hochladen" fügen wir die gif-Datei hinzum die wir eben gespeichert haben und fügen sie hinzu.


So sieht es nun aus und wir können die überflüssigen Leerzeilen vor und hinter dem Bild wieder entfernen. Theoretisch liegen so später alle Bilder in einer langen Reihe. Wie beim Schreiben aber auch fügt Blogger einen Umbruch hinzu, wenn die Zeile voll ist. So kommt es bei mir genau aus, dass drei Bilder nebeneinander passen.

Wichtig: Zieht die Bilder nicht mit der Maus an eine andere Stelle sondern schneidet sie aus (anklicken Strg+X) und fügt sie an der neuen Stelle wieder ein (Strg+A). Schaut euch in den Einstellungen an, wie breit euer Postbereich ist, denkt daran, dass immer automatisch ein Rahmen eingefügt wird und verkleinert die Bilder entsprechend. Wie gesagt: meine sind inkl. des durchsichtigen Hintergrunds lediglich 170x170 px groß.


Nun klicken wir das Bild an und dann oben auf Link. Dann wieder das Bild und wieder auf Link. Erst jetzt öffnet sich das Fenster, dass wir auch sonst vom Einfügen eines Links kennen.


Die Zeile "Anzuzeigender Text" lassen wir leer und fügen nur die URL ein, zu der wir verlinken wollen. In diesem Fall also die Seite auf der man die Linkparty "Maritim & Meer" findet. Danach nur noch auf "OK" klicken.


Im Editor sieht es nun so aus und wir können die Seite bzw. den Post veröffentlichen, planen oder aktualisieren.


Fertig sieht es dann bei mir so aus. Eine weitere Linkparty hat es in die Sammlung geschafft. Warum die ganze Mühe? Erstmal finde ich es einfach nett. Eine Linkparty zu betreuen macht schon ein bisschen Arbeit und natürlich soll sie bekannt werden. Da ich es unschön finde das bunte Gewusel unter jedem Post oder in der Sidebar zu haben gibt es diese Seite. Die Sidebar ist für anderes reserviert und unter jedem Post gibt es einen Backlink in Textform. Wenn ich aber einen Post schreibe, dann öffne ich diese Seite und schaue mir an zu welcher Party der Post passen würde. Es ist also am Ende für mich auch noch einfach bequem.

Habt ihr auch eine Frage rund um den Blog oder braucht Hilfe? Dann meldet euch doch gerne. Ich versuche wie immer so gut ich kann zu helfen.

7 liebe & nette Meinungen

  1. Liebe Rebecca, wieder eine so tolle Erklärung von dir!
    Vielen dank das du meine Frage so schnell beantwortet hast. Ich will mich jetzt mal dran versuchen es auch so hinzubekommen. Ein aufgeräumter Blog gefällt mir wesentlich besser. Ich hoffe nur, ich kann auch die blinkenden Leerzeichen neben den Bildern besiegen, bisher habe ich höchstens 2 Bilder auf eine Seite bekommen.

    Liebe Grüße moni

    AntwortenLöschen
    Antworten
    1. Hallo Moni,

      ich wünsche dir ganz viel Erfolg. Wichtig ist wirklich, dass die Bilder klein genug sind und du sie nicht mit der Maus von einer Stelle an die andere ziehst.

      Liebe Grüße
      Rebecca

      Löschen
    2. Danke du Liebe, ich werde es in kürze probieren. Normalerweise bearbeiten wir die Bilder immer mit Picasa, muss mal sehen und mir Photoshop runter laden:)
      lG

      moni

      Löschen
    3. Hallo Moni,

      ob es eine Version von Photoshop einfach so gibt glaube ich gar nicht. Versuch es im Zweifelsfall mit Gimp. Dort kannst du auf jeden Fall auch mit Ebenen arbeiten und das Programm ist kostenlos. Evtl. ist das aber auch mit Picasa möglich. Damit habe ich keine Erfahrung.

      Liebe Grüße
      Rebecca

      Löschen
  2. Rebecca- du bist so klasse!! ♥
    Das du da noch dran gedacht hast!! Vielen Dank dafür!!
    Ich werde das gleich nächste Woche ausprobieren. Deine Erklärungen sind SUPER!!
    Dir noch einen schönen sonnigen Sonntag,
    Lieben Gruß, Sabine

    AntwortenLöschen
    Antworten
    1. Hallo Sabine,

      vielen lieben Dank für deine lieben Worte und ganz viel Erfolg beim Umsetzen :)

      Liebe Grüße
      Rebecca

      Löschen
  3. Wow!! Rebecca, das ist ja der absolute Wahnsinn, wieviel Mühe und Zeit du in die ganzen hilfreichen Posts zum Thema Bloggen und HTML gesteckt hast. Bin total begeistert! Da werde ich mir jetzt erstmal einige Beiträge zu Gemüte führen und wohl so Einiges lernen können. Vielen Dank :)
    Liebe Grüße
    Dani

    AntwortenLöschen

Vielen lieben Dank, dass du dir die Zeit genommen hast mir einen Kommentar zu schreiben. Ich freue mich sehr.

Related Posts Plugin for WordPress, Blogger...