Come aprire i link in una nuova pagina o in una finestra popup

Una domanda che mi è stata posta molto spesso, sia via email che nei commenti, è proprio:

come è possibile aprire un link in una nuova pagina o in una finestra popup?

Ieri chattando con Sauro, mi ha fatto notare che molte cose che a me sembrano banali e che do per scontato sono invece di grande aiuto per chi è alle prime armi con l'html.
Ho deciso quindi di scrivere questo post...

Già tempo fa, su richiesta di Gianpy, ho scritto il post Come aprire una finestra popup dal blog: lo script che ho realizzato consente di visualizzare nel popup una porzione del post cliccando su un link.

Oggi vediamo invece come aprire un link in una nuova pagina o in un popup, utile sia per chi ha un blog su Blogger che su altre piattaforme.

Innanzitutto la sintassi di un link è la seguente:

<a href="indirizzo">Nome</a>

dove indirizzo può essere l'url di un blog, un sito, un'immagine o un vostro post mentre Nome rappresenta il nome visualizzato nella pagina. Ad esempio se scrivo:

<a href="http://www.flickr.com/photos/ioleblog/">Le mie header su Flickr!</a>

nella pagina visualizzo la stringa "Le mie header su Flickr!" e cliccando sul link visualizzo la pagina di Flickr con le mie header.

Non avendo impostato alcuna proprietà del link, l'indirizzo viene aperto nella stessa pagina in cui ci troviamo.
Per aprire invece un link in una nuova finestra basta aggiungere la proprietà target in questo modo:

<a href="indirizzo" target="_blank">Nome</a>

Quando l'attributo target viene omesso, di default il link viene aperto nella stessa pagina.

Al posto di un Nome, è possibile anche inserire un'immagine; la sintassi allora diventa:

<a href="indirizzo" target="_blank"><img src="indirizzo_immagine" /></a>

Ed ecco il risultato: Le mie header su Flickr! (in una nuova pagina)

Per aprire il link in un popup, la sintassi invece è la seguente:

<a onclick="window.open('indirizzo','nome finestra','caratteristiche finestra');">Nome</a>

dove indirizzo e Nome hanno lo stesso signifivato di prima, mentre nome finestra serve ad identificare la finestra che andiamo ad aprire (è opzionale, quindi possiamo scrivere anche '').

Per quanto riguarda le caratteristiche finestra eccone alcune:

• width e height: larghezza e altezza della finestra in pixel
  (es. width=500,height=400)
• left e top: distanza da sinistra e dal lato superiore del monitor
  (es. left=200,top=300)
• resizable: la finestra può essere ridimensionata
  (resizable=yes oppure resizable=no)
• fullscreen: la finestra viene aperta a tutto schermo
  (fullscreen=yes oppure fullscreen=no)
• menubar: la finestra ha la barra del menu
  (menubar=yes oppure menubar=no)
• toolbar: la finestra ha la barra degli strumenti del browser
  (toolbar=yes oppure toolbar=no)
• location: la finestra ha la barra degli indirizzi del browser
  (location=yes oppure location=no)
• scrollbars: la finestra ha le barre di scorrimento laterali
  (scrollbars=yes oppure scrollbars=no)
• status: la finestra ha la barra di stato
  (status=yes oppure status=no)

Le caratteristiche vanno separate con una virgola.

Vediamo insieme un esempio: un popup con dimensioni 800x600px fisse (cioè non ridimensionabile), posizionato in alto a sinistra del monitor, senza alcuna barra.

<a href="#" onclick="window.open('http://www.flickr.com/photos/ioleblog/', '', 'width=800,height=600,left=0,top=0,resizable=no,menubar=no,toolbar=no,location=no,scrollbars=no,status=no');">Le mie header su Flickr</a>

ed ecco il risultato: Le mie header su Flickr! (in un popup)

Resto a disposizione per ogni dubbio o chiarimento.

Newsletter by follow.it

Come stampare i post di Blogger: funzione per stampare solo alcuni post o porzioni di post

Qualche giorno fa ho ricevuto un'email da Renato e Giuliana del blog cliccandoci.blogspot.com con una richiesta a proposito della stampa dei post. Nel loro blog, alcuni post sono delle ricette e vorrebbero dare la possibilità ai propri lettori di stamparle facilmente, magari selezionando solo la parte della ricetta e tralasciare l'introduzione.

Già tempo fa ho pubblicato due post con le istruzioni per consentire ai propri lettori la stampa:

• Come stampare i post di Blogger: una funzione javascript specifica per i blog con sezioni nascoste (come quello di Francesca che me l'ha richiesta) e una funzione adatta a tutti i template (che è stata largamente utilizzata)
• Nuovo script per stampare anche il link e il titolo del post: una funzione realizzata in base alle richieste di Piero per consentire ai propri lettori di stampare non solo l'intero post ma anche il titolo ed il link

Utilizzando sia l'uno che l'altro metodo, andando ad agire sul template, ogni post avrà alla fine l'icona e il link per la stampa. In questo modo tutti i post del blog potranno essere stampati. In effetti mi capita spesso di vedere nei blog di cucina che seguo, il link Stampa la ricetta in post che ricette non sono.
Per rispondere alla richiesta di Renato e Giuliana, ho deciso di rivedere quelle funzioni e scrivere questo post con tutte le istruzioni per poter stampare solo un singolo post o un porzione di esso.

Nel css del template, cioè subito prima della riga ]]></b:skin>, incollate questo codice:

a.printer {
cursor: pointer;
background: url(http://www.iolecal.it/blog/posts/post074/printer.gif) no-repeat;
padding-left: 20px;
margin-right: 10px;
}

Poi trovate la riga </head> e subito prima incollate questo codice javascript:

<script>
function stampaPost(divId) {
var postContent = document.getElementById(divId).innerHTML;
stampa(postContent);
}
function stampa(html) {
var printWindow = window.open("","printPost","top=100,left=200,width=600,height=400,scrollbars=yes,status=no,menubar=no,toolbar=no,locations=no");
printWindow.document.open();
printWindow.document.write('&lt;div onclick="javascript:window.print();"&gt;&lt;img src="http://www.iolecal.it/blog/posts/post074/printer.gif"/&gt;&lt;div&gt;' + html);
printWindow.document.close();
}
</script>

e salvate il modello.

Per ogni post che volete far stampare, dovrete modificarne manualmente l'html cliccando sul tab Modifica Html dell'editor di Blogger.

Come vi dicevo prima, potete scegliere se stampare l'intero post o una porzione di esso. Qualunque sia la parte del post che volete stampare, dovrete trovare il codice html corrispondente e aggiungere subito prima <div id="id_del_post"> e subito dopo </div>.

Poi alla fine del post, aggiungete il codice per far apparire il link per la stampa:

<a class='printer' onclick='stampaPost("id_del_post");'>Stampa la ricetta</a>

dove id_del_post deve essere sempre diverso per ogni post (potete mettere il titolo, una sigla, il numero del post, ...), mentre la scritta Stampa la ricetta potete personalizzarla in base alle vostre esigenze.

Vi riporto di seguito l'esempio per stampare solo una porzione di questo post (le prime sei righe):

come potete vedere ho aggiunto <div id="post118"> e </div> al codice html delle prime sei righe del mio post.

Vi posso assicurare che è più facile a farsi che a dirsi.

Newsletter by follow.it

Post in forma sintetica su Blogger: la mia versione senza script

Ho sempre pensato di presentare nella homepage del mio blog gli articoli in forma sintetica seguendo i due post di Tenebrae (versione manuale e automatica) ma non mi andava di mettere mano all'html dei post che avevo già pubblicato né tanto meno di aggiungere altri script al blog (che già ne ha troppi).

Qualche mese fa ho anche pubblicato il post su come realizzare i Post espandibili su Blogger; l'unica differenza con i due metodi presentati da Tenebrae stava nel fatto che cliccando su "Leggi tutto..." il resto del post veniva visualizzato senza aprire una nuova pagina ma semplicemente rendendo visibile quella parte di post nascosta. Ovviamente sempre grazie ad uno script.

Da oggi, come potete vedere, nella homepage del mio blog i post sono in forma sintetica e la soluzione che ho trovato non utilizza script...

Su alcuni blog ho letto anche che Blogger ha introdotto da poco la possibilità di utilizzare i post espandibili grazie al nuovo editor; io l'ho provato sul mio blog di prova e preferisco utilizzare l'editor classico.

Vediamo insieme come realizzare la mia soluzione senza script!

Andate in Blogger - Layout - Modifica HTML e cliccate poi su Espandi i modelli widget. Trovate la riga di codice:

<p><data:post.body/></p>

e sostituitela con

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id' style='height: 300px; overflow: hidden;'><data:post.body/></div>
<span class='readmore' style='margin-top: 15px; margin-left: 380px'><a expr:href='data:post.url'> Leggi tutto...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

In questa porzione di codice potete personalizzare il valore 300px, che rappresenta l'altezza della porzione di post che volete mostrare nell'homepage, e la dicitura Leggi tutto..., per il link che consente di visualizzare il resto nel post.

Potete anche scegliere uno style per la scritta Leggi tutto... da inserire nel css del blog o sostituirla con un'immagine o un pulsante.

Nel mio blog il css per abbellire il Leggi tutto... è il seguente:

.readmore a {
color: #9B0021;
font-weight: bold;
font-size: 10px;
text-decoration: none;
padding: 5px;
}
.readmore a:hover {
color: #F00036;
}

Resto a disposizione per ogni dubbio o chiarimento.

Newsletter by follow.it

Menu "fotografico" per il blog

Qualche mese fa ho ricevuto un'email da Francesca in cui mi chiedeva:

mi piacerebbe aggiungere il widget che hanno alcuni blog di blogger con la lista degli ultimi post sotto forma delle foto dei post stessi... ma non trovo da nessuna parte le istruzioni su come fare...

Nell'email c'era anche il link del blog in cui Francesca aveva visto questo "widget". Ho dato un'occhiata al codice html e ho notato che in realtà non si trattava di un widget, ma l'autrice del blog aveva inserito accuratamente le foto presenti nel suo account Flickr con i link ai vari post con le ricette. Ho suggerito a Francesca questa soluzione il venerdì, ci ha lavorato durante il weekend e lunedì mattina ho letto una sua mail in cui mi ringraziava per la dritta che le avevo dato. Potete vedere voi stessi l'ottimo lavoro che ha realizzato sul suo blog.

Ho pensato allora che forse tante mie lettrici che hanno un blog di cucina potrebbero essere interessate a creare un menu "fotografico". A volte una foto vale più di mille parole ;)

Sicuramente fare un lavoro del genere richiede un po' di pazienza e sopratutto un account Flickr (per chi ancora non ce l'ha, può crearne uno a questo indirizzo, una volta registrati è possibile caricare le proprie foto e i propri video).

Con questo post non spiegherò come utilizzare il servizio, in quanto è abbastanza intuitivo e facile da usare.

Vediamo invece passo passo come realizzare il menu "fotografico".

In Flickr per ogni foto caricata, il sistema genera più copie in diverse misure che sono:

• Quadrate (75x75 px)
• Miniature
• Piccole
• Medie
• Grande
• Originale

A parte il formato "Quadrate" che ha dimensioni fisse di 75x75 px, le dimensione degli altri formati variano a seconda della dimensione della foto originale. Per creare il menu "fotografico" è quindi consigliabile prendere le foto "Quadrate", in questo modo sarà molto più ordinato e gradevole da vedere. Inoltre, essendo le foto di dimensioni abbastanza piccole, non appesantirete troppo il caricamento della pagina.

Sopra ciascuna foto in Flickr compare una serie di icone:

Per copiare il codice dell'immagine che intendiamo inserire nel blog, basta cliccare sull'icona a forma di lente e poi selezionare il formato:

Come potete vedere dall'immagine, basta copiare il codice html contenuto nella textarea:

<a href="http://www.flickr.com/photos/ioleblog/3748856680/" title="Header N° 15 - http://iolecal.blogspot.com di IOLE, su Flickr"><img src="http://farm3.static.flickr.com/2307/3748856680_544871e125_s.jpg" width="75" height="75" alt="Header N° 15 - http://iolecal.blogspot.com" /></a>

e modificare il link, mettendo al posto dell'indirizzo della foto su Flickr (http://www.flickr.com/photos/ioleblog/3748856680/) quello del post della ricetta.

Il codice html del menu così realizzato, può essere poi inserito in un gadget di tipo html/javascript della sidebar come nel blog di Francesca o creare un menu "scorrevole" come quello del blog di Pinella (Per il menu "scorrevole" vi rimando a questo mio post).

Resto a disposizione per ogni dubbio o chiarimento.

Newsletter by follow.it