Creare un'indice fotografico da inserire in una colonna del blog

L'idea nasce da uno scambio di mail con Carmen (e probabilmente sarà utile anche a Viviana e qualcun altro) e devo dire che a me sembra ottima per un blog ad esempio di cucina: creare un'indice in una colonna laterale che punti alle varie ricette oppure alle varie categorie delle ricette (dolci, primi piatti, e così via...). Ovviamente l'idea è valida anche per qualsiasi altro tipo di contenuto, io ad esempio utilizzo lo stesso sistema per i premi ricevuti (che trovate da qualche parte nel blog).

Per prima cosa si devono pubblicare le immagini in qualche servizio di hosting tipo Skydrive o Imageshack, magari dando a tutte la stessa dimensione (potrebbe essere utile ResizR di cui parlo qui, altrimenti se avete bisogno di altri strumenti migliori fatemelo sapere un commento).

Dopo averle pubblicate, aggiungiamo al blog un elemento di tipo HTML/JavaScript dove incolleremo il seguente codice:

<center>
<br/>
<a href="link del post"><img src="indirizzo dell'immagine"/></a><br/>
<a href="link del post">testo da visualizzare</a>
<br/>
</center>

Cambiando le parti in rosso nel seguente modo:

• link del post: questo è il link da aprire cliccando sull'immagine o sul testo sotto l'immagine
• indirizzo dell'immagine: l'indirizzo dell'immagine da visualizzare
• testo da visualizzare: testo che appare sotto l'immagine

Il link del post lo ottenete cliccando col tasto destro sul titolo del post e scegliendo "Copia indirizzo":

Alternativamente, potete scegliere il link a una categoria dei vostri post, copiandone l'indirizzo come sopra:

In questo modo cliccando sull'immagine verranno visualizzati tutti i post appartenenti a quella categoria. Il codice sopra va incollato tante volte quante sono le voci che volete visualizzare.

Se volete visualizzare solo l'immagine senza il testo, è sufficiente utilizzare solo questa porzione di codice:

<center>
<br/>
<a href="link del post"><img src="indirizzo dell'immagine"/></a><br/>
</center>

E se volete eliminare gli spazi tra un'immagine e l'altra il codice da utilizzare è questo:

<center>
<a href="link del post"><img src="indirizzo dell'immagine"/></a>
</center>

Se le immagini usate sono all'altezza, l'effetto ottenuto è sicuramente molto carino.

Lo stesso effetto di quanto sopra potete ottenerlo scrivendo un post: inserite le immagini, il testo e i link come volete e poi andate in Modifica HTML del post e copiate il codice.

Per qualsiasi aiuto o consiglio, lasciatemi un commento.

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!