HTML #3: Die Sidebar Teil 2

Beim letzten mal haben wir gelernt wie man mit HTML ein Linkbild in die Sidebar einfügt. Aber bisher klappt das nur, wenn ein Bild da ist, von dem wir die URL mit einem Rechtsklick kopieren können. Wenn das Bild aber noch gar nicht veröffentlicht wurde, dann müssen wir einen anderen Weg gehen. Außerdem möchten wir vielleicht mal mehrere Bildchen einfügen und wie wichtig eine ansprechende Ausrichtung ist wissen wir als ästhetisch anspruchsvolle Menschen ja auch. Genau darum soll es im Folgenden gehen.



Möglichkeit 2: Ihr wollt etwas aus eurem Picasaalbum verlinken

Wer sich jetzt fragt was bitte Picasa ist, warum ihr auf ein Bild in einem Album dort zugreifen wollt und ob ihr sowas habt, dem kann ich hoffentlich hier und jetzt helfen. Ich bin kein Profi, aber ich versuche einfach mal ein bisschen zu erklären.

Picasa gehört wie auch Blogger zu Google. Wer einen Blog über Blogger betreibt (zu erkennen am www.{...}.blogspot.com in der Blogadresse) der hat auch mindestens ein Picasaalbum. Die Bilder, die ihr über den Blogger eigenen Editor hochladet werden nämlich genau dort gespeichert, was das für uns für Folgen hat kommt aber ein anderes mal, denn hier und jetzt soll es noch einmal um unsere Sidebar gehen. Nicht nur Blogger lädt dort Bilder hoch, auch wir können das. Dazu müssen wir erstmal diesem Link folgen:


Wenn ihr mit eurem Googlekonto angemeldet seid, dann solltet ihr nun eine Übersicht aller eurer Alben sehen. Wer in seinem Googleadressbuch Fotos hinterlegt hat, der wird auch diese hier wiederfinden. Da in ein Album höchstens 1000 Fotos gespeichert werden wird euer Blog mit der Zeit mehr als einen Ordner haben. Diese Ordner heißen genau wie euer Blog und sollten damit gut zu finden sein. Entweder ladet ihr eure Foto nun in euer Blogalbum hoch oder ihr legt ein neues Album an, ich habe mich für den bestehenden Ordner entschieden, denn hier gehört das Bild ja auch hin.


(Jetzt wisst ihr auch, dass bei mir nicht immer alles auf Anhieb klappt und so aussieht wie ich es gerne hätte und so gibt es hier dann auch einige verworfene Header, zu schmale Hintergrundbilder und Bearbeitungen, die dann doch nicht so toll aussehen und wieder weg mussten.)

Wir ziehen nun das Bild oder die Bilder, die wir im Album speichern müssen einfach in das Fenster (oder klicken uns durch) und bestätigen dann.


Nun befindet sich das Bild in unserem Album. Wir klicken einfach darauf und es öffnet sich eine Ansicht, in der das Bild in voller Größe angezeigt wird. Wenn wir nun rechts auf das Bild klicken können wir die URL kopieren. Ab hier können wir weiter vorgehen, wie beim letzten Teil erklärt.


Jetzt können wir also unseren Lückentext mit einem Bild füllen, dessen URL wir nicht von einem anderen Blog kopieren konnten, denn wenn wir z.B. eine Verlosung vorbereiten und ein bisschen Werbung machen, dann sind wir die ersten mit dem Bildchen. Die URL von Bildern, die auf einem Blog erscheinen ist also darum so verwirrend, weil die Ordner im Hintergrund automatisch erstellt werden und wir nicht alles zu sehen bekommen was im Hintergrund passiert. Der Computer denkt nicht in Wörtern und darum ist ihm das komische Aussehen auch egal. Wir müssen eben damit Leben oder unsere Bilder wo anders hinterlegen, aber so tragisch ist es nun auch nicht.

Bleiben wir einfach im Weiteren bei dem Beispiel mit der Verlosung (für Linkpartys und alles andere funktioniert es aber ganz genau so). Verlosungen gibt es nicht nur eine sondern meist gleich eine ganze Reihe. Wenn wir die Bilder über das "Image Gadget" einfügen, dann können wir immer nur ein Bild einfügen. Genau soweit sind wir bis hier her auch. Der große Vorteil, sich die Mühe mit dem HTML zu machen liegt aber darin, dass wir mehrere Bilder untereinander einfügen können. Das ist wirklich ganz einfach.


Wie bereits erwähnt bereite ich immer alles im Editor vor. Ich finde es einfach übersichtlicher, das Fenster kann ich in der Größe anpassen und später alles bequem zu Blogger kopieren un dann speichern. Unser fertig ausgefüllter Lückentext ist im Prinzip ein Bauelement vom Fertighaus. Aus vielen Teilen wird ein Bauelement und aus den Bauelementen können wir dann schnell ein Haus oder eben einen Blog bauen. Aus zwei Elementen werden so schnell zwei Bilder. Damit es übersichtlicher ist lasse ich zwischen den Bausteinen immer eine Zeile frei. Blogger ist das beim Verarbeiten und grafischen Umsetzen egal, aber mir hilft es sehr. Theoretisch könnten wir alles hintereinander weg schreiben, aber da finden wir dann wohl nicht mehr durch.

Bei Verlosungen schreibe ich immer dazu bis wann die Verlosung läuft. Man ist ja zugegebener Maßen neugierig und so habe auch ich einen Überblick welche Verlosungen noch laufen und wo ich mal vorbei schleichen könnte ob ich wohl Glück hatte. Diesen Text schreibe ich ganz einfach dazwischen. Bei Blogger klappt das hervorragend, denn die Programmierer helfen uns schon sehr. Wer eine Homepage ohne einen solchen Hintergrund betreibt, der muss auch hier wieder ein paar Befehle dazu schreiben, wir haben es da bequemer.


Im letzten Teil habe ich erklärt, dass meine Bildchen immer schmaler als die Sidebar sind. Ohne weitere Befehle würde der Text nun linksbündig ausgerichtet werden. Schöner ist es aber natürlich, wenn sie mittig in der Sidebar sind. Auch dafür gibt es einen HTML-Befehl.

<div [...]> ist ein für mich seltsamer Befehl, denn er hat keine Eigenschaften. Er ist kein Link, kein Bild, kein Text. Dieser Befehl ist ein "Behälter". Ich versuche es mal wie meine Chemielehrerin, die uns (14 Leute, 12 Mädchen im Kurs) versucht hat etwas mit einer Packung gemischter Schokolade zu erklären. Ich weiß nicht mehr was es war, denn es ging um Schokolade. Damit eure Konzentration nicht zu weit abschweift versuche ich es mal mit Keksen. Stellt euch vor unser Lückentext ist ein Keks. Haben wir mehrer Lückentexte, dann haben wir auch mehrere Kekse. Diese sind erstmal irgendwo auf dem Backblech, aber wir möchten sie jetzt hübsch und einheitlich verpacken. So sollen sie z.B. schön übereinander liegen. Wir können nun also jeden Keks einzeln nehmen und auf den Stapel liegen und jeden einzeln ausrichten. Da wäre wirklich umständlich. Warum also nehmen wir keinen Behälter, z.B. eine Dose in die die Kekse nur übereinander passen. So richten sich unsere Kekse alleine ordentlich aus und wir haben weniger Arbeit. Genau so etwas macht dieser Befehl mit unseren Bausteinen. Alles was wir in diesen Behälter packen nimmt die vorgegebene Form an.

align="center" ist der Befehl, der unsere Bauelemente Zentriert. Mit "right" wird alles rechts ausgerichtet. Für eine linksbündige Ausrichtung brauchen wir keinen Befehl, sondern lassen einfach alles weg.

Natürlich müssen wir einen Deckel auf die Dose machen, denn jeder begonnene Befehl muss auch wieder geschlossen werden. So sieht unser Beispiel nun aus:


Alles was zwischen dem div-Befehl steht befindet sich in unserer Keksdose und wird nun mittig ausgerichtet. (Es gibt Programme, die das gleich wunderschön eingerückt darstellen und die einzelnen Befehle farblich markieren, ich kenne da aber gerade nur kostenpflichtige, da sich unsere Programmiererei aber im kleinen Rahmen bewegt schaffen wir das auch so).

Unseren vorbereiteten Text kopieren wir nun wie beim letzten Mal einfach in das Gadget und wir haben es eigentlich schon geschafft. Wem die Bilder nun aber zu eng zusammen stehen, der kann zwischen die einzelnen Bausteine (also dort, wo wir eine Lücke gelassen haben, damit es übersichtlicher bleibt) noch einen weiteren Befehl einbauen.

<br> führt zu einem Zeilenumbruch. Wäre unsere Sidebar unendlich breit, dann würden die Bilder nun nebeneinander angezeigt werden. Dies können wir uns aber auch zu Nutze machen, wenn die Bilder klein genug sind. So habe ich es z.B. bei meinen Followerbutton gemacht (dazu kommt auch noch ein Beitrag). Mit dem ersten <br> haben wir noch keinen Effekt, denn der Zeilenumbruch ergibt sich ja durch die Breite der Sidebar. Mit einem weiteren <br> bekommen wir eine freie Zeile und somit etwas Luft zwischen den Bildchen.


Das war dann aber auch wirklich erstmal alles, was zum Thema Linkbilder in der Sidebar für uns wichtig ist. Wenn noch Fragen da sind oder Probleme auftreten, dann immer gerne her damit.

15 liebe & nette Meinungen

  1. Wow, was du dir für eine Mühe machst, vielen Dank dafür! Wenn ich deine Sachen durcharbeite, werde ich noch zum Semi-Profi für html ;) Deine Erklärungen sind richtig toll und für mich ahnungslose total verständlich!

    Liebe Grüße, Jessica

    AntwortenLöschen
    Antworten
    1. Hallo Jessica,

      ich freue mich so sehr über deine Rückmeldung. Leider hatte ich keinen, der schnell mal eben Korrekturlesen konnte. Wenn es verständlich ist, dann habe ich mein Ziel ja erreicht. Wenn du zum Semi-Profi wirst, dann kannst du mir dann ja was beibringen ;) Ich kann das nötigste und mehr aber auch nicht. Das bisschen gebe ich aber gerne weiter.

      Liebe Grüße
      Rebecca

      Löschen
  2. vielen dank für diese ausführliche Erklärung. Ich wusste gar nicht, daß solche Alben angelegt werden *staun* nun bin ich ein bischen schlauer und werde versuchen es in meinem Blog umzusetzten.

    ganz liebe Grüße
    Gusta

    AntwortenLöschen
    Antworten
    1. Hallo Gusta,

      ich weiß gar nicht mehr, wie ich auf die Alben gestoßen bin. Irgendwann hatte ich mal eine Diashow in der Sidebar - vor Jahren :D - und da brauchte ich das glaube ich für.

      Es freut mich sehr, dass ich dir ein bisschen was erklären konnte. Wenn du was nicht verstehst, dir unsicher bist oder Fragen hast, dann immer her damit.

      Liebe Grüße
      Rebecca

      Löschen
  3. Puh, das muss ich mir noch einmal in einem ruhigen und vor allem ausgeschlafenen Moment (also irgendwann im neuen Jahr vermutlich ...) zu Gemüte führen.

    Vielen, vielen Dank für deine Mühe!!!!

    Liebe Grüße,
    Katifee

    AntwortenLöschen
    Antworten
    1. Hallo Katifee,

      ich lasse alles schön auf dem Blog und über das Bild (oben links in der Sidebar) kommst du zu allen Artikeln und kannst in Ruhe nochmal lesen. Wenn ich dir (auch im neuen Jahr) helfen kann und meine Zeit es erlaubt, dann tue ich das sehr gerne.

      Liebe Grüße
      Rebecca

      Löschen
  4. Hallo Rebecca,
    super deine Anleitungen. Und so verständlich geschrieben, dass ich als absoluter HTML-Laie problemlos meine Sidebar neu einrichten konnte. Vielen Dank dafür! Darf ich dein Bildchen mitnehmen und damit auf meinem Blog zu dir verlinken?
    Einen guten Rutsch ins neue Jahr
    wünscht dir
    Susanne

    AntwortenLöschen
    Antworten
    1. Hallo Susanne,

      es freut mich sehr, dass ich dir helfen und du alles verstanden hast. Es ist noch ein bisschen mehr in Arbeit und vielleicht ist das ja auch etwas für dich. Hoffentlich komme ich da bald zu :D

      Liebend gerne darfst du das Bild mitnehmen. Da es ein gif ist, hat es auch keinen Hintergrund und sollte sich somit hübsch einfügen. Ich freue mich sehr, wenn du so ein bisschen Werbung machst. Vielen Dank!

      Liebe Grüße
      Rebecca

      Löschen
  5. Super, es hat alles funktioniert!!
    Und ich muss nicht mehr jedes Gadget einzeln platzieren!
    Dankeschön!
    Kannst Du mir sagen, wie ich meinen Header mikttig platziere?
    Hatte ich ursprünglich mal, aber seit irgendwann ist es verrückt.
    Liegt das vielleicht an der unterschiedlichen Breite der Sidebars?

    Liebe Grüße
    Ina

    AntwortenLöschen
    Antworten
    1. Hallo Ina,

      ich mache meinen Header immer so breit wie mein Blog ist, darum habe ich das Problem bisher nicht gehabt. Ich mache ich da aber mal schlau und dann bekommst du deinen eigenen Post - ist das okay?

      Liebe Grüße
      Rebecca

      Löschen
  6. Hallo,
    ich wollte das gerade mal ausprobieren (danke für die Anleitung).
    Aber bei mir erscheint nirgendwo beim rechtsklick "Bild URL" kopieren... auch nicht bei fremden Bildern auf anderen Blogs, hab ich extra ausprobiert...
    Vielleicht kannst du mir helfen? Bitte.
    Am liebsten per Mail: fraualberta(ät)gmail.com
    Danke und herzlichen Gruß,
    Anika

    AntwortenLöschen
    Antworten
    1. Hallo Anika,

      die Mail kommt auch noch, aber falls die Frage nochmal aufkommt gibt es die Antwort auch an dieser Stelle.

      Bei Chrome steht da "Bild-URL kopieren"
      bei Firefox steht da "Grafikadresse kopieren" und
      beim Internet Explorer heißt es "Verknüpfung kopieren".

      Warum das beim IE wieder alles so umständlich sein muss weiß ich nicht, aber damit sollte es dann klappen.

      Liebe Grüße
      Rebecca

      Löschen
  7. Ich versuche mich heute ein wenig mit dem Button zurecht zu kommen. Das was ich habe ist aber eine "Grafik" und kein "Bild"..... und dann klappt das nicht ganz, auch mit dem Maßen komme ich überhaupt nicht klar und zwar: "Breite und Höhe des Textes"..... welchen Text ist gemeint und woher weiß ich, wie groß er ist???
    Liebe Grüße,
    Betty (die HTML verzweifelte) ;-)

    AntwortenLöschen
    Antworten
    1. Hallo Betty,

      nur nicht verzweifeln, dass bekommen wir schon hin. Es ist noch kein Meister vom Himmel gefallen.

      Ob Grafik oder Bild ist in diesem Fall relativ egal. Es geht nur darum, dass du eine Datei hast, die dargestellt werden soll. Diese kann zum Beispiel auf *.jpg, *.png oder auch *.gif enden. Es gibt aber noch mehr Formate, diese laufen einem aber wohl am häufigsten über den Weg.

      Ich habe den Text oben gerade noch einmal durch sucht und konnte keine Stelle finden an der ich von Breite und Höhe geschrieben habe. Arbeitest du gerade dieses Tutorial oder ein anders aus der HTML-Reihe nach? Zu gerne würde ich dir helfen, aber leider weiß ich gerade gar nicht wo du bist.

      Liebe Grüße
      Rebecca

      Löschen
  8. Liebe Rebecca,
    herzlichen Dank für dieses (und die vielen anderen) HTML- Anleitungen. Die helfen mir immer wieder sehr schnell weiter, wenn ich nicht weiter weiß! ♥
    LG,
    Nisi

    AntwortenLöschen

Vielen lieben Dank, dass du dir die Zeit genommen hast mir einen Kommentar zu schreiben. Ich freue mich sehr.Solltest du eine Frage haben, so lass mir doch bitte eine Mailadresse da, damit ich dir auch antworten kann.

Related Posts Plugin for WordPress, Blogger...