immagin top

13.2.14

Come inserire le immagini dei tutorial in una griglia

13.2.14

Mi è stato chiesto da Marilù Maaga come si possono inserire le immagini dei tutorial così come ho fatto io nella mia pagina TUTORIAL-LIST.



Il sistema utilizzato da me è quello delle tabelle (presto un tutorial - se non video tutorial - sull'argomento), che possono sembrare difficili da realizzare, ma che una volta capito il sistema, non c'è niente di più semplice!



Prima di ogni altra cosa avrete bisogno delle immagini che richiamino i vostri tutorials...
eccone una...

ed eccona un'altra...

Proprio per evitare questo stile a colonna, o di inserirle affiancate, ma averle quasi appiccicate (mi riferisco alle blogger che non hanno dimestichezza con i codici), è possibile affidarsi alle tabelle.
Piccolo promemoria!
Ricordate i tag, ovvero le paroline inserite nelle '<...>', hanno un'apertura ed una chiusura, riconoscibile dalla barretta trasversale subito dopo la prima virgoletta '</...>'.
Se non chiudete bene il tag, sicuramente vi sarà segnalato un errore!
La base del codice è questo:
<table>
<tr>
<td>

</td>
</tr>
</table>
Vediamo un po' cosa significano questi tags:

  • table sta per tabella e racchiude tutto ciò che sta all'interno.
  • tr sta per table row, ovvero la riga nel quale sono contenuti gli elementi.
  • td sta per table data, ossia cella conosciuta meglio come colonna (è così che la chiamerò io) nel quale inserire i dati (scritti o immagini).

Questo giusto per farvi capire in linea di massima come sono strutturate le tabelle, ma in un altro contesto vi spiegherò come utilizzarle al meglio.

Torniamo a noi!
Le immagini che io ho inserito nella mia pagina sono racchiusi in una tabella a due colonne e tante righe, quante me ne servono.

Quando si deve lavorare con i codici, vi consiglio (ma certamente lo sapete già) di utilizzare sempre in modalità HTML del post, e anche di caricare le immagini da qui. Sarà più semplice posizionarle nelle varie colonne.
Ecco il codice per una tabella ad una riga e due colonne:
<table>
<tr>
<td>

</td>

<td>

</td>
</tr>
</table>

Vi basterà cliccare all'interno del tag td, ovvero nello spazio che intercorre fra '<td>' e '</td>' (per facilitarvi ho creato questo spazio) e caricare la vostra immagine.

Una volta caricate le immagini, vi basterà andare in modalità Scrivi, cliccare sulle di esse e dare il comando inserisci link. Così vi sarà più facile aggiungere un collegamento, ma anche a quale immagine lo stiamo facendo :)

Per avere più righe a due colonne, vi basterà duplicare i tag tr con tutto il loro contenuto (meglio se prima di aggiungere le immagini).

PER APPROFONDIRE

  • Questo metodo vale anche per l'inserimento di tabelle all'interno di gadget nella sidebar, come visto qui.
  • Ricorda che puoi sempre creare un post apposito dove ospitare le immagini che usi nella sidebar, quasi fosse una cartella immagini.

16 commenti:

  1. Grazie Simona! Leggo, studio e prima o poi applicherò!! ^_^

    RispondiElimina
  2. Quante cose ho ancora da imparare ...mi sembra di gattonare ancora nel mondo del blog,,,
    per fortuna che ti ho trovata!
    Un grande abbraccio e grazie per essere passata a trovarmi!

    RispondiElimina
  3. Waoooooooo già fatto. Sei splendida.
    Grazieeeee

    RispondiElimina
  4. Sei sempre molto carina.... ottime spiegazioni.

    RispondiElimina
  5. Brava Simona! Ottimo post per iniziare a prendere confidenza con i codici delle tabelle. Ci proverò :-) Io le avevo scoperte tempo fa ed utilizzate in qualche post, ma se non avessi CodePen non riuscirei a scrivere il codice corretto! Per le neofite di codici come me che si mordono le labbra ogni volta che ci mettono mano è davvero uno strumento indispensabile per non morire in mezzo ai tr < " /.
    Buon fine settimana :)
    Cecilia K

    RispondiElimina
  6. Grazie a tutte :D
    @Cecilia K... al limite ora puoi salvare questo codice in un post 'bozza' così da averlo sempre a portata di mano ;)

    RispondiElimina
  7. Caspita un'altra chicca da non perdere!
    Grazzissime!!!

    RispondiElimina
  8. Simona, grazie davvero!
    Sono riuscita a realizzare l'inserimento delle immagini.
    Un bacione!

    RispondiElimina
    Risposte
    1. Grazie Mary, ho visto!!!!!!! e fanno un figurano ihihihih
      Baci!!!

      Elimina
    2. ma che ho scritto? volevo dire figurone XD

      Elimina
  9. Simona, ho provato ma non funziona, almeno a me, sicuramente sbaglio qualcosa, mi puoi aiutare? ti ho scritto un email, qualche giorno fa,..... grazie

    RispondiElimina
    Risposte
    1. ciao Marilù!!
      Ti ho risposto quasi subito, prova a guardre nella cartella dello spam, magari gmail lo ha inserito lì, visto che ci sono dei links...
      Ti ho inviato il codice corretto [effettivamente avevi sbagliato qualcosina ;) ]

      Elimina
  10. Splendido tutorial! Chiarissima come sempre! E arriva a proposito: mi serviva giusto capire come disporre le immagini a griglia per un post che sto preparando.

    RispondiElimina

I tuoi commenti sono un vero toccasana per il mio blog! Grazie per il tuo contributo :*