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

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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4O-juj7T81lFz0z8Xv54V2rgaT3TxBYZ-H0FPBVmIvVhlm_bnUq4SfOOKcOEjBfbXGkUf3D4jp0ZH1agWRia2slMj43XmBRsjzi494FtfqGZhPV5JK-6oH3qUEfAWqhKiD2KMKS6tRtFx/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