REDAZIONE

In questo articolo vi mostriamo un metodo per migliorare l'aspetto grafico del blog, come sostituire un'immagine quando si posizione il puntatore sopra di essa. Questa tecnica è chiamata rollover e potete utilizzarla per distinguere le immagini che hanno un collegamento ad un articolo, nei menu formati da immagini oppure per semplici scherzi divertenti, come questo.

Lo script da utilizzare è molto semplice. La base è la stessa che si utilizza per inserire una immagine con link in un post o nelle barre laterali di navigazione.

HTML

 <a href=”http://pagina_da_aprire.it”><img src="http://immagine1.jpg"></a>     

A questa riga di codice aggiungiamo alcuni parametri.

HTML

 <a href=”http://pagina_da_aprire.it”><img src="http:// immagine1.jpg" 
 onmouseover='this.src = "http:// immagine2.jpg";' 
 onmouseout="this.src='http:// immagine1.jpg';"></a>     

Dove:

• a è il tag utilizzato per la creazione dei link;
• href=”http://pagina_da_aprire.it” contiene, all'interno delle virgolette, l’indirizzo della pagina che si apre cliccando sopra l’immagine;
• img è il tag utilizzato per la creazione delle immagini;
• src="http:// immagine1.jpg" contiene, all'interno delle virgolette, l’indirizzo della prima immagine da visualizzare;
• onmouseover='this.src = "http:// immagine2.jpg";' contiene, all’interno delle virgolette, l’indirizzo dell’immagine che si vuole mostrare al passaggio del mouse;
• onmouseout='this.src = "http:// immagine1.jpg";' contiene, all’interno delle virgolette, l’indirizzo della prima immagine che si era voluto mostrare.

Questo è il metodo più semplice per creare un effetto rollover anche se esistono script che possono adattare meglio e rendere più flessibile l’effetto all’interno di un contesto.

In questo articolo vi mostriamo come personalizzare la visualizzazione dei link all’interno dei post. In particolare vogliamo applicare ai link uno sfondo colorato che cambia colore al passaggio del mouse sopra di essi.

La modifica da effettuare è molto semplice. Andate nella sezione “Presentazione > Opzioni avanzate” e cliccate sul link “Modifica modello” del Foglio di stile.

Nella colonna destra della finestra pop up incollate le seguenti righe di codice:

  .content a {
   color: #FFF;
   background: #70ade4;
   padding: 1px 2px 1px 2px;
   margin: 1px 0px 1px 0px;
   }
   
   .content a:hover {
   color: #FFF;
   background: #1973c9;
   }  

Dove:

• color definisce il colore del link, in questo caso bianco (#FFF);
• background definisce il colore di sfondo dei link, in questo caso azzurrino (#70ade4);
• padding definisce quanto spazio che deve esserci tra il testo e i bordi del backgound;
• margin definisce lo spazio che deve esserci tra i bordi del background e gli elementi intorno al link.

Questo tutorial mostra come inserire un’immagine all’interno del blog utilizzando il linguaggio HTML, come modificare le sue dimensioni e come associarle un link.
Le righe di codice che andremo a scrivere potranno essere inserite negli editor HTML presenti nel Pannello di Controllo del vostro blog: l’editor dei post e l’editor della sezione Presentazione > Contenuto delle barre laterali di navigazione che permette di creare nuovi elementi da inserire nelle colonne del vostro blog.

Per editare il codice HTML si dovranno modificare alcune tag che servono a costruire e modificare un’immagine.
Il codice html che permette di visualizzare un’immagine è questo:

<img src=”http://…”> 

src contiene l’indirizzo web dove si trova l’immagine da mostrare.
Se l’immagine che volete inserire non è già online, la potete caricare nel vostro spazio MyBlog da Pannello di Controllo > Gestione File.
Cliccate sulla cartella images e poi sul bottone Sfoglia per selezionare e caricare l’immagine dal vostro PC.
Dopo pochi secondi vedrete l’immagine apparire nell’elenco dei file all’interno della cartella images.
Cliccate con il tasto destro del mouse sul nome del file e selezionate Copia collegamento (in Internet Explorer) o Copia indirizzo (in Firefox). 

In questo modo avete copiato la url della vostra immagine e non vi resta che inserirla all’interno di src del codice HTML.

Come ridimensionare un'immagine 

Per modificare le dimensioni dell’immagine si devono inserire due attributi:
width che definisce in pixel la larghezza che vogliamo attribuire all’immagine e height che definisce l’altezza. I valori da inserire possono essere scelti liberamente.
Ad esempio:

Come associare un link a un'immagine

Per associare un link all’immagine, invece, si deve aggiungere l’elemento:

dove href contiene l’indirizzo della pagina web che si vuole mostrare.

Su Myblog.it, le liste ti permetttono di inserire degli elementi, dei contenuti nelle colonne laterali di navigazione per personalizzare ulteriormente il tuo blog.
Hai a disposizione diverse tiplogie di liste che puoi aggiungere e ordinare a seconda dei tuoi interesssi o delle tue necessità editoriali.

Ecco tutte le liste ad oggi disponibili:
- contatti. Per ogni contatto puoi specificare nome, cognome, sito, flusso RSS, descrizione;
- link ai tuoi blogger amici o agli idirizzi utili. Per ogni link puoi specificare il nome, indirizzo, flusso rss;
- documenti. Ti permettere di far scaricare dei documenti dal tuo blog. I documenti saranno aggiunti nelle colonne di navigazione. Per ogni documento puoi allegare il file (documento) inserire il nome e la descrizione;
- musica. Per inserire i tuo album musicali preferiti.  Per ogni album puoi aggiungere la copertina dell'album, artista, etichetta, anno, commento, link, voto;
- libri. Per mostrare le tue letture più appasionate. Per ogni libro puoi inserire la copertina del libro, titolo, autore, editore, anno, copertina, commento, link, voto;
- film. Per mostrare i tuo film preferiti. Per ogni film preferito puoi inserire la locandina del film e specificare il titolo, studio, attori, realizzatore, anno, il codice Asin, commento, link, voto.