venerdì 15 marzo 2013

Pulsante di Pinterest direttamente sulle foto: a grande richiesta provo a spiegarvelo!!

Oggi faccio la maestra! ;D Tutte attente, se no vi bacchetto!! 
Mi sto cimentando in un compito veeeeramente arduo per me! Ma nei commenti, tante di voi mi chiedono come ho inserito il pulsante di Pinterest direttamente sulle foto, al passaggio del mouse, e voglio svelarvi l’arcano segreto! 

Innanzitutto devo citare, e lo faccio con estremo piacere, la mia fonte: l’illuminante Idee Per Internet E Computer di Ernesto Tirinnanzi! Quando ho aperto My New Old Life, il suo blog mi è stato enormemente utile per una serie infinita di problemi che avevo (e ho)! E suggerisco ad ogni blogger di iscriversi, perché è veramente una fonte inesauribile di informazioni tecniche! Devo dire che il suo linguaggio è piuttosto tecnico, almeno per me, così se vi interessa, provo a rendere l’operazione più accessibile a tutte le blogger completamente digiune di HTML!!

Allora, mettetevi sedute, calme e tranquille per 10 minuti! Niente bambini urlanti, niente gatti che entrano ed escono, niente telefoni che squillano con le mamme che hanno voglia di chiacchierare… Tutte pronte ad inserire il pulsante sui vostri blog? Vi passo a controllare poi, eh!!! ;D
Pulsante di pinterest sulla foto
La cosa veramente interessante, è che questa funzione è in grado di selezionare correttamente l’URL (l’indirizzo) del post giusto, anche se siamo nella homepage del sito! E questo è veramente utile per evitare che un visitatore del link sia costretto (e poi abbandoni… sia mai!) a cercare il post che gli interessa in mezzo a mille!

Nella bacheca di Blogger, andate su Modello e fate innanzitutto per sicurezza un Backup/Ripristino! Quindi cliccate su Modifica HTML e cercate la riga </body> (esattamente questa!!!). Per cercare si clicca ctrl+F. In basso si apre una casellina nella quale potete inserire la scritta </body>. Subito sopra incollate questo codice:

<script>
//<![CDATA[
var  bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "center";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'/>
<!-- please do not alter or remove the following code -->
<div id='bs_pinOnHover'><a href="http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html">Pin It button on image hover</a></div>


[CODICE BY ERNESTO TIRINNANZI]

Quindi salvate il modello.
E ora ammirate il vostro nuovo blog col pulsante integrato!! Facile, no? Bello, no? 

Mi sembra di capire che Tirinnanzi usi un’altra fonte (Greenlava) per creare questo codice, che chiede di non rimuovere il link al suo articolo. In ogni caso per correttezza evitiamo di alterarlo

Possiamo però modificare la posizione in cui appare il pulsante, cambiando la parola center in topleft, topright, bottomleft, bottomright, per spostarlo in alto a sinistra o destra oppure in basso a sinistra o destra.

Sono riuscita a spiegare decentemente? A che punto siete? Fatto tutto?
Io ne vado troppo orgogliosa!

Un abbraccio stretto stretto
Eugenia

60 commenti:

  1. Caspita, ieri quando sono venuta a trovarti nel blog, ho proprio pensato di chiedertelo come hai fatto a mettere il pulsante e ora ci dai anche la fonte per altre dritte. Sei forte ragazza! ;) Ora faccio una piccola seduta di yoga con caffè e sigarettina e parto all'attacco. Se non mi senti più vuol dire che ho fatto esplodere il pc. :D Un bacio grande.Con affetto. Natasha

    RispondiElimina
    Risposte
    1. Ciao Natasha! So che ci sei riuscita!! Grande!! Un abbraccio

      Elimina
  2. Oooooo santo cielo!!!!! ho voluto provarci ma arrivo al punto in cui dici INCOLLATE QUESTO CODICE......aiuto!!! Quale codice????
    Che frana!!!!!!!!

    RispondiElimina
    Risposte
    1. Tutto quello che trovi scritto nel riquadro grigio! Spero si possa selezionare, altrimenti segui il link x Ernesto Tirinnanzi e lo copi dal suo post! In bocca al lupo! Dai che ci riesci

      Elimina
    2. Fatto....ecco....non funziona :(
      vabbè aspetto il mio tredicenne "nerd" che torna da scuola e vediamo.....
      Il blog di Ernesto è.....uauuuuuu!!!! Peccato che capisco 1 parola su 10....ma......sono ottimista!!!! Grazie mille per ora!!!!! baci e buona giornata!

      Elimina
    3. Dany... allora? novità?!? Ci sei riuscita?

      Elimina
  3. Grazie,utilissimo post. Provo a farlo se non ci riesco torno a chiederti aiuto.
    Ciao
    Alessandra

    RispondiElimina
    Risposte
    1. Di nulla Ale! Se non ci aiutiamo tra noi! Un abbraccio!

      Elimina
  4. Eugeniaaaaaaaaaa! Grazie, grazie, grazie! L'ho appena fatto, considerato che era da un pò che cercavo di capire in che modo avrei potuto inserirlo! La tua spiegazione è stata chiarissima e utilissima! Felice fine settimana!

    RispondiElimina
    Risposte
    1. Yeeeh! Felice di esserti stata utile! Bravissima!

      Elimina
  5. Io ti adoro!!!! Non sai da quanto tempo ci provo!!! Adesso vado di corsa, ma stasera quando tutti dormono e sono sola ci provo sicuramente!!!! Grazie mille e buona giornata!!!

    RispondiElimina
  6. Ciao Eugenia, lo sai che sarà tipo due mesi che sono iscritta a Pinterest e non ho ancora caricato una foto!! che vergogna, stasera mi ci impegno e metto in pratica i tuoi consigli, grazie ! bacionissimi e .. sta andando avanti il mio progetto, prossima settimana ci saranno tutte le novità qui e su Fb!!<3<3<3 ciao

    RispondiElimina
    Risposte
    1. Ciao Silvia! Se qualcosa non va... fammi un fischio! ;D E complimenti per i tuoi progetti! Ho le dita incrociate per te!

      Elimina
  7. mmmhhh.... tu sei stata chiarissima... ma io torno a leggerti dopo pranzo..
    Un abbraccio
    Sere

    RispondiElimina
    Risposte
    1. Ok, Sere! Se non riesci, fammi sapere! Un abbraccio

      Elimina
  8. molto interessante, grazie Eugenia!
    Buon week end
    Elena

    RispondiElimina
    Risposte
    1. Di nulla Elena cara! Buon fine settimana anche a te!

      Elimina
  9. Eugenia, lo sai vero che sono diventata pinterest dipendente a causa tua?!? Eh eh...grazie tante...perchè lo adoro! ;-)
    E ho seguito le tue indicazioni! :-)
    Grazie!
    Michela

    RispondiElimina
    Risposte
    1. Lo sapevo... se lo conosci, nonne esci più! Pinterest è la mia droga preferita! ;D Bravissima Michela cara, sono felice che ci sei riuscita!! Un abbraccio

      Elimina
  10. Utilissime informazioni !!! Domattina a mente fresca ci studio e provo.... sperando di non fare pasticci , date le mie scarsissime capacita'informatiche !
    Maestra, sarai fiera di me !!! ;-)
    Buon fine settimana ! Ilaria

    RispondiElimina
    Risposte
    1. Allora?!?! Novità?!?! Vengo a controllarti, eh?! ;D Un bacio grande

      Elimina
  11. Ciao Eugenia, io non sono ancora iscritta a Pinterest ma credo che prima o poi mi deciderò a farlo...intanto mi copio questa tua pagina nei preferiti e al momento giusto ci tornerò. Grazie!
    Daniela =)

    RispondiElimina
    Risposte
    1. Ciao Dany! Questa funzione è utile più ai visitatori del tuo blog, che a te! Se ne hai voglia prova a farlo anche se non hai un account Pinterest! Un bacio

      Elimina
  12. Bravissima.Conosciuta tramite kreattiva e trovo il tuo blog utile e interessante.

    RispondiElimina
  13. Eugenia ma sei trooppo avanti, io non saprei neanche da che parte iniziare..... Andrò anche io a visitare questa tua fonte d'ispirazione.

    RispondiElimina
    Risposte
    1. Uh si Simo! Vai e prostrati alla conoscenza... come ho fatto io del resto!! Altro che avanti!! Ahahah
      Un abbraccio stretto stretto

      Elimina
  14. C'e sempre da imparare, soprattutto in questo campo ^^

    Grazie Eugenia, avrai una follower in più anche su Pinterest!!!
    Baci
    Laura

    RispondiElimina
    Risposte
    1. Grazie Laura! Sono contenta che ti sia utile... e che ci troveremo anche su Pinterest! Un abbraccio e a presto

      Elimina
  15. Ciao vado a farmi un giretto nel tuo blog se non ti dispiace! Già questo post mi piace molto ed é utilissimo. Cosa singolare sono la tua 147 iscritta e tu la mia 147 !
    A presto
    Mari

    RispondiElimina
    Risposte
    1. Ciao Mari! Benvenuta!! gira pure, spero che starai comoda!! ;D

      Elimina
  16. Grazie per la segnalazione...l'ho appena caricato sul mio blog e funziona bene!
    ciao
    denise

    RispondiElimina
  17. Provo a farlo anch'io!!!
    Ho iniziato a seguirti, grazie per essere passata da me!
    A presto
    Bb

    RispondiElimina
    Risposte
    1. Ciao Bb! Benvenuta! Se hai problemi, fammi sapere! Un abbraccio

      Elimina
    2. Ce l'ho fatta!! Fantastico!!!!
      Grazie e buona domenica!

      Elimina
    3. beneee! Sono proprio contenta! Bravissima!

      Elimina
  18. Ciao
    Bello questo Blog!!
    e questo Post proverò ad inserirlo..
    Inizio a seguirti,

    mi farebbe piacere averti qui:
    http://zichinina.blogspot.it/
    a presto

    RispondiElimina
  19. Grazie per la partecipazione al mio link party!

    RispondiElimina
  20. Risposte
    1. Felice che ti sia servito!! ^_^ Buona giornata cara!

      Elimina
  21. fantastico ci sono riuscita pure io che in genere son negata in queste cose, grazie ancora!
    se ti va vieni a salutarmi!


    www.babshome.ir

    RispondiElimina
  22. Un milione di grazie per questo post "illuminante!!!!

    RispondiElimina
  23. io non ci riesco!!!!!! Ci ho già provato diverse volte ma il benedetto pulsante non compare!!!!!

    RispondiElimina
    Risposte
    1. Oh Ginger... non so proprio come aiutarti! Hai provato anche a seguire le istruzioni del link a cui rimando? In genere Ernesto è davvero bravissimo nelle spiegazioni!
      Assicurati di aver trovato il punto esatto in cui inserire il codice! A volte basta inserire una virgola sbagliata e non funziona nulla! :(
      Buona giornata!

      Elimina
  24. grazie mille! semplicissimo e facilissimo! ecco il mio blog
    http://theshadeoffashion.blogspot.it/

    RispondiElimina
    Risposte
    1. Iolanda, sono felice che ti sia stato utile!!! Un abbraccio e a presto!

      Elimina
  25. grazie mille, è stato semplicissimo! Un abbraccio!

    RispondiElimina
    Risposte
    1. Sara sono felice che il tutorial ti sia stato utile!! Un abbraccio e a presto!!

      Elimina
  26. eugenia grazie!!! avevo letto altri post ma non ero riuscita il tuo e spiegato benissimo grazie grazie....
    ora dobbiamo capire come si mette un pulsante piu carino!!!! chi lo sa?

    RispondiElimina
    Risposte
    1. Sono felice che ti sia stato utile il mio post cara!! Ora per il pulsante più carino mi chiedi davvero troppo!! ;D
      un abbraccio!!

      Elimina
  27. grazie non sai da quando tempo cercavo di capire come si faceva, vienimi a trovare!!!!! ^_^

    RispondiElimina
    Risposte
    1. Ciao Anna!! Sono felice che questo post ti sia stato utile!! ^_^
      Arrivo presto!! Un abbraccio!

      Elimina
  28. OH MIO DIOOOOOOOOOOOOOOOO!!!
    TI RINGRAZIO DI CUOREEEEEEEE!!
    Ti seguo da un po' e non ho mai avuto il coraggio di fare una cosa del genere, ma grazie a te ora è tutto a posto!!!
    GRAZIE!!!
    Adesso salvo la tua pagina nell'Olimpo dei blog in modo da venirti a trovare più spesso!
    GRAZIEGRAZIEGRAZIE!!

    PS.
    se vuoi vedere che effettivamente ce l'ho fatta ti lascio il link!
    E nel prossimo post ti dedico almeno 1 riga perchè sei fantastica!
    http://melacannella.blogspot.fr/

    RispondiElimina
  29. Io arrivo molto in ritardo, ma ti ringrazio infinitamente di queste indicazioni perchè sono riucita a sistemare il PIN IT solo leggendo questo tuo post. Grazie di cuore!!
    Claudia

    RispondiElimina
  30. Beh guarda..non sai da quanto cercavo questo tutorial..sei stata gentilissima e ti ringrazio infinitamente!!
    Fatto...
    AnnaP

    RispondiElimina

Pin It button on image hover