Come creare dei riquadri dentro il post per evidenziare dei contenuti.

I lettori di questo blog si saranno certamente accorti che la grafica non è il mio forte così come tutto quello che concerne l'aspetto estetico del sito. Mi dà molta più soddisfazione concentrarmi sui contenuti piuttosto che cercare di limare il template fino ai limiti del parossismo. Amo molto però sperimentare nuovi modi di proporre i contenuti e nuovi sistemi per renderli più originali.

Facciamo l'esempio pratico di un blog che si occupa di ricette. Che ne direste se l'autore decidesse di evidenziare le più interessanti con una grafica accattivante? inserendo gli ingredienti in un riquadro con il link alla descrizione della ricetta? Una cosa di questo genere per intenderci

Visualizzare i commenti dell'autore del blog dentro un rettangolo colorato.

Avevo già presentato questa personalizzazione diverso tempo fa, esattamente il 3 Novembre 2008. Da allora sono cambiate moltissime cose in Blogger, anche nella sezione commenti, dove sono comparsi gli avatar dei commentatori, quindi quel tutorial non funziona più neppure con i vecchi modelli. Ne presento quindi un altro che mostri i commenti dell'autore del blog all'interno di un rettangolo colorato che funzionerà anche con nuovi modelli. L'ho testato sul template Simple e sul vecchio modello Tekka. Ritengo che possa funzionare con tutti i template ufficiali di Blogger creati con il Designer Modelli, con tutti gli altri della passata generazione e anche con molti altri personalizzati scaricati da internet.

Si deve andare su Design > Modifica HTML, salvare il modello completo, espandere i modelli widget e cercare queste righe

Come aggiungere un riquadro con un sondaggio nella nostra pagina fan su Facebook.

L'abbellimento e l'arricchimento della pagina fan su Facebook rappresenta un modo per rendere il blog sempre più professionale. Dopo aver trattato di come inserire una landing page per invogliare i lettori del blog a iscriversi alla pagina fan e un modulo per contattare gli amministratori del blog, ecco un metodo per inserire un sondaggio. Può servire per conoscere quello che pensano i lettori su un determinato argomento e per offrire un prodotto sempre più in linea con le richieste.

Andate su PollDaddy e create un account gratuito se non lo avete già. Non sto a spiegare come si crea un sondaggio o un survey perché ho già scritto un tutorial su PollDaddy in passato e ho illustrato come incorporare il codice nel blog. E' comunque tutto estremamente intuitivo. Alla fine della realizzazione si clicca su Embed & Link per ricavare il codice.

Tra tutti i metodi di incorporazione proposti scegliete Flash Poll, selezionatelo e copiatelo

Inserire un blocco di testo in un rettangolo colorato con l'HTML.

In questo articolo ho dato dei consigli su come inserire un blocco di testo in un rettangolo sfruttando la funzionalità della Tabella in Windows Live Writer o, in subordine digitando il codice HTML direttamente. Mentre in quest'altro articolo ho parlato della rappresentazione dei colori "true colours" in esadecimali e come utilizzarla. Adesso cerchiamo di unire queste due conoscenze cercando di creare un riquadro all'esterno di un blocco di testo che si vuole evidenziare.

Se si ha WLW si inserisce la tabella con una sola riga ed una sola colonna quindi si passa alla visione HTML. Se invece non si ha si può scrivere in modalità HTML questo codice

<table width="542" align="center" bgcolor="#00ff00" border="0"><tbody>
<tr>
<td width="540" bgcolor="#ffffff">Inserimento del testo del riquadro</td>
</tr>
</tbody></table>

Dove i valori scritti in rosso possono essere modificati

• 542 è la larghezza del riquadro
• center è l'allineamento al centro ma possiamo mettere anche "left", "right", "justify" per sinistra, destra giustificato.
• 540 è la larghezza in pixel che si vuole utilizzare per scrivere il testo, ovviamente questo valore deve essere uguale o inferiore al primo



• bgcolor attributo di table è il colore del riquadro, si può impostare come abbiamo visto in questo post che ho già citato
• bgcolor attributo di td è il colore di sfondo del riquadro e può essere scelto come sopra
• In Inserimento del testo del riquadro si scrive quello che si vuole inserire all'interno

A titolo di esempio ho inserito nel codice precedente i seguenti attributi

<table width="600" align="center" bgcolor="#00ff00" border="0"><tbody>
<tr>
<td width="600" bgcolor="#ffff00">INSERIMENTO DEL TESTO</td>
</tr>
</tbody></table>

I colori sono il verde ed il giallo, decisamente brutti ma semplici, per far capire come fare questa operazione. Ecco il risultato finale

QUESTI TIPI DI RIQUADRI POSSONO ESSERE INSERITI IN ALCUNI POST NEI QUALI SI VUOLE PORRE PARTICOLARE ATTENZIONE SU UNA COSA SPECIFICA. POSSONO' ANCHE ESSERE ASSOCIATI AD UN LINK BASTA METTERE PRIMA DEL CODICE DEL RIQUADRO <a href="indirizzo del collegamento> E </a> ALLA FINE. IN QUESTO CASO HO MESSO UN COLLEGAMENTO AD UN ALTRO MIO BLOG DI VIDEO DAL TITOLO PHOTOS AND VIDEOS. IL TESTO PUO' ESSERE MODIFICATO ANCHE DOPO CHE SI E' INSERITO IL RIQUADRO E AUTOMATICAMENTE LE SUE DIMENSIONI IN ALTEZZA SI ADATTERANNO ALLA LUNGHEZZA DEL TESTO. NON PREOCCUPATEVI TROPPO DELLE DIMENSIONI PERCHE' CON IL MOUSE POSSONO ESSERE VARIATE COME E QUANDO SI VUOLE ANCHE IN UN SECONDO TEMPO.