ho un tot di anni durante i quali ho fatto taaaaante cose, tipo fare due figli che sono la gioia della mia esistenza. Sono blogger dal 2007, ma dal 2008 lo sono un po' più seriamente... ci ho creduto di più dai.
Volevo fare la stilista, vestire persone, ma oggi mi piace quasi definirmi stilista del web, perchè vesto i blog con abiti su misura appositamente per le bloggers che decidono di collaborare con me, affidandomi i loro tessssori.
Perchè il blog è un nostro tesssssoro, vero?
Seguimi su Pinterest! Tanti pin per ispirare la tua moodboard e la tua creatività!
Seguimi su Pinterest! Tanti pin per ispirare la tua moodboard e la tua creatività!

13.2.14

Come inserire le immagini dei tutorial in una griglia

13.2.14

16 comm
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.
Iscriviti alla mia newsletter per ricevere consigli sul blogging, il design, la pianificazione e pdf gratuiti per gli iscritti alla newsletter ♥
(Ma prima leggi la mia informativa sulla privacy.)
si, iscrivimi!

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

Lasciando un commento dichiari di aver letto la mia Privacy Policy