Pinterest-Mouse-over-Button bei Bildern für Blogger und Blogspot

Sonntag, 29. September 2013

Hallo :)

Heute habe ich mal keine Karte. Ich habe zwar gebastelt, aber noch nicht fotografiert. Das muss dann halt warten.
Dafür habe ich aber auch etwas am Blog rumgebastelt und, wie man vielleicht sieht, haben die Bilder nun ein Pinterest-Mouseover. So einen kleinen Pinterest-Pin it-Button, wenn man mit der Maus über das Bild geht. (sieh hier:)

X-Large
groß
mittel
klein
Es hat eine Weile gedauert, bis ich es so weit hatte. Denn es gibt zwar Anleitungen dazu, wie man das bei Blogger macht, aber die sind alle schon etwas älter und ich konnte das auf mein Blogger nicht anwenden.
Nun hab ich es aber rausbekommen. Nicht durch irgendwelche anderen Blogs, sondern durch nachdenken und probieren. Jaha! Sowas kann ich :D

Da vielleicht auch andere da draußen sind, die so etwas gerne hätten, aber nicht wissen, wie sie das bei ihrem Blogger-Blog einstellen können, hier ein kleines Tutorial:


  1. Man gehe zur Pinterest for Business Seite und klicke auf den "Widget builder".
  2. Dann wird der "pin it button" ausgewählt.
  3. bei "button type" klickt man auf "image hover".
  4. dann auf "build it"
  5. Dann taucht unten Text und ein script auf. Das nutzen wir aber nicht! Wir klicken auf "advanced" und nehmen dort den code. 
  6. "This can go anywhere on your page, including inside the <HEAD> tag.":

    <script type="text/javascript">
    (function(d){
      var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
      p.type = 'text/javascript';
      p.setAttribute('data-pin-hover', true);
      p.async = true;
      p.src = '//assets.pinterest.com/js/pinit.js';
      f.parentNode.insertBefore(p, f);
    }(document));
    </script>




  7. Wir gehen in unserem Blogger-Dashboard auf "Vorlagen" und dann auf "html bearbeiten". (Das ist unter dem Bild unseres Blogs.)
  8.  Dann haben wir eine Code-Ansicht und oben mehrere Buttons.
    Wir klicken auf "zu Widget wechseln" (oder "weiter zum Widget")
    und wählen "Header 1" aus. (oder etwas ähnliches, das auch Header heißt.) Es soll ja überall auf der Seite geladen werden, da ist der Header woll die beste Wahl.
  9. Am besten alles kopieren und in einer Code- oder Editor-Datei speichern, falls doch etwas schief geht.
  10. Ich habe dann oben eingefügt, direkt vor dem </header> Tag, also bevor der Header wieder geschlossen wird.
  11. Dann oben auf "Vorschau der Vorlage anzeigen" anklicken und schauen, wie es aussieht. Sind noch alle Boxen und Fenster da? Funktioniert der neue Code, usw.
  12. wenn nicht: "Vorlage bearbeiten" anklicken
  13. wenn schon: "Vorlage speichern" anklicken

Das war´s!
Bei mir hat es funktioniert. 
Über Verbesserungen, Anregungen, Shortcuts, what so ever, würde ich mich freuen! Einfach einen Kommentar hinterlassen :)

Bei mir ist es allerdings so, dass der Pin-it button nicht bei  Bildern angezeigt wird, die ich auf "klein" oder "mittel" stelle. Es muss schon "groß" oder "x-large" sein, was meine Bilder aber meistens eh sind.

8 Kommentare:

  1. Hallo! Die Anleitung ist super, irgendwie funktioniert es aber bei mir nicht. Ich setzt es unter . (ein beliebies) aber nichts tut sich. Oder funktioniert es erst bei neuen Posts...

    LIebe Grüße
    Angela

    AntwortenLöschen
    Antworten
    1. Hallo Angela,
      nein, es sollte auch bei alten Posts gehen.
      Ich hab das Problem, dass es nicht bei zu kleinen Bildern geht. Die müssen mindestens "groß" sein.
      Hast du mal versucht, es an einer anderen Stelle einzubauen?

      Lg, Natalie

      Löschen
  2. Hallo. Meine Bilder sind eigentlich immer Groß. Was meinst du mit einer anderen Stelle?
    Liebe Grüße
    Angela

    AntwortenLöschen
    Antworten
    1. Ich versteh Blogger auch nicht. Ich habe gestern auf deinem Blog den Link gefunden, wie man sich die Anzahl der Kommentare richtig anzeigen lassen kann. Ich habe das Problem, dass es nicht geht, also habe ich alles so gemacht, wie es dort beschrieben wurde. In der Vorlagen-Vorschau funktioniert es dann auch. Aber wenn ich es speicher und dann in meinen Blog gehe, geht es nicht. :(

      Mit einer anderen Stelle meinte ich ich eine andere Stelle im Code. Dass du den Code vielleicht zwischen deine Boxen einsetzt oder ans Ende oder was weiß ich. Einfach mal eine andere Stelle probiert? Ich bin leider auch kein html-Experte. :(

      Lg, Natalie

      Löschen
  3. Hallo Natalie,

    bin -zufällig- über die Google-Suche bei Dir gelandet ;-)
    Tausend Dank für die tolle Anleitung! So einfach geht das?
    Bei mir hat es auch sofort funktioniert *happy* .... Klasse!

    Greets & weiterhin happy blogging,
    Dekovibe

    AntwortenLöschen
  4. Hallo Natalie,

    das Problem (kein Pin-It-Button bei kleineren Bildern) hab ich auf meiner Website http://www.neue-autoren.club/autor/Ralf-Dostal leider auch :-(

    Leider finde ich trotz intensivstem Googlen nirgends eine Erklärung für diesen Fehler.

    Kennst Du den Grund (und hast vielleicht die Lösung für das Problem) ?

    Liebe Grüße
    Ralf

    AntwortenLöschen
    Antworten
    1. Hallo Ralf,

      ich habe gerade meinen Post mal editiert. Als ich den Style des Blogs geändert hatte, musste ich den Code neu eingeben und seitdem habe ich das Problem nicht mehr, wie man oben sieht.
      Es gibt zwar Bilder, die ich nicht pinnen kann, aber die gehören zu den Widgets wie "beliebte Posts" oder "Linkwithin".
      Vielleicht ist das auch das Problem auf deiner Seite. Ich war mal schauen, aber ich weiß ja nicht, wo dein Problem ist. Links die zufällige Auswahl an Büchern kann man nicht pinnen, aber das könnte auch daran liegen, dass es ein Widget ist? Die Bilder rechts im Text kann man ja pinnen.
      Ich bin aber auch kein Experte, was javascript und html angeht. Ich bin nur Hobbybastlerin und das mit Papier und Kleber und nicht mit Computern. :D

      Lg, Natalie

      Löschen
    2. Hallo Natalie,

      habe die Antwort durch Ausprobieren herausgefunden:

      Dass kleinere Bilder keinen Pin-It-Button bekommen, ist kein Fehler von Pinterest (und auch nicht von meiner/Deiner/sonst wessen Website), sondern Absicht von Pinterest. Deren Javascript ist so programmiert, dass der Pin-It-Button nur bei Bildern eingeblendet wird, deren Kantenlänge (Breite UND Höhe) jeweils mindestens 120 Pixel beträgt.

      Dafür wird nur die Bildgröße verwendet, wie die Website sie anzeigt (durch die Parameter "width" und "height" erzwungen) und nicht die wahre Bildgröße der Original-Bilddatei.

      Kann man also nichts gegen unternehmen, es sei denn, man vergrößert die Bildanzeige auf die notwendigen Mindestmaße (120x120 pix).

      Liebe Grüße
      Ralf

      Löschen

Hi and welcome to my blog.
I hope you enjoy your visit and will leave me a comment and I sincerely hope that you will call back again.
With love and hugs,
Natalie :)

Related Posts Plugin for WordPress, Blogger...
 
FREE BLOGGER TEMPLATE BY DESIGNER BLOGS