Pubblicato il 11/01/11 - aggiornato il  | 5 commenti :

Come inserire nel blog una textarea trasparente.

Non so se sia più appropriato usare il maschile o il femminile. Nel dubbio opterò per il secondo. La textarea è un tag HTML che permette di generare un box in cui inserire del testo per potere essere copiato più facilmente dai lettori. Viene molto usata nel caso di codici di antipixel o banner che vengono offerti ai navigatori per creare collegamenti al nostro sito.

Coloro che usano Windows Live Writer hanno delle difficoltà a inserire una textarea in un articolo perché questo software della Microsoft non sempre la interpreta correttamente. Fortunatamente non ci sono invece problemi con l'Editor di Blogger anche con la sua versione più datata.

Fino a qualche mese fa, noi utenti di Blogger, per mostrare solo i riassunti degli articoli in Homepage, usavamo una personalizzazione chiamata degli Articoli Sintetici. Adesso con l'avvento del Read More è diventato un sistema largamente obsoleto. Questo metodo si basava tra l'altro sull'inserimento del codice <span id="fullpost"> nel punto esatto in cui si voleva mostrare il post in Homepage.

Sfruttando questo stesso tag è possibile creare un tipo di textarea trasparente che può essere postata anche con WLW. Ecco il codice che può essere utilizzato

<span id="fullpost"><div align="center"><pre style="overflow: auto; width: 420px; height: 180px;"><div align="left"><span >
INSERIRE PURO TESTO O CODICE HTML DI UN POST, DI UNA IMMAGINE, DI UN COLLEGAMENTO
</span></div></pre></div>

Rispetto alla textarea vista nell'articolo linkato, con questo codice si possono inserire nel box anche interi post corredati da collegamenti e immagini. Occorre farlo in Modalità HTML. Forse è il caso di fare un paio di esempi


Questo è un esempio di un semplice testo inserito in una textarea trasparente. In questo caso non occorre altro che incollare il testo nell'apposita posizione. Si possono personalizzare le dimensioni della textarea e le barre di scorrimento si creeranno automaticamente. Tutto il codice va poi incollato in Modalità HTML nell'editor di Blogger o in Origine se si usa WLW.




Questo codice è stato incollato in Modalità HTML ed è formato solo da testo. Nel caso volessimo inserire anche delle immagini o dei collegamenti se ne può acquisire il codice e incollarlo al posto del testo evidenziato di rosso. Per esempio il codice che rappresenta una immagine potrebbe essere questo



<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwl4RaEAz5GZQXUBbxmbFCCMnXcVRDTeSs7Za_v_2TwHDovLp5pWLFon0myv3JZzTu1tka4yax9DmHUCyPkjjJ1P2IOQghbf_tCeiRzhwu1MMqQ6DWazPb1L91c07zHqLnHZ4abquRJv8/" title="penna" alt="icona penna"/>



che incollato insieme a del testo può generare quest'altra textarea




icona penna è l'immagine che ho utilizzato come icona per la personalizzazione dell'aggiunta di una immagine prima di ogni titolo del blog. L'articolo si trova all'indirizzo http://www.ideepercomputeredinternet.com/2011/01/inserire-una-immagine-prima-del-titolo.html





Mi rendo conto che questo strumento può essere utile solo ai lettori più esperti.



5 commenti :

  1. Ciao, se ti può servire ti lascio il mio metodo, lo usiamo spesso nel blog collettivo di cui faccio parte:
    http://linux4netbook.blogspot.com/
    ci serve appunto per incollare codice, visto che facciamo un po' di guide avanzate.

    A noi ci basta scrivere tutto con il tag pre, ovviamente tra "<" e ">" e poi basta modificare il css del tag così:

    pre {
    margin:1em 20px; background: #D7E6E7;
    border: 1px dotted #678987;
    padding: 5px;
    overflow: auto;
    }

    la opzione che interessa è appunto overflow in automatico. Come puoi vedere, andando a toccare il css possiamo perfino cambiare il colore di fondo, è un'opzione molto utile perché altrimenti chi usa firefox vedrebbe uscire fuori dal post tutti i codici con "pre". Mentre con Chromium non c'è bisogno perché fa un accapo automatico.
    Spero ti possa servire ;)

    Ciao!

    RispondiElimina
  2. @Santiago
    Grazie. Come vedi anch'io ho il mio metodo di postare il codice :)

    RispondiElimina
  3. Ciao Ernesto,
    con questo articolo ho risolto il problema dello spazio bianco che rimaneva nella scritta scorrevole del disclaimer tra l'ultimo paragrafo e il primo; alla fine ho inserito il disclaimer proprio in una textarea :)
    Ti chiedo se è possibile cambiare il font del testo nella textarea, perchè tutti gli altri gadget che ho sono in stile Georgia.
    Grazie,
    Giuliana

    RispondiElimina
  4. @Dieta e Dintorni
    Non ho mai provato ma penso si possa fare. Scrivi il testo che vuoi nell'Editor di Blogger o in WLW applicando il tipo di font che ti pare, i colori che vuoi, ecc. Vai su HTML e copia il codice di quello che hai scritto quindi incollalo al posto di
    INSERIRE PURO TESTO O CODICE HTML DI UN POST, DI UNA IMMAGINE, DI UN COLLEGAMENTO quindi incolla il tutto in un gadget HTML/Javascript

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy