Come inserire l'effetto tastiera nei post di Blogger.

Come mostrare i caratteri sotto forma di caratteri della tastiera su Blogger.

Per indicare una azione da compiere sulla tastiera si devono evidenziare i tasti da digitare uno dopo l'altro o simultaneamente. Il lettore rischia di essere fuorviato perché non è immediato associare un carattere a un tasto. Può quindi essere utile presentare le singole lettere inserite in tasti virtuali.

Il codice da usare è molto semplice, può essere personalizzato in funzione dei colori del nostro layout e può essere usato in un singolo articolo oppure inserito nel modello per poi poterlo applicare in modo più immediato in tutti i post o in tutte le pagine statiche

COME INSERIRE IL CODICE DELLA TASTIERA NEL MODELLO DI BLOGGER

Dopo aver salvato il template per ragioni di sicurezza si va su Modello > Modifica HTML > Procedi e si cerca la riga ]]></b:skin> . Subito sopra si incolla questo codice

tst {
border:1px solid #ccc;
font-size:1.2em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #bbb, 0 2px 0 3px #333;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
margin:2px 3px;
padding:1px 5px;
}

dove i codici dei colori e altri parametri possono essere personalizzati. Si salva il modello.

COME INSERIRE IL CODICE DELLA TASTIERA NEL SINGOLO POST

Se vogliamo utilizzare questa personalizzazione in un solo articolo o in una sola pagina statica, dobbiamo aprirli con l'Editor di Blogger e passare da Scrivi a HTML, pulsanti posti in alto a sinistra, quindi va incollato in tale modalità HTML il codice seguente

<style type="text/css">
tst {
border:1px solid #ccc;
font-size:1.2em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #bbb, 0 2px 0 3px #333;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
margin:2px 3px;
padding:1px 5px;
}
</style>

dove possono essere modificati i parametri come prima.

COME PERSONALIZZARE L'ASPETTO DI UN TASTO

In entrambi i casi per mostrare i tasti va inserito sempre in Modalità HTML un codice come questo

<tst>A</tst> - <tst>B</tst> - <tst>C</tst>

Verrà fuori una cosa di questo genere

A - B - C

Questo metodo può essere utile per rendere più reader-friendly il nostro post. Come ulteriore esempio ecco come si visualizzerebbe in modo molto più funzionale questo codice

Per aprire il sorgente pagina di un sito web bisogna usare i tasti <tst>Ctrl</tst> + <tst>U</tst> mentre per cercare una parola bisogna pigiare su <tst>F3</tst> .

qualora venisse incollato in Modalità HTML

Per aprire il sorgente pagina di un sito web bisogna usare i tasti Ctrl + U mentre per cercare una parola bisogna pigiare su F3 .

Un hack carino, divertente, utile e pure molto semplice. Gli arrotondamenti dei tasti non saranno come al solito visibili con Internet Explorer ma questo è persino inutile sottolinearlo.