Visualizzazione post con etichetta immagini. Mostra tutti i post
Visualizzazione post con etichetta immagini. Mostra tutti i post

11 giugno 2010

29-aggiungere un'immagine alla testata del blog

Una volta, per aggiungere una immagine all'header (=testata) bisognava mettere mano all'html... ora invece Blogger lo permette dal Design>Elementi pagina
Allora:
vai al tuo blog. Clicca Design in alto a destra (fino a qualche tempo fa era Personalizza). Ti trovi nella sottotab ELEMENTI PAGINA. Rivolgiti alla sezione Intestazione (è quella che contiene il titolo del blog, appena sotto NAVBAR). Clicca il link MODIFICA. La finestra che si apre indica:
  1. Titolo blog - già scritto (...spero...)
  2. Descrizione del blog - anche questa casella di immissione dovrebbe essere già compilata)Immagine - ecco, ci siamo.
Qui hai la possibilità di caricare un'immagine
  1. dal computer
  2. dal Web
Poichè l'immagine che io intendo caricare è già sul web (Windows Skydrive), uso la seconda opzione e incollo nella casella di immissione il link dell'immagine hostata (=ospitata nell'hosting).
Per quanto riguarda Posizionamento, scelgo la prima opzione: Dietro titolo e descrizione.
Fai anche tu le tue scelte, poi clicca il SALVA e ancora SALVA e poi VISUALIZZA BLOG.
Fatto!
Attenzione: la mia immagine ha dimensioni1267x193 pixel. L'ho fatta apposta perchè fosse lunga e poco alta. Non è stato semplice... ma questa è un'altra storia.
newbie ;)

07 maggio 2010

24-link su una immagine

E se volessi linkare il mio blog a un piccolo banner?
Prenderò il 5° link per fare ciò usando img e scr e alt.
Mi creo un banner, oppure lo prendo dal web, di misure 88 x 31 (è piccolino, carino)
Lo carico su un servizio di hosting per immagini (Flickr, Picasa, Imageshack, Altervista ...) che mi dia un hot link (cioè il link diretto alla mia immagine hostata). Prelevo l'hot link copiandolo negli appunti o in un file di servizio (usare notepad, un editor di testo semplice).

Questo è il codice di partenza:
Ad esso aggiungerò:
<a href="http://fos-ilaron.blogspot.com/" >la strada, la vita... cta</a><br />

  • alt (visualizza il testo alternativo, descrittivo dell'immagine)
  • img (sta per image, immagine)
  • src (significa source, cioè origine)
  • ci aggiungo anche title perchè questo modello fa le bizze...
  • border (il bordo dell'immagine, e può essere 0 [senza bordo] o 1 [con bordo])
  • height (la larghezza dell'immagine, è utile al browser)
  • width (l'altezza dell'immagine, è utile al browser)
Ecco il codice finale:
Senza addentrarci troppo nel linguaggio HTML, possiamo capire che:
<a href="http://fos-ilaron.blogspot.com/"
<img alt="la strada, la vita... cta" title="
la strada, la vita... cta" border="0" height="31" width="88" src="http://mdwxmw.bay.livefilestore.com/y1p9ugN1SRmnFYUBPFl0yl9Nw9GzxwXJiyFOFHTZe15gtW3eTzvlfwzxG1ovl0lRhiD59OzT5nuPSnge1S0HfU8pA/bot_am_cta1.bmp" /></a>

a href indica il link alla pagina dove andremo.
img indica le proprietà dell'immagine che stiamo per caricare: larghezza, altezza, bordo, titolo, testo alternativo.
src indica il link in cui è ospitata l'immagine che qui vogliamo richiamare, qui va incollato l'hot link di cui ho parlato sopra.
Non spaventarti per la lunghezza di questo link: è windows skydrive che dà link così complicati (altri servizi danno link più brebi e semplici) ma, dovendolo semplicemente incollare, non può complicare la vita...
Il risultato è in sidebar.
newbie ;)