17.8.13

blogzeug :: hover-pin-it-button einfügen




heute mal etwas ganz anderes, für alle bloglosen leider völlig un:p:interessantes (oder, was viel besser wäre: vielleicht ein ansporn zum selberbloggen?). dafür aber zumindest mit samastagsskizze versehen: eine kleine pintanzgruppe in bunten spätsommerkleidern — als kleine entschädigung sozusagen.

um es gleich zu sagen: ich bin ja eine ziemlich faule pinnerin. nichtsdestotrotz finde ich pinterest eine sehr feine sache. also habe ich mir den pin it button heruntergeladen, mit dessen hilfe ich mir bei streifzügen in den netzweiten irgendwie ins herz springende bilder pinnen kann — zum wiederansehen, zum erinnertwerden. (ja, ich betreibe das wirklich ganz und gar ausschließlich für mich, followerunambitioniert.) wenngleich das ein gutes knöpfchen ist, bin ich aber dennoch oft genug einfach zu faul für die notwendigen (im einzelnen nur minizeitfressenden, aber — ha, jetzt kann ich endlich wieder einmal eine dieser ganz weisen weisheiten anbringen — man weiß ja wie das ist mit dem kleinvieh und dem mist ...) herumklickereien; oder ich vergesse einfach die schiere möglichkeit des pinnens, ernsthaft. sehr entgegen kommt es mir da, wenn bei bildern beim drüberfahren mit der maus (aka neudeutsch hovern) ein pin it button erscheint. und weil ich dachte, dass es vielleicht auch anderen so geht, hab ich diesen effekt hier bei mir vor einiger zeit eingefügt. die liebe dania wollte nun wissen, wie ich das gemacht habe. also erklär ichs für alle, die sich das auch fragen. gerne nämlich.

und zwar geht das so:

1. im blogger-dashbord (ich kanns nur für blogspot sagen) vorlage > html bearbeiten auswählen.
2. mittels strg (bzw. ctrl) + f suchen nach: </body>
3. direkt oberhalb den folgenden code hineinkopieren (alles zwischen den gepunkteten linien ohne diese selbst):

................................................................................................................

<script>
//<![CDATA[
var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "center";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
// This Pinterest Hover Button is brought to you by bloggersentral.com.
// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
// Feel free to use and share, but please keep this notice intact.
</script>

................................................................................................................

4. speichern und das wars auch schon.

wer mag, kann noch das erscheinungsbild ändern:

a. die position, an der der button aufscheint: dafür center (in der 5. zeile) ersetzen druch
... topleft
... topright
... bottomleft
... bottomright
je nachdem, was so gefällt. dabei darauf achten, dass die gänsefüßchen stehenbleiben.

b. das aussehen des buttons selbst. dafür einfach die button-url (in der 3. zeile) ersetzen durch die eines selbst erstellten und hochgeladenen buttons oder durch die eines vorgefertigten; eine sammlung solcher gibts zum beispiel hier.

gelingendes nachbasteln! ich hoffe es.

und ich hab mir das alles übrigens nicht selbst ausgedacht (dafür reicht mein html-wissen leider bei weitem nicht), sondern mich — wie aufmerksame codedurchleser/innen vielleicht bemerkt haben — an der englischsprachigen BloggerSentral-anleitung entlanggehangelt.

Kommentare :

  1. Liebe Ulma, ich mag bitte weitere Tutorials...es scheint, als ob ich bei Dir mal was verstehe! Hach...liebst Stephanie

    AntwortenLöschen
  2. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
    Antworten
    1. und schon erledigt ;)
      ps: am Ende vom Code fehlt noch die Zeile mit geschlossenem script.
      und leider funktioniert der Link zu der buttonsammlung nicht, zumindest bei mir.
      Hier gibt's aber zum Beispiel auch eine:
      Danke noch mal herzlich, liebe Ulma!

      Löschen
    2. vielen lieben dank für den hinweis, jetzt ist alles berichtigt und sollte funktionieren :)

      Löschen
  3. Danke, das ist ein toller Tipp...ich selbst pintereste für mich auch immer ganz gerne.
    Ich habe es gerade nach Deiner Anleitung mal ausprobiert, leider kam bei mir eine Fehlermeldung. Da muss ich mich später nochmal in Ruhe dransetzen.

    LG Verena

    AntwortenLöschen
    Antworten
    1. die fehlermeldung entsteht durch das fehlende geschlossene script am ende des codes: < / script >

      Löschen
  4. Liebe Ulma...na da bin ich doch sofort dabei...ganz lieben Dank für die Anleitung...ich werde sie auf jeden Fall...irgendwann zwischen Mittagessen....Sommerpost...Haushalt....Feierngehen....umsetzen...freue mich schon darauf...LG Lotta.

    AntwortenLöschen
  5. liebe ulma, das hat super geklappt:) hab tausend dank;) es fehlt tatsächlich nur < / script >
    für wordpress könnte man das ganze in form von css einfügen, aber nur wenn man das upgrade für das benutzerdefinierte design hat..kostet natürlich.
    und die sommerkleidchen..die sind besonders fein, sind es die die du gestern abend aus der feder herausgetanzt hast?
    alles liebe!
    sarah

    AntwortenLöschen
    Antworten
    1. ganz genau die :)
      auf der seite, von der ich das hab, steht als für wordpress:
      administration > appearance > editor > footer.php aufrufen

      Löschen
  6. hä?

    ich freue mich, dass andere verstehen ;) ich bin no pinterest no handy no facedings no no no. pins sind hübsch. seriation. da denke ich gleich wieder an die wurzel, du weißt schon. ich erhoffe mir bald vormittags ein kind weniger im haushalt. und ich erhoff mir ein arbeitszimmer. zeit und platz für rhizome.

    dir ein schönes wochenende . wünscht . die . tabea

    AntwortenLöschen
    Antworten
    1. oh, das rhizom, das rhizom ... wird schon wuchern, irgendwann, auch hier.

      Löschen
    2. An euer Rhizom muss ich immer mal denken, seit bei mir ein Kiefernwurzelgeflecht auf dem Werktisch liegt... Ihr seht, ich verfolge das... ;-) Liebe Grüße Ghislana

      Löschen
  7. Du bist ja süß, erstellst html Anleitungen... Mensch, ich quäl mich da auch immer durch, wenn mein blog mal wieder was neues will, ne!? Aber gehört ja irgendwie dazu und wenn gewünschtes erreicht wurde, bin ich ja auch ein klein wenig stolz. ;)

    AntwortenLöschen
    Antworten
    1. ja, und dann auch noch falsche, haha! na, das nächste mal werd ichs vorher fünfmal durchsehen :) wah, und ich find die sucherei immer so mühsam; und vermutend, dass es anderen auch so geht, dachte ich mir eben ...

      Löschen
  8. Ich vergesse auch immer, zu pinnen, obwohl ich es mir vornehme - so eine Ideensammlung ist ja doch sehr schön!
    Danke für die Erklärung - muss ich mir merken (oder pinnen?!) :-)
    LG, Steffi

    AntwortenLöschen
  9. Das hat ja klasse geklappt. Vielen Dank fürs Aufschreiben, Ulma! Und allgemein möchte ich mal loswerden: ich bin gerne auf deinem Blog, das ist fast ein wenig Urlaub mit den schönen Bildern, Skizzen, Texten, Ideen und Träumereien :)
    Liebste Grüße,
    Anne

    AntwortenLöschen
  10. Vielen lieben Dank für die Erklärung, das hat wunderbar geklappt! Ich wünschte mir auch mehr Tutorials, tue mich da auch immer schwer mit :-)

    Lg
    Anne

    AntwortenLöschen
  11. Wie toll! Was war es mühsam mir den Pin (irgendeinen) dahin zu kriegen wo er nun ist... Ich verstehe doch nix davon und bei Schritt 3 schon Schritt 2 vergessen. Nun ist er da und Du hast eine Beschreibung!

    Liebe Grüße, Nichtrafferin-wozu-Followerzahlen-gut-sind-aber-trotzdem-gerne-Pinnerin-Minza

    AntwortenLöschen
  12. Danke, liebe Ulma. Seit einiger Zeit frage ich mich, wie das wohl geht... Du hast mir die Recherche erspart und ich muss es nun nur noch umsetzen ;-) LG, Annette

    AntwortenLöschen
  13. vielen lieben dank, das wollte ich immer mal noch nachholen, habs aber immer wieder vergessen! und schwups, jetzt ists schon erledigt :) herrlich!
    liebe grüße
    anni

    AntwortenLöschen
  14. Mensch super... Ich suche schon ziemlich lange danach, wie ich diesen Button einfügen kann!!! Jetzt ist's erledigt, und ich freue mich sehr!!!
    Liebe Grüße
    Veronika

    AntwortenLöschen
  15. Liebe ULMA,
    Internet ist für mich oft NEULAND wie Frau Merkel das einst so schön formuliert hat... Pinterest... muss mal nachdenken ob ich das nutzen will... jetzt lese ich aber erst mal ein bißchen bei Dir quer und dann schwinge ich den Kochlöffel.
    herzlich Judika

    AntwortenLöschen
  16. Verstanden und umgesetzt! Vielen lieben Dank :)

    AntwortenLöschen
  17. Geschafft!
    Ständig scroll ich übers Bild und staune!!
    Vielen Dank!

    Nur das schöne grüne Retro P, das ich mir ausgesucht habe,
    will nicht erscheinen.
    Wo lad ich denn eine Bild Vorlage hoch, damit die HTML Verlinkung auf das P zugreifen kann?

    Lieben Gruß,
    Veridiana

    AntwortenLöschen
  18. Super Tutorial, den wollte ich schon lange einfügen und jetzt finde ich bei Dir durch Zufall eine klare und einfache Beschreibung... lieben Dank dafür
    Kebo

    AntwortenLöschen
  19. Vielen lieben Dank! Endlich hat's auch bei mir geklappt. Liebe Grüße Danie

    AntwortenLöschen
  20. Danke für deine tolle Anleitung ... jetzt hab ich auch endlich diesen tollen Button auf meinen Bildern *freu*

    LG Katrin

    AntwortenLöschen
  21. DANKE ich hab es nun auch geschafft :) tolle Anleitung.... habe dich bei mir auf FB verankert, damit es noch ganz viele Lesen, hoffe es ist OK?

    Liebe Grüße Heike

    AntwortenLöschen
  22. Na dann kann ich ja nur sagen:: Dankesehr :) ich hab zwar nicht geschafft, dass aussehen vom pin it button zu ändern, aber immerhin ist er jetzt genau da wo er hingehört. Vielen Dank.

    Liebe Grüße von Mareike

    AntwortenLöschen
  23. auch von mir ein herzliches dankeschön :-)

    lg anja

    AntwortenLöschen
  24. Oh du meine Güte, ich hab überall nachgelesen, geforscht, gesucht, und danke, jetzt habe ich es! Ich war echt auf allen möglichen Seiten unterwegs, und es hätte vermutlich schon vorher geklappt, nur habe ich dieses Blöde '/body' im HTML nicht gefunden, und jetzt habe ich es nochmal probiert, mit deinem Code, gefunden, und check, ist drinne!
    Danke!
    Liebe Grüße, Lena

    AntwortenLöschen
  25. Vielen Dank, ich pinne sooo gern, einfach für mich zum Sammeln von Ideen. Jetzt sind auch die Bilder auf meinem Blog mit Pin it Buttoms bestückt. Deine Anleitung war super.
    Grüße Jana.

    AntwortenLöschen
  26. Da tippt frau sich bei Google die Finger wund und findet nix, womit klar zu kommen wäre... dabei kann es sooo einfach sein!
    Hab herzlichen Dank für diese super-klare Anleitung ... bei mir funktioniert ab sofort! <3
    Begeisterte Grüße
    Nina

    AntwortenLöschen
  27. Fantastisch, danke für die tolle Anleitung :) hat wirklich nur 3 Minuten gedauert!

    AntwortenLöschen
  28. Oh war das einfach. Vielen lieben Dank für deine Anleitung.
    liebe Grüße
    Jana.

    AntwortenLöschen
  29. Liebe Ulma!
    Bei mir funktioniert es nicht. Obwohl ich am Ende das geschlossene script habe. Aber gleich 2 Mal!? Ich blick da jetzt gar nicht mehr durch!
    Vielleicht hast du einen Tipp?
    Liebe Grüße
    Nicole

    AntwortenLöschen
    Antworten
    1. liebe nicole, leider bin ich – s. oben – überhaupt nicht gut in html-dingen und kenne mich in wahrheit nur sehr rudimentär damit aus. vielleicht liegt es an den 2x? bei mir hats geklappt, von den anderen besucherinnen kommen auch entsprechende rückmeldungen, also vielleicht nochmal retour und von vorne? ich drück die daumen.

      Löschen
  30. Wow!!! Das geht ja super fix und super einfach! Ich dachte immer, das wär mega kompliziert... Herzlichen Dank für die verständliche Erklärung :)

    AntwortenLöschen
  31. Cool, ich habs geschafft!
    Vielen, vielen Dank!

    LG, katrin

    AntwortenLöschen

danke für deine zeit.