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
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:
- Colore di background del riquadro (#FFEAE9)
- Colore e stile del bordo del riquadro (vedi anche il link precedente)
- Larghezza del riquadro (500px)
- Padding è la distanza tra il riquadro e il suo contenuto (5px)
- Titolo da visualizzare in alto nella zona del bordo (Cinghiale in bianco)
- Grassetto del titolo (font-weight: bold; )
- 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
Sono sicuro che in molti di voi stanno già pensando a come utilizzare questo codice che va ovviamente incollato in modalità HTML.
mi serviva! Grazie
RispondiEliminaGrazie, 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...
RispondiEliminaMi verrà sicuramente utile. Grazie grande Parsi. :)
RispondiEliminaLeNny.
utilissimo grazie!!! ^_^
RispondiEliminaUtilissimo...grazieee! :-)
RispondiEliminaciao!!!
RispondiEliminavorrei 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...
@FabrizioPinzaglia
RispondiEliminaProva a inserire <center> all'inizio del codice e </center> alla fine
@CaterinaPili
RispondiEliminaIl 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.
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@cavaliereerrante
EliminaPuoi 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 ...
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@CavaliereErrante
EliminaIl 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 :(
Ok.... quindi solo ultima curiosità e poi non disturbo più... non va mai messo un codice html nel post per farlo poi funzionare, giusto ???
EliminaO bisogna mettere prima una specie di sezione nel post e poi incollarci dentro il codice ??
@cavaliereerrante
RispondiEliminaUn 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.
Ok ti ringrazio sei gentilissimo e davvero bravo :))) Grazie di cuore e buona domenica.
EliminaDomenico.
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.
RispondiEliminaciao, ho trovato questo articolo molto utile e chiaro, grazie!!!
RispondiEliminaho 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!!!!
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...
RispondiEliminaaltra 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!
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
Eliminahttp://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.
@#
grazie intanto per la risposta, andrò a vedere il link.
Eliminaspero 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!
ciao, giusto perchè magari può tornare utile ad altri....
RispondiEliminadevo 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!
Prova con la larghezza in percentuale tipo width:40%; per avere un riquadro proporzionato con la larghezza dell'area del post
Elimina@#
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
RispondiEliminaNon sono a conoscenza di metodi che permettano di selezionare quello che si stampa su Blogger :(
Elimina@#
Mi hai dato una idea e un sistema per stampare le ricette e solo quelle l'ho trovato
Eliminahttp://www.ideepercomputeredinternet.com/2015/09/stampare-ricette-blogger-google-sites.html
@#
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?
RispondiEliminaDimenticavo, grazie della disponibilità!
RispondiEliminaPer agevolarti ti posto un codice completo di un test con il titolo accanto alla icona del piatto
Elimina<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.
@#
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
EliminaGrazie 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!
RispondiEliminaGrazie mille!
Per inserire due riquadri affiancati orizzontalmente bisogna per forza usare una tabella di una riga e due colonne
Eliminahttp://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
@#