HTML #13: Follower Teil 4

Ursprünglich war der nächste Teil dieser Reihe für den nächsten Sonntag vorbereitet, aber dann kam da noch eine Frage zu den Sozialmediabutton die unbedingt noch vorher beantwortet werden wollte. Aus diesem Grund dürft ihr heute einen Einblick in meine digitale Arbeitswelt und in das Layout von Jakasters Fotowelt werfen. Hoffentlich macht es euch ein bisschen Spaß und wenn ich der lieben Astrid von Mipamias das Leben leichter machen könnte, dann würde ich mich sehr freuen.



Astrid hat mich in ihrem letzten Kommentar folgendes gefragt "Jetzt hast du all die schönen Buttons da nebeneinander - wie kriegt man es hin, dass wenn man auf die einzelnen Buttons kommt, eine Verlinkung stattfindet? Heißt, ein Bild, mehrere Verlinkungen." Jetzt muss ich dich ein bisschen enttäuschen, denn es handelt sich um mehrere Bilder, die nur passend angeordnet sind, aber vielleicht lässt sich dein Problem ja auch so lösen.


So soll es am Ende aussehen. Was so hübsch wie ein Bild aussieht sind in Wirklichkeit neun einzelne Dateien. Und dank durchsichtigem Hintergrund (denn Dateien sind ja immer eckig und nicht rund) ist auch die Farbe meines Blogs egal, das passt immer und es gibt keine weißen Kästchen um die Button. Mögt ihr mal einen Blick darauf werfen wie eine neue Farbe für meinen Blog entsteht, denn eben erst ist hier ja alles grün geworden.


So sieht mein Photoshoparbeitsplatz aus. Die Möglichkeiten sich da einzurichten sind ja fast unendlich aber nachdem ich in der Uni mit einer anderen Anordnung und anderen geöffneten Werkzeugen gearbeitet habe muss ich sagen, dass ich da wirklich ein Gewohnheitstier bin. Schweife ich ab? Bestimmt habt ihr noch nicht alle einen Blick auf Photoshop werfen können, darum erkläre ich mal ganz kurz ein bisschen, wenn das okay ist. Links das Schmale ist die Leiste mit meinen Werkzeugen. Dort gibt es Pinsel, Schrift, Füllwerkzeuge, Stempel und alles was das Herz so begehrt. Darunter der Kasten ist für die Schrift in meinen Bildern. Größe, Schriftart, Farbe, Breite, Höhe, Abstand zwischen den Buchstaben und den Zeilen, da geht wirklich alles. Rechts oben dann die Vorschau und darunter die Ebenen. Diese müsst ihr euch wie Folien vorstellen. Auf jeder Folie kann ich malen oder schreiben und sie dann übereinander legen. Unglaublich praktisch ist das! In der Mitte ist dann die Datei die ich bearbeite. Das grau-weiße Muster verdeutlicht, dass der Hintergrund druchsichtig ist. Dann gibt es noch grüne Linien. Mit denen habe ich mir die Größe vom Kreis und die Mitte markiert. Der Kreis selbst kann eingefärbt werden oder aber auch mit einem Muster (hier einem Blatt) gefüllt werden. Wenn man eine Weile damit spielt, dann findet man sich zurecht aber durch alles steigt man glaube ich nie durch und es führen fast immer viele Wege ans Ziel.


Vor den Ebenen könnt ihr ein kleines Kästchen erkennen. Damit kann man die Ebenen einblenden, dann ist dort ein kleines Auge (der dunkle Punkt), oder ausblenden. So geht es ruckzuck für alle Medien einen neuen Button zu erstellen. Einmal den Hintergrund einfügen und dann immer eine Ebene mit den Symbolen einblenden und speichern. Die Linien sieht man später nicht mehr. Damit der Hintergrund durchsichtig bleibt muss die Datei als *.gif oder *.png gespeichert werden. Speichert man als *.jpg, dann wird der Hintergrund weiß.


Das sind alle Dateien die ich brauche um dem Blog ein neues Outfit zu geben. Das erklärt dann wohl auch, warum das in etwas mehr als einer Stunde gemacht ist. Am längsten braucht es meist, bis ich mit den Farben zufrieden bin. Außer den Button brauche ich noch einen Header und eine Datei für den Hintergrund. Seit neustem noch einen zweiten Header für Facebook.


Die fertigen Sozialmediabutton werden dann in das Picasaalbum geladen. Wie das geht habe ich im dritten Teil der HTML-Reihe bereits erklärt. Die Button werden mit einer Seitenlänge von 300 px hochgeladen. Das ist mehr als ausreichend, aber so habe ich alle Möglichkeiten, denn die Größe wird erst später angepasst. So war es auch kein Problem die Button zu verkleinern, als zwei neue dazu gekommen sind, sodass sie weiter in zwei Reihen passen.


Später brauche ich noch die Bild-URL zu jedem der Button. Dazu klicke ich die Vorschaubilder an und sie öffnen sich einzeln. Hier kann ich dann einfach rechts klicken und die URL kopieren. Denn alles andere kann bei einem Farbwechsel gleich bleiben und so sind es nur ein paar Links die getauscht werden müssen und ich muss nicht erst die Bilder hochladen und dann alle Seiten, die verknüpft werden sollen öffnen und verlinken. Wenn man sich erst daran gewöhnt hat, dann geht das genau so einfach wie einen Post schreiben - vielleicht sogar noch leichter.


Im zweiten Teil der Reihe hatte ich erklärt, wie man ein HTML/Java-Gadget einfügt. Und genau so eines brachen wir auch für die Sozialmedia-Button. Für mich habe ich den einfachen "Lückentext" ein ganz klein bisschen abgewandelt, denn nun wird noch ein Text angezeigt, wenn man mit der Maus über den Button fährt.

<a title="Folge Jakasters Fotowelt auf Facebook" href="https://www.facebook.com/pages/Jakasters-Fotowelt/831426350219348" target="_blank"><img src="https://lh5.googleusercontent.com/-cwx0K-p64j4/U2PorIa5C1I/AAAAAAAALVY/IESbonpqjaA/w300-h309-no/FB.gif" width=35  border="0" /></a>

Wie wäre es, wenn wir das ganze einmal aufdröseln und versuchen zu verstehen, was da genau steht? 

<a[...]> erzeugt einen Link. Alles was nötig ist, damit der Link funktioniert muss mit in die Spitzen klammern.

title="[...] hilft zum einen bei der Orientierung aber dies ist auch der Text, der neben dem Cursor angezeigt wird, wenn man diesen über das Bild bewegt.

href="[...] ist der Link zu der Seite auf die ein Klick auf das Bild führen soll. Ich finde es ja immer praktisch, wenn ich nur klicken muss und gleich da bin. Nicht immer steht auf den Bildern auf welchem Blog man fündig wird und wenn es eine tolle Linkparty oder eine super Verlosung gibt, dann ist das immer schade. Außerdem freut sich der Verlinkte immer.

target="blank" bedeutet, dass der Link in einem neuen Tab geöffnet wird. Lasst ihr diesen Befehl weg, so schließt sich euer Blog und die neu aufgerufene Adresse wird geöffnet. Erstmal nicht weiter tragisch, aber sind wir doch mal ehrlich. Wollen wir eine Durchreisestation sein oder freuen wir uns nicht, wenn der Besuch länger bleibt und ein wenig stöbert. Also immer darauf achten, dass Links in einem neuen Tab geöffnet werden.

Der Link ist an dieser Stelle fertig und funktionstüchtig. Es wird Text angezeigt und mit einem Klick werden wir weiter geleitet, aber natürlich möchten wir ein Bildchen dazu haben. Dazu geht es nun weiter.

<img [...]/> ist der Befehl um ein Bild einzufügen. Da wir keine zwischengeschobenen befehle mehr brauchen, können wir hier das Schließen des Befehls in einem Schritt erledigen. Beim Link selbst schieben wir das Bild ein, darum müssen wir es teilen.

src="[...]" ist die Quelle von der das Bild geladen werden soll. Anders als beim Einfügen über das Gadget brauchen wir hier eine URL. Wie wir daran kommen erkläre ich euch gleich an einem Beispiel.

width=[...] gibt die Breite des Bildes in Pixeln an. Mit dieser Zahl können wir ganz leicht dafür sorgen, dass die Bilder in die Sidebar passen. Außerdem ist es gleich viel aufgeräumter, wenn alle Bilder eine Breite haben. Schließlich sind sie schon sehr bunt, da muss es nicht noch unruhiger werden. Die Höhe lässt sich über den Befehl height=[...] gibt die Höhe an. Wenn wir aber nur die Breite vorgeben, dann wird die Höhe automatisch angepasst, es verzieht sich also nichts.

border="0" führt dazu, dass ein Rahmen um unser Bild angezeigt wird. Links werden (wenn nichts anderes eingestellt wird) immer blau und unterstrichen angezeigt. Ist das Bild nun ein Link, dann bekommt es einen Rahmen. Ich mag es ohne einfach lieber.

</a> schließt nun unser Programmiertes ab, denn wir sind fertig und haben alles was nötig ist unter gebracht. Natürlich kann man auch noch einen Alternativtext oder eine Bildbeschreibung einfügen, aber wenn wir Linkpartys und Verlosungen verlinken, dann können wir uns das sparen.

Das kommt euch bekannt vor? Das liegt daran, dass ich das im aller ersten Teil zur Sidebar auch schon einmal erklärt hatte. Denn dem HTML ist es ganz egal ob wie zu einer Linkparty, zu einem anderen Blog oder eben zu einer der Plattformen auf der wir vertreten sind verlinken. Immer ist es ein Bild, das eingefügt wird mit einem zugeordneten Link zu dem ein Klick auf das Bild führen soll. Erkennt ihr in dem HTML-Teil oben den Lückentext von damals wieder?

<a title="[Name/Beschreibung]" href="[Link]" target="blank">
<img src="[Bild URL]" width=[x] border="0" /></a>

Wir haben den Namen "Folge Jakasters Fotowelt auf Facebook" wir haben den Link zur Facebookseite, den Link zum Bild, das im Picasaalbum gespeichert ist und die Größe, in der der Button angezeigt werden soll. Bis vor kurzem waren das noch 45 px, als dann zwei Button dazu kamen wären es drei Reihen gewesen und das hat mir nicht so richtig gefallen. Also konnte ich einfach die Größe ändern bis es mir gefiel und musste nicht erst die Dateien verkleinern, neu hochladen und neu verlinken. Im ersten Moment macht es also mehr Arbeit alles selbst zu schreiben und nicht alles ist Posteditor hochzuladen und zu verlinken, aber man ist sehr viel flexibler und es ist übersichtlicher, als das durch Blogger erzeugte HTML. Wenn ihr damit besser zurecht kommt, dann möchte ich euch das auf gar keinen Fall ausreden, aber vielleicht schadet es nicht in einer ruhigen Minute mal etwas auszuprobieren und zu testen. So schwer ist das wirklich nicht - einfach trauen und ganz mutig sein. Wenn es nicht klappt könnt ihr das Gadget wieder löschen und alles ist gut.


Und warum stehen die Button nun alle in einer Reihe? Das liegt daran, dass die Bilder nebeneinander angeordnet werden so lange es geht und erst dann ein Umbruch in die nächste Zeile kommt, wenn sie breiter werden würden als die Spalte breit ist. Was für ein Satz, aber ich bin heute Morgen um halb fünf aufgestanden, also hoffe ich mal auf eure Gnade. Wir können aber auch manuell einen Zeilenumbruch einfügen.

Follow on Bloglovin

So würde es aussehen, wenn die Sidebar breiter wäre. Eigentlich wäre alles sogar linksbündig. Wie man Bilder mittig ausrichtet habe ich ganz ausführlich schon einmal im zweiten Teil zur Sidebar erklärt. Wir benötigen dafür den Befehl <div align="center> (natürlich schließen wir mit einem </div>). Und um nun einem Zeilenumbruch an der Stelle einzufügen an der wir ihn gerne hätte und nicht an der Stelle, an der die maximale Breit erreicht ist fügen wir ein <br/> ein. Mit <br/><br/> können wir eine freie Zeile erzeugen und so Abstand zwischen den Reihen gewinnen.



Follow on Bloglovin

Und obwohl jede der Grafiken eigenständig erzeugt wurde sehen sie so aus als würden sie zusammen gehören. Und wenn ich eines Tages noch anfange zu twittern, dann zieht noch ein Vögelchen bei den Button ein ohne, dass ich alles neu machen müsste. Gar nicht so schwer eigentlich - oder?

Wenn ihr noch Fragen habt ob nun zu den Button oder zu etwas anderem, dann stellt sie gerne und ich tue mein bestes um euch zu helfen.

23 liebe & nette Meinungen

  1. Liebe Rebecca, du bist meine Heldin! Ich werde deine ausführliche Anleitung heute Abend Schritt für Schritt durcharbeiten - vielleicht klappt das auch mit picmonkey- und berichten.
    Ganz herzlichen Dank für deine Mühe - ich drück´ dich schonmal, meine HTML-Queen!
    LG Astrid

    AntwortenLöschen
    Antworten
    1. Hallo Astrid,

      freut mich, dass ich dir nun doch helfen kann und du so ohne Imagemapping ans Ziel kommen kannst :D Mit ganz vielen Programmen z.B. auch Gimp kann man Dateien mit unsichtbaren Hintergrund und verschiedenen Ebenen erzeugen. Aber wenn man einmal mit Photoshop gearbeitet hat, dann ist leider nichts anderes mehr kompatibel. Ganz übel. Aber wer mal eine gute Maschine hatte fängt ja auch nicht wieder mit einem Supermarktschnäppchen an, oder? ;)

      Liebe Grüße
      Rebecca, die so gerne geholfen hat!

      Löschen
  2. Hallo Astrid,

    gimp geht es ganz sicher. Das kannst du im Netz kostenlos downloaden ;0)
    Grüße nicole

    AntwortenLöschen
  3. Rebecca, du bist sensationell - die ganze Mühe, die du dir machst die HTML-Welt für uns verständlich zu machen... ♥

    Dankeschön!
    Jetzt weiß ich auch endlich, warum das bei mir mit Gimp nie mit dem transparenten Hintergrund geklappt hat... Ich hatte immer als jpg gespeichert... *hust*
    Vielen Dank für die Aufklärung, was habe ich gimp verflucht und war einfach nur selbst zu blöd. *g*

    Liebste Grüße
    Sabine, die dran bleibt! :-)

    AntwortenLöschen
    Antworten
    1. Hallo Sabine,

      das hat doch nichts mit blöd zu tun, sowas muss einem manchmal einfach einer sagen. Irgendwann hab ich das auch mal von irgendwem gelernt. Sind ja nun doch schon einige Jahre die ich mich damit beschäftigt habe. Es freut mich, dass du dranbleibst. Am Sonntag geht es weiter :)

      Liebe Grüße
      Rebecca

      Löschen
  4. Liebe Rebecca!
    Ich wollte ja schon seit Herbst meine Social Media Buttons einbauen. Dank deiner Erklärung war ich auch schon fast so weit allerdings hab ich keine Buttons gefunden die mir wirklich gefallen haben. So jetzt versuch ich es auf deinem Weg noch einmal hoffe ich kann mir etwas zusammen basteln was mir schlussendlich auch gefällt.
    glg
    Sonja

    AntwortenLöschen
    Antworten
    1. Hüpf, hüpf huraaaa! Ich hab es geschafft. Danke deinen Anleitungen hab ich endlich die Sozial Media Buttons eingebaut!!!! Lange, lange hat es gebraucht. Soweit läuft alles wie ich es haben möchte, bis auf den E-Mail-Button. 100% bin ich mit der Auswahl der Buttons auch noch nicht zufrieden. Vielleicht mach ich mir irgendwann auch eigene. Aber das dauert bei mir sicher wieder 100 Jahre ;-)
      Sei gaaaanz fest gedrückt und danke für deine super Anleitungen.
      Wünsch dir ein schönes Pfingstwochenende
      glg
      Sonja

      Löschen
    2. Hallo Sonja,

      ich freue mich total, dass es geklappt hat. Das mit dem folgen per Mail ist wirklich etwas umständlich, aber ich bin mir sicher, dass du das auch noch schaffen wirst. Ansonsten frag einfach nochmal nach :)

      Liebe Grüße
      Rebecca

      Löschen
  5. Liebe Rebecca, ich hab' ja von Anfang an bei dir mitgearbeitet und freue mich jetzt, dass das alles keine böhmischen Dörfer mehr für mich sind. Dank dir und deinen HTML-Lektionen habe ich am Montag innerhalb von wenigen Minuten meinen Instagram-Button hinzugefügt! Wenn man's einmal kapiert hat, dann ist es echt kein Ding und kann ganz schnell Gadgets in der Sidebar einfügen oder ändern. Ich genieße es sehr, dass ich da so unabhängig geworden bin! DANKE! :-* Ganz liebe Grüße von Katharina, die immer noch restlos begeistert ist von der Mühe, die du dir machst und dass du dein Wissen so großzügig mit uns teilst! ♥

    AntwortenLöschen
    Antworten
    1. Hallo Katharina,

      so viele liebe Worte. Jetzt bin ich ja doch ein bisschen rot geworden :D Dankeschön. Weiß nicht jeder etwas anderes und ist es nicht für uns alle von Vorteil, wenn wir es teilen? Mir macht das total viel Spaß aber es braucht eben immer ein bisschen Zeit, sonst könnte ich das jeden Tag machen ;)

      Liebe Grüße
      Rebecca

      Löschen
  6. Liebe Rebecca,
    greenfietsen spricht genau das aus, was ich auch meine.
    DANKE für deine Mühe!
    Übrigens bist du nicht die einzige, die ewig mit den Farben braucht *lach*
    Liebe Grüße
    Gusta

    AntwortenLöschen
  7. AAAAAAAAAAAAAAH, das ist interessant! Genau die Frage hatte ich nämlich auch, denn bei mir wären nicht alle Buttons belegt und das wäre ja auch doof. Danke für die ausführliche Erklärung, ich versuche mal mein Glück!
    LG
    Frau H.

    AntwortenLöschen
    Antworten
    1. Hallo Edith,

      ganz viel Erfolg beim Probieren wünsche ich dir. Es gibt so fertige Leisten, aber da hätte ich auch nicht alles von oder eben etwas, dass nicht dabei ist hätte ich gerne und die sehen so grade und langweilig aus. Da ist so eine Baukastenlösung ideal finde ich :)

      Liebe Grüße
      Rebecca

      Löschen
  8. Liebe Rebecca,

    das ist ja prima, ich glaube aber ich muss mir das noch ein paar mal durchlesen, bevor ich das so ganz verstanden habe... aber trotzdem schon mal vielen Dank ;o)

    Liebe Grüße
    Martina

    AntwortenLöschen
  9. Liebe Rebecca,
    das ist super.... ich mach mich gleich ans Werk.... mal sehen, was ich so schaffe! Meine Bleibe ist übrigens reserviert: Anreise am 26. und Abreise am 29.!!! Ich freu mich ganz toll! ;-)
    Liebe Grüße,
    Betty

    AntwortenLöschen
    Antworten
    1. Hallo Betty,

      ich freue, freue, freue mich ja schon so!!!

      Liebe Grüße
      Rebecca

      Löschen
  10. Liebe Rebecca,
    vielen Dank für deine Mühe.
    Ih bin allerdings nur bei google/ Blogger,
    deshalb ist dieser Post nicht soooo interessant für mich.
    Liebe Grüße
    Nähoma

    AntwortenLöschen
  11. Yeah!!! Ich hab´s kapiert! Danke, danke, danke, Rebecca!
    Ich bin fleißig am rumbasteln und es geht jetzt auch schon ganz flott mit deinem tollen HTML-Code zum einfügen.

    Darf ich denn noch was fragen???

    Aaalso: Wie kriegt man denn die Anzeige der Seiten unter dem Header so, dass es nach "Reitern" (ich glaub´ so heißen die) aussieht? Du hast die so grau unterlegt...

    LG Astrid

    AntwortenLöschen
    Antworten
    1. Hallo Astrid,

      ich freue mich riesig, dass es geklappt hat und das es immer besser wird. Das ist super. Wie ich mein Layout erstellt habe und an die Reiter gekommen bin erkläre ich dir gerne auch noch :) Aber diese Woche nicht mehr ;)

      Liebe Grüße
      Rebecca

      Löschen
  12. Liebe Rebecca,
    Danke, Danke, Danke. Seit Wochen sitze ich an diesen Social Media buttons und bekomme es einfach nicht hin. Dank dir ist mein Blog jetzt so wie ich ihn haben wollte. Perfekt.

    Liebste Grüße

    Fräulein Mai

    AntwortenLöschen
    Antworten
    1. Hallo Fräulein Mai,

      das ist so schön zu hören und bestärkt ungemein darin, dass ich das richtige tue und die Zeit nicht vergeudet ist :) Wenn du sonst noch Fragen hast, immer gerne zu mir damit - ich gebe dann mein bestes ;)

      Liebe Grüße
      Rebecca

      Löschen
  13. Du bist wirklich ne Helding, liebe Rebecca. Wie ausführlich du das erklärst ist der Wahnsinn. Ich habs gelesen, obwohl ich es nicht brauche, einfach weil ich deine Erklärungen mach <3

    Liebe Grüße, Carmen

    AntwortenLöschen
  14. Liebe Rebecca,

    mal wieder vielen lieben Dank für deine Tipps und Tricks! Ich bearbeite mal wieder fleißig und es macht einfach Riesenspaß <3. Ist das Widget mit den meistgelesenen Posts eigentlich das Original von Blogger oder hast du dir da auch etwas tolles zusammen gebastelt? Würde mich brennend interessieren ;-)

    Liebe Grüße,
    Anna

    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...