HTML #8: Grab my Button

Es ist so schön zu sehen, dass ihr mit meiner Reihe so gut klar kommt und zwei von euch sind ganz besonders fleißig. Die liebe Gesine hat ihre Sidebar umgestaltet und hat eine Idee, die gerade bei amerikanischen Blogs weit verbreitet ist. Dort gibt es keine Liste mit befreundeten Blogs sondern eine kleine Bildergalerie. Für sie habe ich nun extra eine Art Minibanner gebastelt. Kurz darauf hat Katharina mich angesprochen, die diese Idee noch weiter entwickelt hat. So kommt es, dass ich nun ganz ungeplant ein Tutorial zu "Grab my Button" dazuwischen schiebe, denn Katharina und ich standen zunächst vor dem gleichen Problem.



Ziel ist es in der Sidebar unseren Button bzw. unser Minibanner anzeigen zu lassen und dadrunter möchten wir eine eine Box haben, aus der der Code gleicht kopiert und eingefügt werden kann. Eigentlich könnte es so einfach sein, denn bis auf einen Befehl kennen wir schon alles - theoretisch.

Mit dem Code <textarea> lässt sich eine Box erzeugen, wie ich sie schon für den letzten Teil einer HTML-Reihe benutzt habe. Alles zusammen gebastelt sieht im HTML/Java-Gadget zunächst noch ganz gut aus, doch kaum führen wir es aus, ist die Box leer und wenn wir es erneut öffnen, dann fehlt der Inhalt der Box. Sehr ärgerlich, dass Blogger da wieder so extrem rein fuschen muss, denn es hätte so einfach sein können. Also habe ich mich auf die Suche gemacht und bei meinem nächsten Versuch hatte ich doch glatt das Bild inkl. Link in der Box und darüber. Das wollte ich nun auch nicht haben. Verstehe es wer wolle, aber ich habe eine Lösung gefunden.


Wie immer ist es am Ende gar nicht mehr so schwer, wenn man erstmal die Lösung gefunden hat. Natürlich brauchen wir wieder ein HTML/JavaScript-Gadget und einen Lückentext.


Zu gerne hätte ich euch auch hier wieder eine Box zum Kopieren bereit gestellt, aber Blogger korrigiert und löscht nach Lust und Laune. Aus diesem Grund müsstet ihr bitte den kursiven Text kopieren und wie immer den Text in den eckigen Klammern ersetzen.

<div class="grab-button" style="width: [Breite]px; margin: 0 auto;">
<img src="[BildURL]" alt="[Blogname]" width="[Breite]"/>
<div style="margin: 0;
padding: 0;
border: 1px solid gray;
width: [Breite]px;
height: [Höhe]px;
overflow: scroll;">
&lt;div class="[Blogname-ohne-Leerzeichen]" style="width: [Breite]px; margin: 0
auto;">
&lt;a href="[BlogURL]" rel="nofollow">
&lt;img src="[BildURL]" alt="[Blogname]" width="[Breite]"/>
&lt;/a>
&lt;/div>
</div>
</div>
[Breite] = die Breite des Bildes, also etwas weniger als die Breite eurer Sidebar, in meinem Fall 200 px
[BildURL] = der Link zu eurem Minibanner, wie das mit dem Upload geht könnt ihr hier nachlesen
[Blogname] = der Name eures Blogs
[Höhe] = die Höhe des Textfeldes, nicht des Bildes, bei mir sind es 150 px
[Blogname-ohne-Leerzeichen] = Eben der Blogname ohne Leerzeichen, z.B. Jakasters-Fotowelt statt Jakasters Fotowelt
[BlogURL] = der Link zu eurem Blog

Damit sollte es nun klappen und ihr könnt auch einen Grab-my-Button in eure Sidebar einfügen. Wichtig ist, dass "&lt;" stehen bleibt. Sonderzeichen werden im HTML anders dargestellt. Sobald ihr das Gadget ausführt, wird daraus ein "<" wie wir es ja schon kennen und alles ist wie es sein sollte. Ein kleiner aber entscheidender Trick auf dem Weg zur Freundschaft mit/zwischen HTML und Blogger.

16 liebe & nette Meinungen

  1. Dummdidumm... jahhaaa.. *freu* Geh mal gucken! .... Ich hab's, ich hab's! *hüpf*

    Du bist ein Goldschatz! ♥♥♥

    Ich hab' zwar keinen blassen Schimmer, wie du auf die Lösung gekommen bist, aber es funktioniert, und du bist das Genie!

    Ich geh' mich dann mal eine Runde freuen. :-)))

    Allerliebste Grüße
    Katharina

    AntwortenLöschen
    Antworten
    1. Hallo Katharina,

      ein bisschen Recherche, drei Sackgassen, kurze Verzweiflung und plötzlich geht es: Magie :D Ich freue mich, dass ich dir helfen konnte.

      Liebe Grüße
      Rebecca

      Löschen
  2. Das ist echt Wahnsinn was Du alles draufhast!
    Ich muss mich da jetzt echt mal dahinterklemmen!

    Liebe Grüße
    Christiane

    AntwortenLöschen
  3. Hallo oh wie schön, endlich Hilfe. Ich bin heute über Katharina in deinen Blog gestolpert und werde die jetzt gaaaaaaaaaaanz oft besuchen und versuchen in meinen Blog Struktur zu bringen. Hier schon mal einen großen Haufen Vorschusslorbeeren. ;o).
    Liebe Grüße Ines

    AntwortenLöschen
  4. Liebe Rebecca ♥
    du bist der HTML- Held schlechthin :o*
    vielen lieben Dank du Goldschatz!
    herzliche Grüße, Gesine
    (die sich immer wieder riesig über deinen schicken Button freut)

    AntwortenLöschen
  5. Also dieser Button ist dafür da, dass ihn sich jeder von dem Blog mitnehmen kann, ja?
    Also wie ein Linkbildchen?
    Habs nicht so ganz verstanden...

    Liebe Grüße
    Ina

    AntwortenLöschen
    Antworten
    1. Hallo Ina,

      genau dazu ist das gedacht, nur dass es eben noch leichter ist, da ja nur noch kopiert und eingefügt werden muss. Ich kannte das bisher in erster Linie von amerikanischen Blogs, da gehört das irgendwie zum Standard. Wenn einem ein Blog gefällt oder man befreundet ist, dann verlinkt man denjenigen mit so einem kleinen Bildchen. Auf deutschen Blogs habe ich das bisher als Blogroll mit Textlink oder vorgefertigt immer mit dem aktuellsten Post gesehen - aber wenn ich das richtig verstanden habe, funktioniert das nur mit GFC.

      Gesine hat nun auch eine Galerie mit ihren Lieblingsbloggern angelegt und wollte dafür ein Bildchen von mir haben, Katharina hatte dann die Idee so ein Linkfeld unter dem Button einzurichten, es hat aber nicht richtig geklappt und so habe ich mich für sie auf die Suche nach einer Lösung gemacht. Da ich dachte, dass die Frage vielleicht noch öfter aufkommt habe ich einen Post draus gemacht :)

      Liebe Grüße
      Rebecca

      Löschen
  6. Oje Rebecca du bringst mich immer auf neue Ideen die ich auf meinem Blog einbauen möchte. Bin ja immer noch am Button einbauen bzw. hab ich noch nicht wirklich welche gefunden die mir gefallen. Aber gut Ding braucht weile ;-)
    Auf jeden Fall: I LIKE deine Anleitungen
    glg
    Sonja

    AntwortenLöschen
  7. Hach! Darüber habe ich doch tatsächlich auch mal ein Tutorial geschrieben, weil ich damals (Ich bloggte gerade einen Monat!) soooo stolz war, das hinzubekommen! :-)
    Tatsächlich war das sogar mein erstes Tutorial ever!!! - Deins ist besser! :-P
    LG

    AntwortenLöschen
    Antworten
    1. http://pamelopee.blogspot.de/2013/08/tutorial-einen-button.html

      Löschen
    2. Hallo Pamela,

      dein Tutorial kannte ich noch gar nicht. Hach, da sieht man mal wieder, dass ich erst später zu deinem Blog gestoßen bin. Aber hier ging es ja vor allem um die Box dadrunter, wo nur noch kopiert werden muss :)

      Danke für das Lob, ich mach das aber auch schon ein paar Jahre :D

      Liebe Grüße
      Rebecca

      Löschen
  8. Huhu..... hier bin ich!!! Danke für die schnelle Antwort, wenn du mitten beim lernen bist, kannst dir auch Zeit lassen! ;-) Ich hatte gar nicht gemerkt, dass ich simultan von beiden Tuto-Seiten gearbeitet habe. Hier ist das mit dem Text!!!
    [Höhe] = die Höhe des Textfeldes, nicht des Bildes, bei mir sind es 150 px
    Das Bild hat ein jpg Format, aber wenn ich auf die rechte Maustaste geh, erscheint nirgendwo was vom Bild und URL, sondern nur Grafik bla bla bla..... und bei der "Probe" was es im Blog nicht zu sehen!
    Liebe Grüße und danke nochmal!!!
    Betty

    AntwortenLöschen
    Antworten
    1. Hallo Betty,

      misch nicht zu viel. Ich hab immer versucht alles was man braucht kurz zu erklären.

      Je nach dem womit du im Internet bist (Internet Explorer, Firefox, Chrome, Opera, Safari und was es alles gibt) hat das einen anderen Namen. Du kannst sonst auch rechts auf das Bild klicken, da steht dann sowas wie "In neuen Tab öffnen" "Anzeigen". Da dürfte dann nur die Grafik auf weißem Hintergrund zu sehen sein und in der Adressleiste oben steht dann etwas wie xyz.jpg. Das kannst du auch kopieren.

      Wichtig ist, dass du die Stellen im Code immer inklusive der eckigen Klammern ersetzt, die dürfen am Ende also nicht mehr da sein.

      Wie hoch dein Text ist, ist gar nicht wichtig. Es geht darum wie hoch das Feld dargestellt werden soll. Wenn der Text zu lang ist, dann ist das gar nicht schlimm, denn dann kommt automatisch so ein Balken. Das kannst du also ganz nach Geschmack machen.

      Hoffentlich klappt es nun :)

      Liebe Grüße
      Rebecca

      Löschen
    2. Das ist eine schlechte Gwohnheit ovn mir ;-) So, jetzt habe ich mich nur hiermit beschäftigt. Ich hatte natürlich die Klammern gelassen. Jetzt sind sie weg, aber das Foto ist riesig!!! Mehrmals im Code ist die Breite gefragt..... ist das immer die Gleiche breite?!? Mhh... so doof bin ich ja nicht, aber das Ding hier will nicht funktioniert..... uaaaahhhh!!!!

      Löschen
    3. Hallo Betty,

      die erste Breite gibt die des ganzen Gebildes aus Bild und Textfeld und Code an. Da müsstest du dich an der Breite deiner Sidebar orientieren.

      In der zweiten Zeile gibst du die Breite für das Bild an, dass angezeigt werden soll, da habe ich die gleiche Breite genommen wie davor.

      Dann steht da Breite und Höhe einmal direkt untereinander. Damit gibst du an wie groß diese Box werden soll, aus der der Code kopiert werden kann. Es ist natürlich schön, wenn die Breite passt. Ob du den kompletten Text angezeigt haben willst, weiß ich nicht. Eigentlich reicht es, wenn man erkennt wo man kopieren soll.

      Dann steht noch zweimal die Breite in den Zeilen mit diesem komischen Anfang drin (ich kann mich damit immer noch nicht anfreunde, weil es so falsch aussieht, aber es klappt eben). Das ist das, was später kopiert wird. Eigentlich müsste der, der es bei sich einfügt dort die passende Größe angeben. Ob das aber jeder Kann und macht ist fraglich. Also gibst du hier die Größe an (bei beiden) in der du gerne auf anderen Blogs dargestellt werden willst. Bei mir stehen da überall 150 px drin.

      Du schreibst also erst einen Rahmen oder eine Box, in die du alle Informationen einfügst. Welches Bild soll dargestellt werden? Dann willst du eine Box haben? Wie groß soll die sein? Was soll in der Box stehen? Im Wesentlichen ja das, was du schon über der Box als Vorschau dargestellt hast. Darum ist das alles irgendwie doppelt drin.

      Liebe Grüße
      Rebecca

      Löschen
  9. Was für ein tolles Tutorial. Habe lange danach gesucht und habs erst durch deine detaillierte Beschreibung hinbekommen. Vielen Dank fürs Teilen!!
    Ich finde deine Tutorials übrigens alle Klasse.
    lg tina

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