Donnerstag, 28. Januar 2016

Einzelne Bilder ohne Rahmen und Link bei Blogger

Bei Google Blogger auf Blogspot.com einzelne Bilder ohne Rahmen in die Artikel und Seiten einbinden.

In den allgemeinen Einstellungsanleitungen zu "Bilder ohne Rahmen", wird keine Methode angeboten, einzelne Bilder, Fotos oder Images ohne Rahmen in die Artikel und Seiten einzubinden. Die bekannten Methoden - per HTML-Code oder CSS - schalten entweder alle oder keine Bilder ohne Rahmen.

In gewissen Situationen ist es notwendig, Bilder einzubinden, die unabhängig von den allgemeinen Regeln des Blogs sind.

Hier wird eine Methode angeboten, bei der einzelne Bilder ohne Rahmen und Lightbox in den Google Blogger Blog eingebunden werden können. Dazu wird sich der HTML-Methode von <object> bedient.

Zum Einbinden eines einzelnen Bildes ohne Rahmen und Lightbox muss das Bild direkt per <object> in den HTML-Code eingebunden werden. Dazu muss der Editor in den HTML-Modus geschalten werden.


Nun ist bei schon vorhandenem Text der HTML-Code des Artikels oder der Seite zu sehen. Es ist nun notwendig zu wissen, wo das Bild im Text positioniert werden soll. Wichtig ist zu wissen, dass neuer HTML-Code im allgemeinen immer nach diesem Zeichen > oder vor diesem Zeichen < eingebunden werden muss, WENN diese schon vorhanden sind. Ansonsten steht einem die Wahl frei.

Eine sehr einfache Methode ist, wenn das Bild zuerst ganz normal wie alle anderen Bilder in den Artikel oder die Seite eingebunden wird. Wenn dies geschehen ist, dann, wie auf dem ersten Screenshot zu sehen, in den HTML-Modus des Editors wechseln.

INFO: ZUERST DAS BILD GANZ NORMAL EINBINDEN UND POSITIONIEREN.

Der HTML-Code eines Bildes fängt mit <a ... an und hört mit ... /a> auf. Das tun auch Links. Zur Unterscheidung findet sich in der Mitte ein <img ... . Auch ist dort gleich die URL des Bildes zu sehen. Sie fängt mit http:// ... an und hört mit ... .jpg auf.


Dieser blau markierte HTML-Code mit Link und Image muss nun durch den <object> HTML-Code ersetzt werden. Vorher muss aber die notwendige URL des Bildes kopiert werden. Auch müssen Höhe und Breite des Bildes notiert werden.


Notieren, bzw. kopieren der zu übernehmenden Informationen in diesem Beispiel:
1.) Bild-URL: http://2.bp.blogspot.com/-hFU7tIkdEjk/Vj392BEydxI/AAAAAAAAAb4/mIUGlQ5ELl8/s640/blogger-html.jpg
2.) Bild-Höhe: height="221"
3.) Bild-Breite: width="400"

Nun kann der blau markierte HTML-Code durch diesen ersetzt werden:

<object data="Bild-URL" height="Bild-Höhe" type="image/jpg" width="Bild-Breite"></object>
<param name="src" value="Bild-URL" />

Nun muss die URL des Bildes, die Bild-Höhe und die Bild-Breite eingefügt werden.

<object data="http://2.bp.blogspot.com/-hFU7tIkdEjk/Vj392BEydxI/AAAAAAAAAb4/mIUGlQ5ELl8/s1600/blogger-html.jpg" height="221" type="image/jpg" width="400"></object>
<param name="src" value="http://2.bp.blogspot.com/-hFU7tIkdEjk/Vj392BEydxI/AAAAAAAAAb4/mIUGlQ5ELl8/s1600/blogger-html.jpg" />

Bei einem PNG Bild muss der Image-Typ geändert werden:
JPG: type="image/jpg"
PNG: type="image/png"
Bei GIF, TIFF, BMP, oder anderen Bildformaten bitte selber testen. In der Regel wird immer die Datei-Endung als Typ angegeben.

So sieht der fertige <object> HTML-Code aus:


Und so sieht das Bild als <object> eingebunden ohne Rahmen und Link aus:


Hier noch einmal alle Schritte zusammengefasst:

1.) Bild ganz normal mit dem Editor einbinden
2.) Bild ganz normal im Editor positionieren
3.) In den HTML-Modus des Editors wechseln
4.) Den HTML-Code des Bildes finden
5.) Bild-URL kopieren
6.) Bild-Höhe und Bild-Breite notieren/kopieren
7.) <object> HTML-Code einfügen
8.) Bild-URL in den <object> HTML-Code einfügen
9.) Bild-Höhe und Bild-Breite in den <object> HTML-Code einfügen
8.) Speichern. Fertig.

Voila!

Es gibt bei dieser Methode nur eine Einschränkung.
1.) Das Bild ist im Editor nicht zu sehen, sondern nur ein <object>-Platzhalter.
Der <object>-Platzhalter sieht im Editor folgendermaßen aus: