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