Creare una finestra pop-up in blogger

Creare un pop-up significa aprire una nuova finestra del browser contenente una pagina o un determinato contenuto.

Per farla breve, vengono definite pop-up tutte le finestre pubblicitarie che sbucano all'improvviso mentre stiamo navigando su determinati siti web o, le finestre che si aprono quando clicchiamo su degli appositi link.

Il linguaggio di programmazione usato per la creazione di queste particolari finestre è il famosissimo JavaScript.

Fatta questa piccola introduzione, passiamo a quello che è il corpo di quet'articolo, ovvero la creazione di una finestra pop-up in blogger.

Ciò che ci accingiamo a creare, è una cosa ben diversa dalle varie pubblicità che sbucano all'improvviso.

La nostra infatti, si aprirà solo quando uno dei nostri utenti avrà deciso di cliccare su un determinato link.

Provate a cliccare su questo link per capire di cosa stiamo parlando realmente. Dovrebbe aprirsi una finestrina di dimensioni 300x300 contenente il logo della camera dei blog. Questa è la conosciutissima comparsa di un pop-up.

La creazione di una finestra pop-up non è particolarmente difficile. Basta seguire alcuni semplici accorgimenti.

Per prima cosa rechiamoci in Layout/Modifica HTML ed eseguiamo, per precauzione, il backup del nostro modello.

Fatto il backup, ricerchiamo la stringa </head> e inseriamo questo codice subito prima:

<script>
function openPopup(divId,W,H) {
if(W == undefined || H == undefined) {
W=1024;
H=768;
}
var html = document.getElementById(divId).innerHTML;
var newWindow = window.open(&quot;&quot;,&quot;&quot;,&quot;top=100,left=200,width=&quot; +W+&quot;,height=&quot;+H+&quot;,scrollbars=yes,status=no,menubar=no,toolbar=no,locations=no&quot;);
newWindow.document.open();
newWindow.document.write(html);
newWindow.document.close();
}
</script>

Terminate le modifiche salviamo il modello.

Avremo così richiamato il codice che ci consentirà di integrare dei pop-up nel nostro blog.

Successivamente ci resterà da vedere come inserire una di queste finestre all'interno di un articolo o widget di blogger.

Non c'è da preoccuparsi, è un'operazione semplicissima. Basta far uso di questa riga di codice:

<a onclick="openPopup('pop-up','200','300')">link</a>

Per definire il contenuto di questo pop-up, basterà creare un <div></div> con id=pop-up come nell'esempio qui riportato:

<div id="pop-up" style="background: #000000; text-align: center;"><img src="http://www.ilsitoblu.com/lacameradeiblog/immagini/logo.png"/></div>

I valori 200 e 300 indicano le dimensioni della nostra finestra. Possono quindi essere modificati a piacimento, mentre se lasciati vuoti, assumeranno i valori 1024x768.

Fatemi sapere qualora riscontriate dei problemi!