Inserire formule matematiche nel vostro blog

Mille grazie a codecogs!

Vi e' mai capitato di voler inserire formule matematiche all'interno di un vostro post? A me si' e spesso ho anche rinunciato per mancanza di un mezzo comodo che mi permettesse di farlo.
Il metodo classico per inserire una formula e', infatti, ricorrere ad una immagine, soluzione che ha molti limiti perche' si perde tempo in fase di caricamento e se ne perde ancora di piu' nel caso di modifica.


Per fortuna c'e' una soluzione migliore: il sito www.codecogs.com mette a disposizione gratuitamente un servizio davvero utile che permette a chiunque di ottenere in brevissimo tempo ottimi risultati!
Nel caso in cui abbiate un minimo di dimestichezza con LaTeX, lo strumento principe per la redazione di testi scientifici, vi troverete veramente a vostro agio!

Come fare?
Andate sull'editor online di codecogs (mostrato in Figura 1)

Figura 1

L'editor e' diviso dall'alto al basso in 4 parti:

1. Un'interfaccia che permette a chiunque di inserire simboli matematici in maniera immediata
2. un'area di testo che mostra l'input dell'utente convertito in LaTeX
3. un'immagine che mostra quello che sara' il risultato finale
4. il codice html da copiare ed inserire nel vostro post quando sarete soddisfatti del risultato

Adesso sta a voi impratichirvi con l'interfaccia grafica per ottenere il risultato migliore e inserirlo nei vostri post.

Nel caso si desiderasse modificare il risultato ottenuto si potra' operare in due modi:

1. tornare sull'editor online e copiare il contenuto dell'attributo title dell'immagine nell'area di testo.
2. per chi e' un po' piu' esperto, modificare il codice html che avete copiato. In particolare sara' sufficiente modificare la stringa dopo il punto interrogativo in src="http://latex.codecogs.com/gif.latex?..."

Il massimo della vita sarebbe avere una funzionalita' del genere integrata in blogger. Incrociamo le dita affinche' cio', prima o poi, avvenga.

Come aggiungere un link "Continua..." ad un articolo

Vi sara' sicuramente capitato di vedere su vari siti o blog che nella pagina iniziale gli articoli sono visualizzati solo parzialmente e per accedere all'articolo completo dovete cliccare un link del tipo "Read more ...", "Full text ...", "Continua ...", "Leggi l'articolo completo ...", o simili.

Implementare una simile caratteristica per blogspot e' molto piu' semplice di quel che sembra.

Seguite i seguenti passi

1. Entrate nella bacheca di blogger
2. Cliccate su "Layout"
3. Cliccate su "Modifica HTML"
4. Cliccate su "Scarica modello completo"
5. Il browser vi chiedera' di salvare un file XML da qualche parte sul vostro pc
6. Prendete quel file e fatene una copia (utile in caso qualcosa dovesse andare storto)
7. Aprite la copia del file con un editor di testo (blocco note, note pad o quello che vi pare. Io uso kate)
8. Cercate il seguente testo: <p><data:post.body/></p>
9. Sostituitelo con il seguente blocco di codice:
   

   <b:if cond='data:blog.pageType == "item"'>
   <style>.fullpost{display:inline;}</style>
   <p><data:post.body/></p>
   <b:else/>
   <style>.fullpost{display:none;}</style>
   <p><data:post.body/></p>
   <b:if cond='data:blog.pageType != "item"'>
   <br />
   <b><a expr:href='data:post.url'>Leggi l'articolo completo</a></b>
   </b:if>
   </b:if>

10. Salvate il file e caricatelo sul sito (dove precedentemente lo avevate scaricato)
11. Nella pagina web di gestione cliccate "Impostazioni"
12. Cliccate formattazione
13. Scrivete nel campo "Modello post" il seguente testo:
    Introduzione

<span class="fulltext">
Resto dell'articolo
</span>
14. Cliccate su "Salva impostazioni"
    

Fatto questo dovreste essere a posto

Il prossimo post che creerete vi presentera' il testo di esempio appena inserito.
Al posto di "Introduzione" scrivete il testo che vorrete si veda nella pagina introduttiva, al posto di "Resto dell'articolo" la parte rimanente.

Se qualcosa dovesse andar male ricaricate il file originale, di cui avete fatto una copia al punto 6)

Personalizzazione blog: aggiungere un vostro foglio di stile css

Se volete aggiungere ad un blog di blogspot un vostro foglio di stile CSS (Cascading Style Sheet) personalizzato avete due alternative.

1. copiare il codice nella sezione <head> del template HTML
2. linkarlo aggiungendo una riga di codice, sempre nella sezione <head> del template, simile a questa:

   <link rel="STYLESHEET" href="http://.../style.css" type="text/css"/>

Il vantaggio del secondo approccio e' che potrete condividere lo stesso stile in siti diversi senza dover ogni volta eseguire le modifiche su ciascuno di essi.

Personalizzazione blog: modificare caratteri e colori

Espando quanto gia' detto a proposito della personalizzazione di un blog su blogspot
Ammesso che vi intendiate di HTML, almeno quanto basta per sopravvivere, provero' a rendere comprensibile come modificare a vostro piacimento un template su blogspot.
Alla fine, ma solo alla fine ;-), vi renderete conto che non e' cosi' difficile.

Sia ben chiaro che quanto sto per dirvi non l'ho letto da nessuna parte ed e' tutto frutto di esperienza personale, quindi fidatevi ma prima di fare qualsiasi modificate fate sempre un backup del vostro template!

Piuttosto che servirvi su di un piatto d'argento le modifiche da fare per ottenere un certo risultato (ad esempio avere un blog a tre colonne), credo sia piu' utile insegnarvi a capire come modificare il template per ottenere il risultato che volete voi.

In sostanza mi auguro percorriate i miei passi, ma evitando di sbagliare strada mille volte come e' successo a me! Siccome volevo capire e realizzare qualcosa che mi fosse realmente cucito addosso, ho cominciato dalla base: il template minima lefty. Questo e' uno dei piu' semplici template che blogspot mette a disposizione: e' uguale a quello di base solo che la sidebar invece che essere a destra e' a sinistra.
La prima cosa che ho notato e' che all'inizio sono dichiarate alcune variabili relativi ai colori e ai caratteri del blog. Ecco come gestirli al meglio.

Personalizzazione di caratteri e colori
Analizzando il codice HTML di partenza di "minima lefty" (ad essere precisi sarebbe codice XML), ho notato che inizialmente vengono dichiarate delle variabili, che non sono altro che quelle modificabili nella finestra di selezione dei colori e dei caratteri del vostro blog.
Le variabili potete vederle nell'immagine qui a sinistra.
Adesso possiamo metterci le variabili che vogliamo e gestirle come piu' ci pare!
Non ci credete? Andate su "Modifica HTML" e aggiungete all'inizio, tra le variabili una vostra nuova variabile, come mostra il testo evidenziato nella figura.

Molto bene! Salvate e andate su "Caratteri e colori". Sorpresa! Il colore Prova e' stato aggiunto a quelli che potete modificare :) come si vede nella seguente immagine:
Adesso possiamo utilizzare nel codice la variabile provacolor dove piu' ci piace mettendogli davanti il simbolo $ (ad es. $provacolor).

Personalizzazione blog

Mamma mia quanto tempo ci vuole per ottenere qualcosa di soddisfacente!

Per evitarvi di perdere tutto il tempo che ho perso io vi do qualche dritta!
Alla fine le cose da fare sono semplicissime, dopo averle fatte una prima volta!

1) Nuvola dei tag
Mi e' sempre piaciuta un sacco la cosiddetta' nuvola dei tag, che mostra le etichette del blog con caratteri di dimensioni diverse in proporzione alla loro ricorrenza nel blog.
Trovate tutte le informazioni che volete a questa pagina

2) Inserire sezione "Ultimi commenti"
Quando ho scoperto come fare mi e' venuto un coccolone: la facilita' e' estrema, basta sapere come fare!
Ogni blog di blogspot ha delle informazioni reperibili sotto forma di feed. I commenti sono una di queste e quelli di questo sito si possono ottenere all'indirizzo http://alepisa.blogspot.com/feeds/comments/default.
Ovviamente quelli di un altro blog di blogspot si ottengono cambiando la parte in grassetto :)
Scoperto questo, per inserire una sezione che visualizzi gli ultimi commenti, cio' che mi serviva, ho aggiunto un elemento "feed" alla pagina (vedi immagine) e come indirizzo gli ho messo quello che vi dicevo (http://alepisa.blogspot.com/feeds/comments/default).



3) Inserire una terza colonna
Qui il discorso e' un po' piu' complicato e andrebbe approfondito.
Quando andate nella sezione modifica HTML del vostro blog quello che vi trovate e' un codice XML che e' diviso grosso modo in due sezioni.
Nella prima parte c'e' lo stile della pagina (colori, dimensioni, caratteri, margini e sfondi).
Nella seconda, da dove trovate il tag HTML sono posizionati gli elementi della pagina, contenuti in blocchi <div>

Per adesso accontentatevi di questo. Prometto che tornero' per darvi una mano.