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 |
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:
- Man gehe zur Pinterest for Business Seite und klicke auf den "Widget builder".
- Dann wird der "pin it button" ausgewählt.
- bei "button type" klickt man auf "image hover".
- dann auf "build it"
- Dann taucht unten Text und ein script auf. Das nutzen wir aber nicht! Wir klicken auf "advanced" und nehmen dort den code.
- "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> - Wir gehen in unserem Blogger-Dashboard auf "Vorlagen" und dann auf "html bearbeiten". (Das ist unter dem Bild unseres Blogs.)
- 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. - Am besten alles kopieren und in einer Code- oder Editor-Datei speichern, falls doch etwas schief geht.
- Ich habe dann oben eingefügt, direkt vor dem </header> Tag, also bevor der Header wieder geschlossen wird.
- 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.
- wenn nicht: "Vorlage bearbeiten" anklicken
- 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 :)
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...
AntwortenLöschenLIebe Grüße
Angela
Hallo Angela,
Löschennein, 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
Hallo. Meine Bilder sind eigentlich immer Groß. Was meinst du mit einer anderen Stelle?
AntwortenLöschenLiebe Grüße
Angela
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. :(
LöschenMit 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
Hallo Natalie,
AntwortenLöschenbin -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
Hallo Natalie,
AntwortenLöschendas 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
Hallo Ralf,
Löschenich 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
Hallo Natalie,
Löschenhabe 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