HTML-Tutorial: BIld mit Link in Post

Am geschrieben von // Labels:
Also hier kommt unser erstes HTML-Tutorial, nachdem einige in der Umfrage dafür gestimmt haben. Vielen Dank nochmal an alle die mitgemacht haben!!! Wer noch nicht abgestimmt hat hier geht es zur Umfrage, dauert auch wirklich nicht lang.

Blogger bietet (zumindest mir) leider keine Möglichkeit, ein Bild zu einem Link zu machen, das geht nur in der Seitenleiste. Bei Sandra scheint das zu funktionieren, bei mir erscheint das unter dem Bild.

Und wenn man Link anklickt geht das auch nicht. Also für alle bei denen das genauso ist wie bei mir und Lilly, hier ist die HTML-Anleitung um ein Bild zum Link zu machen.
Unter Rezensionen findet ihr ein Beispiel für Bilder die gleichzeitig auch ein Link sind, jedes Cover führt zur dazu gehörenden Rezension.
& mein Bild
  1. Also als erstes braucht man ein Bild und eine Website zu der es verlinken soll. http://minzgruenesbuecherregal.blogspot.com/2012/10/umfrage.html Meine Webseite
  2. Dann würde ich erstmal den den Post mit dem Bild, allerdings noch ohne den Hyperlink machen, da man ein verlinkendes Bild nicht mehr verschieben kann.
  3. Anschließend wechselt man oben links von Verfassen zu HTML 
  4. Gut jetzt kommt der eigentlich einfache, aber vielleicht verwirrende Part. Um sich in dem HTML-Buchstaben-Chaos zurecht zu finden drückt man Strg (oder Mac-Nutzer wie ich cmd) +F. Daraufhin erscheint am oberen Rand ein Feld in dem man einen Suchbegriff eingeben kann. Wenn man nur dieses eine Bild und keine weiteren Links im Post hat findet man mit <a href="http sein Bild, ansonsten werden einem mehrere Sachen orange oder gelb markiert und man muss herausfinden welches das richtige Bild ist. Es sollte ungefähr so aussehen:                 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4EXIHDETGrT84NNi9v3J-mVmbKS5uKitrJiRJEBHl16grHcONMW2zRqVJQZPRQLzUlrGFHfuWk3vlUhXyWedm5gHkJ5adULiZp6fBv8sSiA1JrX8nsnRyfLTutXd9_r7BMStbWJw77UE/s1600/HTML+Tut.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4EXIHDETGrT84NNi9v3J-mVmbKS5uKitrJiRJEBHl16grHcONMW2zRqVJQZPRQLzUlrGFHfuWk3vlUhXyWedm5gHkJ5adULiZp6fBv8sSiA1JrX8nsnRyfLTutXd9_r7BMStbWJw77UE/s200/HTML+Tut.jpg" width="138" /></a></div>
  5. Nun geht es ans Eingemachte. Vor das ganze fügt man <a href="Dein Link"> ein
  6. Danach bearbeitet man den HTML Code des Bildes. Alles hier rot makierte bis imageanchor wird gelöscht und ersetzt durch <img (Leerzeichen)                                                                                                                                           <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4EXIHDETGrT84NNi9v3J-mVmbKS5uKitrJiRJEBHl16grHcONMW2zRqVJQZPRQLzUlrGFHfuWk3vlUhXyWedm5gHkJ5adULiZp6fBv8sSiA1JrX8nsnRyfLTutXd9_r7BMStbWJw77UE/s1600/HTML+Tut.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4EXIHDETGrT84NNi9v3J-mVmbKS5uKitrJiRJEBHl16grHcONMW2zRqVJQZPRQLzUlrGFHfuWk3vlUhXyWedm5gHkJ5adULiZp6fBv8sSiA1JrX8nsnRyfLTutXd9_r7BMStbWJw77UE/s200/HTML+Tut.jpg" width="138" /></a></div>
  7. So und nun sieht das ungefähr so aus:                                                                                             <a href="http://minzgruenesbuecherregal.blogspot.com/2012/10/umfrage.html"> <img imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;" /><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4EXIHDETGrT84NNi9v3J-mVmbKS5uKitrJiRJEBHl16grHcONMW2zRqVJQZPRQLzUlrGFHfuWk3vlUhXyWedm5gHkJ5adULiZp6fBv8sSiA1JrX8nsnRyfLTutXd9_r7BMStbWJw77UE/s200/HTML+Tut.jpg" style="cursor: move;" width="138" /></a>                    
          Das blaue ist für den Link zuständig und das grüne ist das Bild. So sieht das nochmal im HTML       Text aus.

Im Post erscheint das dann so....probiert es doch einfach mal aus. :D

3 Kommentare:

  1. Sandra Pusteblume22. Oktober 2012 um 19:07

    OMG, also meinst du, wenn man in einen Post ein Bild einbindet, dass man quasi das Bild als Link benutzt. Das geht nämlich auch einfacher.. Oder ist das nur bei mir so? :DD
    Soweit ich mich erinnern kann füge ich bei mir einfach ein Bild und klicke drauf, dann erscheint das Kästchen mit Größe ändern und so. Da wird bei mir nämlich auch "Link" unterlegt, und ich dachte mir mal "Hä? Führt ja nirgends hin, warum steht da Link?" Also hab ich das Bild dann entlinktet^^, und wenn ich den Link-Button nochmal anklicke kann ich das Bildgenauso leicht wie ein Wort verlinken :)
    Ich bin grauenhaft im Erklären aber vielleicht weißt du, was ich meine :D

    AntwortenLöschen
  2. Skyla22. Oktober 2012 um 19:12

    Nein, bei mir und Lilly geht das nicht. Da gibt es nur die Möglichkeit die Größe zu ändern, die Position, einen Bildunterschrift hinzuzufügen und es zu entfernen.

    AntwortenLöschen
    Antworten
    1. Lilly24. Oktober 2012 um 20:38

      Jap, leider :(
      Aber wow, ich habs jetzt auch kapiert!!! :D

      Löschen

Wir freuen uns immer über Kommentare, also schreibt einfach mal drauf los. Es ist völlig egal, ob lang oder kurz. Nur einigermaßen sinnvoll wäre schön :)

Abonnieren Kommentare zum Post (Atom)