Se nel vostro blog avete un link al mio blog o il mio antipixel, comunicatemelo lasciando un commento in questo post. Se non siete ancora nella lista... non preoccupatevi sarete aggiunti al più presto!

Per linkare il mio blog nel vostro potete copiare questo codice html:

antipixel:

link: Iole

Ed ecco l'elenco dei blog che mi linkano che compare anche nella sidebar nella sezione Link preferiti.

Amsis - fcontacts

Ale e Solidea - Vampiretta - vitaIE - Fabio Carrozzi

Roni - Rossella - Capricci di Natura - Associazione Logos

Creareblog - Il blog di Den - Guidami - Amici animali

Telefatti - Federica - Ola Giò - Favoloso25

Fumo? No, grazie - Bud Terence - ABC Hobby - Salute33

Vacanze in Albania - Giugiù - Italy lowcost - Rita Charbonnier

I dolci di Pinella - ec.log - Angolo film - Flying car

Hobby di Lety - D-chan - Edo rulez - Spike blog

Pon Brindisi - Citazioni di Luca - klick-blog - Train of thought

Sauroweb - Edilizia e energia - Siciliani emigranti - Daniela

Germana - Betty - Jajo - Solema

Cliccandoci - Jenga - Altrodove Blog - Dino

Max - docpap - Lorenzo - Sara

Ricette blog - gturs - sempliceMente - due Penny

Punti di vista - Southern Spirit - Azabel - nicole c

Nurix - Manu - furfecchia - Note di cioccolato

Calliope - Agenda di Nico - Idea per blog - benzene4ever

Lella - aestene - Milla - Simone

Francesca - Caty - Gramarizia - Africanews.it

Chino - Kemi - Star Tek - Ornella

Donna Irene

21 commenti

Come rendere trasparente la navbar del blog

In ciascun blog su Blogger, è presente nella parte superiore la navbar.
I colori disponibili finora (blu, marrone chiaro, nero e argento) non sempre si adattano a tutti i template.

Tra i colori disponibili, io avevo scelto argento, che proprio non si abbinava al colore di sfondo del mio blog. Oggi ho scoperto che è possibile rendere la navbar trasparente, ed ecco il risultato:

Per renderla trasparente, basta andare in Blogger - Layout - Elementi pagina e cliccare sul link Modifica della navbar.

scegliere poi uno dei due nuovi colori, Chiaro trasparente o Scuro trasparente, in base ai colori del vostro blog:

e salvare! Facile no?
Resto a disposizione per ogni dubbio o chiarimento.

25 commenti

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 bog su Blogger che su altre piattaforme.

Innanzitutto la sintassi di un link è la seguente:

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:

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:

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:

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.

15 commenti

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 tmeplate, 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://lh4.ggpht.com/_fyUYhNUOXMw/Sg2XCP2OJaI/AAAAAAAAATo/vW0r9tXrpzU/printer.gif) no-repeat;
padding-left: 20px;
margin-right: 10px;
}

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

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.

32 commenti

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é tantomeno 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!

Trovate la riga di codice

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.