Ecco la nuova header e il menu per il mio blog

Come annunciato qualche commento fa da oggi il mio blog avrà una nuova header.

La prima cosa che avrete notato è che l'immagine è cambiata.
Per questa devo ringraziare il mio carissimo amico Amsis per la foto che mi ha inviato qualche giorno fa nonché la sua dolce metà che si prende cura di questi bellissimi fiori! In realtà ne ho ricevuto più di una, quindi per diversi mesi vedrete le sue bellissime foto sul mio blog.

La seconda cosa, che spero avrete notato, è quella serie di iconcine che compare sotto la scritta IOLE, che altro non è che il menu per il mio blog.

Chi mi segue sa benissimo che è da mesi (anche troppi) che ho intenzione di mettere nel blog un menu. Tra tutti i blog che seguo e girovagando su internet ne ho visto di diversi tipi: in flash, in javascript, con il css... ma nessuno in particolare mi ha colpito. Forse perché non mi andava di appesantire il blog con altri script... o forse non mi andava di rimettere mano al template...

Quindi ho deciso di adottare questa soluzione: incorporare le icone del menu nell'immagine di header.

Ed ecco le icone:

Nei prossimi giorni eliminerò alucuni widget dalla sidebar, tra cui la sezione Contatti (quindi email e chat), Invia sms gratis dal mio blog! e Linkami che sono ora disponibili nel menu.

Se qualcuno di voi è interessato a creare un "menu" come il mio, allora vi consilgio di leggere questo tutorial sul tag <map> html.

Suggerimenti e critiche sono ben accetti!

Da un paio di giorni la chat di Google Talk non funziona. Alcuni dei miei lettori mi hanno contattata per chiedermi il perché dell'errore "404 not found"... beh che dire sarà Google che fa i capricci. Per qualsiasi cosa potete contattarmi via email.
Inoltre da domani sarò in ferie per un po' di giorni. Continuerò comunque a leggere le vostre email e a rispondere ai vostri commenti.

Newsletter by follow.it

Come inserire nel proprio blog il motore di ricerca personalizzato di Google

In molti arrivano sul mio blog cercando su Google:

inserimento nel blog motore di ricerca google

o cose simili. Ed ecco quindi che ho deciso di scrivere questo post per spiegarvi come inserire nel proprio blog il motore di ricerca personalizzato di Google.

Innanzitutto andate qui e cliccate sul pulsante Crea un motore di ricerca personalizzato.

Nella pagina che si apre occorre impostare:

• Nome del motore di ricerca: ad esempio Motore di ricerca sul mio blog
• Descrizione del motore di ricerca: ad esempio Cerca sul mio blog
• Lingua del motore di ricerca: una tra le tante disponibili, ad esempio Italiano
• Che cosa desideri cercare: per effettuare ricerche solo sul blog dovete selezionare Solo siti da me selezionati.
• Siti in cui eseguire le ricerche: inserite l'indirizzo del vostro blog
• Versioni: scegliete la Versione standard

Infine cliccate su Ho letto i Termini di servizio e li accetto e poi sul pulsante Successiva.

Nella pagina successiva potrete provare a eseguire delle ricerche con il motore di ricerca personalizzato appena creato e infine cliccate sul pulsante Fine.

Per personalizzare il motore di ricerca nei colori e il layout dei risultati della ricerca cliccate sul link Pannello di controllo e poi su Layout e formattazione che compare sulla sinistra. Scegliete i colori in base al layout del vostro blog e poi cliccate sul pulsante Salva modifiche. Infine per inserire il codice nel vostro blog cliccate sul link Codice sulla sinistra. Copiate il codice e incollatelo in un gadget html/javascript della sidebar e anche nel vostro blog avrete il motore di ricerca personalizzato.

Articoli che potrebbero interessarvi:
Come inserire Google Talk chatbox nel blog
Come inserire Google Translate widget nel blog

Newsletter by follow.it

Come "importare" nuovi fonts su Blogger

Scrivo questo post per rispondere ad una domanda che mi è stata posta prima da Alberto e poi anche da Giugiu':

si possono importare nuovi fonts su blogger?

In Blogger in effetti abbiamo a disposizione soltanto 8 font che possiamo scegliere cliccando sul menu a tendina

Vediamo ora come importare nuovi fonts su Blogger ossia come utilizzare altri fonts oltre agli 8 disponibili.

Innanzitutto dalla vostra bacheca cliccate sul pulsante NUOVO POST e posizionatevi nel tab Scrivi:

e provate a scrivere una frase o una parola, selezionatela e scegliete il carattere tra quelli disponibili; io ad esempio ho scritto Benvenuti sul mio blog! e ho selezionato il font Courier e questo è il risultato:

Benvenuti sul mio blog!

Ora se cliccate sul tab Modifica Html vediamo l'html generato e quindi:

<span style="font-family:courier new;">Benvenuti sul mio blog!</span>

Se a voi interessa un font in particolare, ad esempio Comic vi basta modificare l'html in questo modo:

<span style="font-family:comic sans ms;">Benvenuti sul mio blog!</span>

e il risultato è questo:

Benvenuti sul mio blog!

Come potete vedere ciò che cambia è la font-family. Quindi possiamo scrivere i nostri post anche utilizzando font diversi da quelli messi a disposizione da blogger. Il problema è sapere il nome della font-family del font che ci interessa.

E poi c'è un altro problema: se il font che utilizziamo nel nostro blog non è installato sul computer del lettore, allora quest'ultimo visualizzerà il post con un carattere di default che non è quello che abbiamo scelto noi.

Newsletter by follow.it

Come inserire la propria email nel blog

Come anticipato ieri nel post Come inserire Google Talk chatbox nel blog, eccomi qui oggi a spiegarvi come inserire la propria email nel blog per dare la possibilità ai vostri lettori di contattarvi via e-mail e a segnalarvi alcuni servizi utili per la ricerca e la creazione di immagini appropriate.

Per essere contattati via e-mail dai vostri lettori potete inserire nel vostro blog:

• un link
• un'immagine
• un'animazione flash
  (per questa opzione vi consiglio di leggere questo post!)

Vediamo in dettaglio i diversi casi.

Link

Se volete visualizzare un link tipo questo:

Contattami!!!

vi basta scrivere nel blog questo codice:

<a href="mailto:iolecal@gmail.com>Contattami!!!<a>

ovviamente sostituendo la mia email con la vostra!

Immagine

Se invece volete inserire un'immagine tipo questa:

vi basta scrivere questo codice:

<a href="mailto:iolecal@gmail.com><img src="http://www.iolecal.it/blog/posts/post078/sms.gif" /></a>

Ecco alcuni siti che potrebbero esservi utili per la ricerca di un'immagine carina da mettere nel blog:

• IconLook
• Icon finder
• iconlet
• iconPot

Inoltre vi consiglio questo sito che permette di creare un'immagine con la propria email come questa:

Basta andare sul sito, inserire il proprio username, selezionare uno tra i tanti servizi di posta elettronica disponibili, cliccare sul pulsante Generate e copiare l'url in rosso che appare sotto di essa.

Newsletter by follow.it

Come inserire Google Talk chatbox nel blog

Alcuni dei miei lettori mi hanno chiesto come inserire la chat nel proprio blog. Di servizi di chat in giro ne ho visti diversi ma quello che preferisco è senz'altro Google Talk, perché consente ai visitatori del mio blog di parlare con me solo quando sono online anziché lasciare messaggi sulla chat come accade per cbox, molto diffuso tra i blog.
Vi spiegherò quindi come aggiungere al vostro blog la chatbox di Google Talk come quella presente nel mio:

Innanzitutto per iniziare vi basta avere un account GMail o crearne uno. Poi andate su Google Talk chatbox badge.

Vi apparirà il vostro badge in questo modo:

che potrete personalizzare cliccando su Edit:

Dopo aver scelto il titolo, il vostro nickname e lo stile del badge cliccate sul pulsante Update badge e infine copiate il codice html che trovate in fondo alla pagina e incollatelo in un gadget html/javascript della sidebar del vostro blog. E il gioco è fatto!!!

Una volta inserito il badge nel blog, chiunque potrà contattarvi in modo anonimo. Mi spiego meglio: chiunque mi contatta sa che sta parlando con IOLE ma io non so chi è lui/lei. Una domanda che mi hanno fatto in molti è "non vedi il mio nome o la mia email?". La risposta è NO! E così voi che mi contattate conoscete il mio nick ma non vedete la mia email. Quello che chiedo sempre io ai miei visitatori è "chi sei? come ti chiami?", proprio perché non conosco niente di voi.

Ecco di seguito la finestra della chat che vedo io e quella di un visitatore:

Ovviamente quando non sono online non potete contattarmi via chat, potete però mandarmi un'email all'indirizzo e vi risponderò appena possibile.

Molti di voi mi hanno chiesto anche come inserire nel blog il link, un pulsante o un'immagine per essere contattati... Pubblicherò un post su questo argomento domani!

Ringrazio Linda per avermi fatto notare che lo stato nel badge risulta sempre offline se sul computer non è installato Google Talk.

Articoli che potrebbero interessarvi:
Come inserire il motore di ricerca di Google nel blog
Come inserire Google Translate widget nel blog

Newsletter by follow.it

Buona Pasqua

Un augurio di Buona Pasqua a tutti i miei famigliari e a tutti voi.
Un pensiero e una preghiera per chi dal 6 aprile una famiglia, una casa, una vita non ce l'ha più.

Foto by funadium

Newsletter by follow.it

Come aprire una finestra popup dal blog

Qualche giorno fa Gianpy mi ha chiesto se è possibile aprire una finestra popup da Blogger e visualizzare in essa un'immagine o un testo, cliccando su un pulsante o un link nel blog.

Ad esempio cliccando su questo link si apre un popup con all'interno il contenuto del post racchiuso nell'area con il bordo:

Foto by: Amsis

Vediamo ora il codice javascript da inserire nel template del blog e la sintassi da utilizzare per visualizzare il popup.

Prima della riga </head> dovrete inserire questo codice:

<script>
function openPopup(divId,W,H) {
if(W == undefined || H == undefined) {
W=800;
H=600;
}
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>

Per aprire un popup cliccando su un link dovrete scrivere:

<a onclick="openPopup('id','400','300')">link</a>

dove id rappresenta l'id del div il cui contenuto deve essere visualizzato nel popup mentre i due valori numerici 400 e 300 rappresentano le dimensioni della finestra popup. Se le due dimensioni non vengono specificate di default sono 800x600.

Cos'è l'id di un div e a cosa serve???

Nel mio post, l'html del div con il bordo è il seguente:

<div id="popup" style="border: 3px double rgb(247, 155, 173); margin: 0pt auto; padding: 15px; width: 260px; height: 200px; text-align: center;"><img src="http://farm1.static.flickr.com/167/480208982_838f0facb4_m.jpg" alt="" />
Foto by: <a href="http://www.flickr.com/photos/amsis/480208982/" target="_blank">Amsis</a></div>

quindi il suo id è popup e serve alla funzione openPopup per prendere il codice html presente al suo interno per poi visualizzarlo nel popup.

Quindi basta poi scrivere:

<a onclick="openPopup('popup',300,300);">link</a>

per visualizzare il popup con il contenuto del div.

La funzione openPopup può essere associata all'evento onclick di un link ma anche di un'immagine . In questo caso la sintassi è:

<img src="url" onclick="openPopup('popup',300,300);"/>

Spero di essere stata chiara... per ogni dubbio o chiarimento contattatemi pure o lasciatemi un commento!

Post correlato:
Come aprire i link in una nuova pagina o in una finestra popup

Newsletter by follow.it