Pubblicato il 21/09/11e aggiornato il

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

 

Cinghiale in bianco
  • 1 Kg di cinghiale circa
  • ginepro
  • alloro
  • chiodi di garofano
  • olio
  • aglio
  • dado per brodo
  • vino bianco.
Per la ricetta completa leggi qui


Indubbiamente è un modo di proporre i contenuti piuttosto originale. Può anche essere ovviamente usato in molte altre tipologie di blog. Il codice che serve per la creazione di questi riquadri si basa sul tag fieldset che è utilizzato solitamente per la creazione di moduli. Ecco il codice di base

<fieldset style="background: #FFEAE9; border: 4px double #940F04; width: 500px; padding:5px;">
<legend style="color: #003366; font-weight: bold;">TITOLO</legend>
... Incollare l'HTML del contenuto del riquadro ...
</fieldset>

dove possono essere personalizzati i seguenti parametri:

  1. Colore di background del riquadro (#FFEAE9)
  2. Colore e stile del bordo del riquadro (vedi anche il link precedente)
  3. Larghezza del riquadro (500px)
  4. Padding è la distanza tra il riquadro e il suo contenuto (5px)
  5. Titolo da visualizzare in alto nella zona del bordo (Cinghiale in bianco)
  6. Grassetto del titolo (font-weight: bold; )
  7. Colore del titolo (#003366)

Al posto della scritta in blu si può incollare l'HTML di quello che si vuole visualizzare all'interno del riquadro e che può comprendere immagini, video, elenchi, link, tabelle e altro ancora. Ecco un altro esempio di riquadro ottenuto con lo schema del precedente codice e Lorem Ipxum

 

Lorem IpsumLorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vestibulum, augue et vestibulum rhoncus, risus arcu euismod tortor, quis dapibus tortor elit eu sapien. Fusce in mauris eros. In ac augue vitae tellus sollicitudin egestas eget nec augue. Nulla facilisi. Praesent fringilla neque quis nisl fringilla blandit. Nulla sodales arcu in dui sollicitudin facilisis. Maecenas posuere rutrum nisi, non rutrum erat vestibulum sit amet. Cras facilisis magna sodales orci pellentesque vehicula.

Sono sicuro che in molti di voi stanno già pensando a come utilizzare questo codice che va ovviamente incollato in modalità HTML.





34 commenti :

  1. Grazie, per evidenziare dei riquadri all'interno del blog, fino ad ora usavo solo l'opzione per cambiare lo sfondo dei widget che avevi postato tempo fa… Questa opzione grafica mi sembra utilissima...

    RispondiElimina
  2. Mi verrà sicuramente utile. Grazie grande Parsi. :)

    LeNny.

    RispondiElimina
  3. ciao!!!

    vorrei sapere come centrare il riquadro nella colonna del post! ti faccio questa domanda perchè se inserisco il codide html nel mio post mi posiziona il riquadro sulla sinistra...

    RispondiElimina
  4. @FabrizioPinzaglia
    Prova a inserire <center> all'inizio del codice e </center> alla fine

    RispondiElimina
  5. sto inserendo la cornice nel mio blog, grazie è carinissima, ciao e buon fine settimana!

    RispondiElimina
  6. sto mettendo il codice ma ho preferito mettere il titolo dentro il riquadro piuttosto che sulla cornice , ho tolto quindi la dicitura : titolo dal codice, unica cosa mi rimane la parte delle cornice spezzata al centro di poco ma si vede ti lascio il link:
    http://www.semplicementelight.com/2012/07/torta-salata-vegetariana.html
    un'altra cosa è normale che le scritte rimangano con lo sfondo bianco? grazie!

    RispondiElimina
    Risposte
    1. @CaterinaPili
      Il tag fieldset è utile solo se si mette il titolo. Però con un po' di fantasia puoi anche risolvere. Se vuoi inserire un testo formattato in un riquadro senza titolo puoi provare con questo metodo
      http://www.ideepercomputeredinternet.com/2008/10/inserire-un-blocco-di-testo-in-un.html
      Ma ci sono molti altri sistemi. Magari ci faccio un altro post.

      Elimina
    2. grazie vado a vedere subito!

      Elimina
  7. Salve, ho guardato tutto gli articoli ma non sono riuscito a trovare uno di questi che spiegasse se è possibile inserire un javascript proprio nella sezione post, mi spiego meglio, ho letto qui il modo per creare un effetto libro che gira le pagine in modo molto realistico ed avevo pensato di usarlo proprio nella sezione post, cosi venivano visualizzate le pagine dei vari post come fosse un libro. Però non usando un gadget html esterno alla sezione post, mi ripeto proprio nella sezione post. Leggendo quest'articolo forse dovrei creare nella sezione post un riquadro ? Se si mi date una mano per favore . Per correttezza dico che già ho messo la stessa domanda in altra sezione dello stesso sito. Grazie e complimenti per il lavoro svolto. :) Domenico.

    RispondiElimina
    Risposte
    1. @cavaliereerrante
      Puoi provare a usare il codice di questo post
      http://goo.gl/bonnc
      e inserirlo in un articolo in modalità HTML. Non ti assicuro che funzioni ...

      Elimina
    2. Prima cosa ti ringrazio per avermi risposto... precisando che da poco mi sto dando da fare sul blog e quindi scarsa conoscenza... ho copiato il codice html e in modo barbaro l'ho incollato in un nuovo post e non ti dico... si è bloccato il blog e addirittura il cursore del mouse si trasformava in una croce e quindi disastro totale... evidentemente non si può inserire un codice html in un post pensando come fosse un gadget... e poi ho anche un'altra domanda, lo so che qui non è la sezione ma mi puoi indirizzare te alla sezione giusta se non ti spiace, ho messo una barra verticale come divisorio tra sezione post e sidebar ma si sposta quando c'è risoluzione video diversa... come fare per bloccarla li ?? ho provato tutti i comandi si sposta sempre ... se vuoi aiutarmi basta che mi dici dove devo leggere... scusami se sono prolisso... ma vorrei farti vedere il mio blog per farti capire cosa sta venendo ma non so come fare per postartelo... Grazie Ancora. Domenico

      Elimina
    3. @CavaliereErrante
      Il problema della risoluzione non si può risolvere. Bisogna cercare un modello che vada bene con le risoluzioni più usate. Per il widget ti avevo detto che non ero sicuro che funzionasse se messo in un post :(

      Elimina
    4. Ok.... quindi solo ultima curiosità e poi non disturbo più... non va mai messo un codice html nel post per farlo poi funzionare, giusto ???
      O bisogna mettere prima una specie di sezione nel post e poi incollarci dentro il codice ??

      Elimina
  8. @cavaliereerrante
    Un codice HTML/Javascript per un gadget si può provare a vedere se funziona anche in un post incollandolo così com'è ma non sempre la cosa riesce.

    RispondiElimina
    Risposte
    1. Ok ti ringrazio sei gentilissimo e davvero bravo :))) Grazie di cuore e buona domenica.
      Domenico.

      Elimina
  9. Ciao, vorrei complimentarmi per i tuoi utilissimi articoli, ho risolto tante cose. Ero estasiata dalla grafica delle blogger americane, quasi tentata di assumere un grafico, ed invece grazie a te, sto facendo tutto da sola, infinitamente grazie per tutto il lavoro che fai.

    RispondiElimina
  10. ciao, ho trovato questo articolo molto utile e chiaro, grazie!!!
    ho aperto da pochi mesi un blog di ricette e con le tue istruzioni ho potuto inserire la parte di post relativa alla ricetta dentro un un riquadro...
    ora...
    possibile che sia proprio questo a "spaginare" il post se visualizzato su smartphone?
    ho attivato la visualizzazione per cellulari di blogger, ma si vede proprio male!!!!

    RispondiElimina
  11. ho provato a visualizzare dal mio cellulare i primi post, in cui non usavo riquadri (fieldset) e questi sono centrati e ridiemnsionati nello schermo del cellulare. I post più recenti, hanno il riquadro più largo dello schermo e non viene ridimensionato, come invece viene fatto con testo e foto del resto del post...

    altra domanda che esula da questo post, ma magari saprai indirizzarmi ad un post adatto: perchè il modello mobile non appare con i colori-font che ho nella versione desktop (per esempio data, titoli)...

    grazie. Ciao!

    RispondiElimina
    Risposte
    1. Alcune cose vengono riprodotte nella versione mobile e altre no. Se scegli di visualizzare la versione mobile personalizzata vengono riprodotte molte cose ma altre come i colori possono essere quegli standard. Per saperne di più prova a leggere questo post
      http://www.ideepercomputeredinternet.com/2013/10/blogger-versione-mobile-desktop-personalizzare-editor-html.html
      anche se purtroppo non penso possa aiutarti nella fattispecie del problema che hai sollevato.
      @#

      Elimina
    2. grazie intanto per la risposta, andrò a vedere il link.

      spero di trovare un modo, eventualmente diverso dal riquadro, per incorniciare parte del post e comunque far sì che nella versione mobile venga ridimensionato (credo appunto che il problema sia questo).

      grazie ancora. ciao!

      Elimina
  12. ciao, giusto perchè magari può tornare utile ad altri....
    devo verificare meglio la soluzione, ma forse ho trovato come far sì che la parte di testo all'interno del riquadro venga ridimensionata in base allo schermo con la versione mobile: ho tolto la specificazione della larghezza.
    eliminando "width: ...px" il riquadro cambia dimensione a seconda della dimensione dello schermo.
    mi pare quindi di aver risolto il problema.
    anche se questo mi vincola a tenere il riquadro della stessa larghezza del post...

    ciao!

    RispondiElimina
    Risposte
    1. Prova con la larghezza in percentuale tipo width:40%; per avere un riquadro proporzionato con la larghezza dell'area del post
      @#

      Elimina
  13. Ciao Ernesto ottimo post grazie. Una domanda pensi sia possibile aggiungere nel box un tasto di stampa solo per le cose scritte li dentro es. appunto la ricetta? purtroppo per blogger non si riescono a trovare plugin come per wordpress tipo easyrecipe che ti creano il box con la ricetta singola e il tasto stampa, in blogger a parte printfriendly sei quasi vincolato a fare stampare tutto introduzione, commenti, ecc. grazie

    RispondiElimina
    Risposte
    1. Non sono a conoscenza di metodi che permettano di selezionare quello che si stampa su Blogger :(
      @#

      Elimina
    2. Mi hai dato una idea e un sistema per stampare le ricette e solo quelle l'ho trovato
      http://www.ideepercomputeredinternet.com/2015/09/stampare-ricette-blogger-google-sites.html
      @#

      Elimina
  14. Ciao Ernesto, sto provando a contattarti per un aiuto sul blog. Io vorrei questo schema che tu hai descritto e che ho usato, ma adesso volevo mettere un'immagine al posto del TITOLO in modo di farla apparire a metà, e funziona. L'unica cosa è che quando vado ad inserire il testo per descrivere l'immagine, mi va sotto e non di lato come descrizione. Come posso fare?

    RispondiElimina
  15. Dimenticavo, grazie della disponibilità!

    RispondiElimina
    Risposte
    1. Per agevolarti ti posto un codice completo di un test con il titolo accanto alla icona del piatto

      <fieldset style="border-bottom: #191919 1px solid; border-left: #191919 1px solid; padding-bottom: 5px; padding-left: 5px; width: 500px; padding-right: 5px; background: #ffffff; border-top: #191919 1px solid; border-right: #191919 1px solid; padding-top: 5px"><legend style="color: #191919; font-weight: bold"><img border="0" src="http://4.bp.blogspot.com/-hPM2vI14SRA/TnnlxeyyQeI/AAAAAAAAUgU/bffCRB-cxME/s200/cinghiale-maremmana.png" width="50" height="33" /><span style="position:relative;top:-12px; color:#00f;">Cinghiale in bianco</legend> <ul><a style="margin-bottom: 1em; float: right; margin-left: 1em; clear: right" href="http://4.bp.blogspot.com/-hPM2vI14SRA/TnnlxeyyQeI/AAAAAAAAUgU/bffCRB-cxME/s1600/cinghiale-maremmana.png" imageanchor="1"><img border="0" src="http://4.bp.blogspot.com/-hPM2vI14SRA/TnnlxeyyQeI/AAAAAAAAUgU/bffCRB-cxME/s200/cinghiale-maremmana.png" width="200" height="132" /></a> <li>1 Kg di cinghiale circa </li> <li>ginepro </li> <li>alloro </li> <li>chiodi di garofano </li> <li>olio </li> <li>aglio </li> <li>dado per brodo </li> <li>vino bianco. </li> </ul></fieldset>


      Per controllare questo codice incollalo in questo strumento
      http://htmledit.squarefree.com/
      Il colore del titolo è color:#00f; mentre il testo è stato allineato alla immagine con position:relative; e top:-12px;
      Per spostare il titolo in alto si aumenta il valore negativo mentre per spostarlo in basso si diminuisce.
      P.S. Non amo molto essere contattato in privato. Preferisco condividere le mie risposte in modo pubblico per renderle fruibili a tutti i lettori.
      @#

      Elimina
    2. Grazie mille!!! Davvero gentile! Scusi ma non mi ero accorta che potevo domandare direttamente qui sopra... La prossima volta lo farò direttamente qui... Grazie davvero della disponibilità e complimenti per tutto il lavoro! La ringrazio infinitamente =D

      Elimina
  16. Grazie mille, il tuo articolo è chiaro e semplice ma soprattutto molto utile per chi come me è ai primi passi nel mondo dell'HTML. Ho utilizzato il tuo link e modificato alcune caratteristiche. Non riesco a trovare la soluzione però ad una cosa: Vorrei inserire più riquadri uno di fianco all'altro orizzontalemte...ma non in tabella..separati. Non so se mi sono spoegata bene e spero mi possiate aiutare!
    Grazie mille!

    RispondiElimina
    Risposte
    1. Per inserire due riquadri affiancati orizzontalmente bisogna per forza usare una tabella di una riga e due colonne
      http://www.ideepercomputeredinternet.com/2016/04/tabella-html-css.html
      Puoi usare questo semplice codice
      <table>
      <tr>
      <td>C11</td>
      <td>C12</td>
      </tr>
      </table>
      e al posto di C11 e C12 ci metti rispettivamente il codice dei due riquadri che vuoi affiancare
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.