Inserire un’immagine vicino ai titoli dei post su Blogger!


Il sondaggio ha avuto successo e moltissimi hanno espresso il loro voto (224 nel momento in cui scrivo). Sono contento che abbiate partecipato volentieri a questa iniziativa. Contento per me che non devo rovinarmi il cervello per capire a quale argomento dare priorità, contento per voi perchè così avete la possibilità di vedere pubblicati che con maggior probabilità incontrato il vostro gusto.

Fin da subito, “Inserire un’immagine vicino ai titoli dei post” è stato votatissimo (anche se sorpassato all’ultimo momento), ed eccomi qui a parlarne. Ci sono vari modi per farlo, io ne proporrò due.

Una volta fatta la modifica, ecco il risultato che otterrete:

image

Io farò riferimento al template Minima, ma se qualcosa non va con gli altri template basta lasciarmi un commento e integrerò il post (ogni template purtroppo può essere una storia a sè).

Per prima cosa, scegliete l’immagine che volete usare e pubblicatela in rete con un servizio come Skydrive, Imageshack, o Picasa. Per ottenere un effetto migliore consiglio di usarne una non troppo grande e con lo sfondo trasparente.

Metodo 1

Da Layout->Modifica HTML, dopo aver selezionato “Espandi i modelli widget”, cercate il codice che definisce lo stile del titolo di un post. Nel caso del template Minima, è il seguente:

.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}

E aggiungete le parti che ho evidenziato:

.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
  background:url(indirizzo immagine) no-repeat;
  padding:0 0 0 40px; 
}

Cambiando indirizzo immagine con l’indirizzo dell’immagine che avete pubblicato in rete. Nell’ultima riga aggiunta, una volta provato l’effetto nel blog, potrete aumentare o diminuire quel 40 per dare più o meno spazio al titolo. Se il titolo finisce sopra l’immagine, aumentatelo, se è troppo lontano dall’immagine diminuitelo.

A questo punto non resta che salvare il template ed è fatta.

Metodo 2

Questo metodo, rispetto al precedente, ha il vantaggio di essere più universale, quindi se il primo non vi riesce provate con questo. L’inconveniente è che l’immagine si estenderà in altezza anche sopra il titolo del post.

Sempre da Layout->Modifica HTML, selezionate “Espandi i modelli widget” e cercate questa riga di codice:

]]></b:skin>

Subito sopra, incollate questo:

post h3 img {
  border: none;
}

Adesso cercate

<a expr:href='data:post.url'><data:post.title/></a>

E aggiungete la parte in rosso:

<a expr:href='data:post.url'><img src="indirizzo immagine" /><data:post.title/></a>

Sostituendo indirizzo immagine con l’indirizzo dell’immagine che avete pubblicato in rete. Salvate il template, ed ecco fatto.

Se non doveste vedere l’immagine, dopo aver controllato di aver seguito tutti i passi, provate a cercare tutte i punti in cui è presente questo codice:

<data:post.title/>

E prima di ognuno di essi incollate la parte in rosso. Mi raccomando, prima, non sopra.

Sono curioso di vedere le creazioni che avrà ispirato questo post!

Note legali: Hello Kitty non è stata maltrattata durante la creazione dell’esempio visibile nell’immagine. Potete trovarla qui e chiedere direttamente a lei.

Condividi su Facebook, Twitter o Google Buzz:
Condividi su Facebook Condividi su Twitter Pubblica su 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!

34 commenti:

Lana e Fimo ha detto...

Provato...funziona...ci piace...!!

Grazie grazie...senza i tuoi consigli i nostri blog sarebbero trist e vuoti ( se aspettavano la mia creatività informatica...stavano freschi!! a stento so come si usano i comandi ctrl+v e ctrl+z!!)

http://lanaefimo.blogspot.com

elena71 ha detto...

Uhhh bello!!!!

Mi metto subito a fare l'ovetto.

Non nel senso...

Vabbè, ci siamo capiti ;)

amrita ha detto...

no,ma poi ci pensavo...bravo,proprio bravo....pigliami in giro,va,che ce manchi solo te oggi,poi sto fresca!

e per chiarire,mica sei venuto a rispondermi quando ho detto che non riesco a mettere lo sfondo a tutta pagina.mi si ripete l'immagine in uno strano modo.

e comunque il bianconiglio sarà mio,fammi solo ricomprare l'alimentatore del MIO pc,che s'è svampato....:)

stella ha detto...

Blog molto interessante.
Venite a votare il mio?

tytania ha detto...

lo so che chiedo troppo e che sono una rompiballe, ma per caso si può mettere una figurina solo in UN titolo di UN post soltanto?

kemikonti@yahoo.it ha detto...

Ciao!
da quando mi sono iscritta alla tua newsletter sto imparando veramente molte cose interessanti, Grazie!!!
Domanda: come si faccio ad inserire il mionome nelle foto che posto? quale è il programma da utilizzare?
Ti ringrazio in anticipo,
un Saluto
Kemi

cinzietta ha detto...

Troppo bellino questo tutorial.
spero di riuscire con il template che uso io.
farò le mie prove...speriamo bene perchè lo sai quanto sia negata io!

amrita ha detto...

oddio,la scemitaggine abbonda...tu non stavi prendendo in giro me,per il commento scritto e cancellato...ma dicevi tenero al mio marmocchio trizza gatti....no,non se pò....son scusata se ti dico che ho la febbre da giorni e non connetto?

gianpy1988playlist ha detto...

Inserite anche background-position: valore_posizione; valore_posizione può essere left, center o right... In questo modo le immagini si vedono meglio:D grande tenebrae

LUNETTA ha detto...

Ti ringrazio per i tuoi preziosi consigli.Provato e funziona!!!!
grazie
lunetta

Viviana ha detto...

Sei un genio!
Grazie, adesso ho aggiunto una rosellina e grazie anche a tutti i vari post che leggo ho imparato tante cose dei codici html ed ora ho molti meno problemi se devo aggiustare qualche codice che non funziona bene.
Buona serata e buona vita
Viviana

Sbronzi di Riace ha detto...

Ciao, Ten', ti avevo scritto anche in privato...
come faccio a mettere inq uel posto un calendarietto che a ogni post si aggiorni con la data?

Tenebrae ha detto...

contento che il post vi sia piaciuto ;)

@sbronzi: richiesta aggiunta al sondaggio

@amrita: va bene, farò finta di credere a questa della febbre... :)

may26 ha detto...

(^_^) ciao Concittadino (-_^) grazie per questi post sono veramente illuminanti io amo personalizzare il mio blog e i tuoi suggerimenti mi aiutano molto ♫ ciao

Tenebrae ha detto...

@may26: grazie a te may!

O:O ha detto...

Direi che và, come posso fare per togliere il bordino nero, c'è anche nelle bandierine del traduttore, puoi dare un occhio, http://invideoshow.blogspot.com , ciao Alessandro

Jan Kowalski ha detto...

ciao ten, ho inserito il codice (soluzione1) sul mio minima lefty stretch: una piccola fotina da 7 kappa. Vedo spostarsi i titoli di 40px più a destra ma non compare nessuna immagine.
1-pensavo che l'immagine fosse "trasparente", ma niente.
2-potrebbe esserci qualche impostazione che ho fatto magari inconsapevolmente per cui il colore dell'immagine è 0?

mm... non capisco...

solearancio - mcm - webmaster ha detto...

grazie per l'idea ....sto arricchendo il mio blog in modo esponenziale...ed il bello è che sono una novellina del mondo blogger...
cercando in rete ho aggiunto width="60" height="60" dopo l'indirizzo immagine, diminuendo o aumentando i numeri per ingrandire o rimpicciolire l'immagine....funziona!!!!
il mio blog http://solearancio.blogspot.com/
il mio sito http://xoomer.alice.it/collezione soli GRAZIE 1000!!!

ابوتقوى ha detto...

Ciao !
Sono Aboutaqua, vorrei ringraziarti per il bel servizio messo a disposizione di chi ha bisogno come me .
Sono nei primi passi e da parecchi mesi che cerco di realizzare questo mio primo Blog ma sempre c’e qualcosa che va storta, forza per motivi di lingua e apprendimento !
Ti prego di dare un’occhiata a questo mio problema e scrivermi i tuoi suggerimenti in modo semplice e chiaro come lo sai fare solo tu !
Ho cercato di inserire la barra di navigazione orizzontale ma vedi come è venuta male !
Cercato di allontanarla dal bordo un po’ o di metterla al centro o a destra, o di creare un bottone link ad una categoria ma non c’è niente da fare..
Ho un argomento che contiene circa 20 post, e quando ho copiato i 20 indirizzi dei post visualizzati nella barra di navigazione del browser, trovo 20 bottoni oltre le altre link come HOME ecc.. !!
Come faccio ad avere un solo bottone con linguette(categoria e sotto categoria) ? !
Un’altra cosa ho cercato di inserire i numeri delle pagine ma sono venute male. Cosa che è andata storta ?
Grazie mille e che Dio ti benedica
http://aboutaqua.blogspot.com
aboutaqua@yahoo.it

emanuela ha detto...
Questo commento è stato eliminato dall'autore.
Drewes ha detto...

Ciao Orazio, grazie per il tutorial.

Io utilizzo il modello Rounders, che già prevede un'immagine; dovrei sostituire quella che già con una più grande, ma ho dei problemi.
Qual è la procedura corretta?

Grazie.

daniela sognidiperlej12m13 ha detto...

Carissimo Orazio, ho utilizzato il 1° metodo per inserire la gif di fianco al titolo e fin qui tutto bene, funziona, però la data del post si è distanziata tantissimo dal blocco titolo-testo, come risolvere il problema?
Il mio template è un Minina al quale ho già apportato un pò di modifiche, potresti dargli un'occhiata per favore? Grazie per la pazienza.
Daniela www.sognidiperlej12m13.blogspot.com

daniela sognidiperlej12m13 ha detto...

Come non detto, ho risolto il problema: riguardando bene mi sono accorta di aver omesso un punto nella riga : margin.
Buona giornata.

Anty78 ha detto...
Questo commento è stato eliminato dall'autore.
Anty78 ha detto...
Questo commento è stato eliminato dall'autore.
Anty78 ha detto...

Ciao, nel mio blog ho usato il secondo metodo per inserire un'immagine però mi è sorto un problema: dopo il 4° post il titolo del post invece di restare allineato a sinistra si sposta di circa 2cm verso destra. è già successo a qualcuno? cosa posso fare per evitare il problema? ho momentaneamente risolto in questo modo: ho inserito il tag br tra le due parentesi ...href='data: post.url'><data: post.title/
con l'aggiunta di br tutti i titoli tornano allineati a sinistra tranne il 6°, sai il motivo?
ciao e grazie
PS: scusa se ho cancellato gli altri due commenti ma mi sono accorto dopo che il commento aveva accettato il codice html che avevo scritto e quindi non compariva nel commento.

muccachicca ha detto...

ciao ho inserito l'immaginetta vicino al titolo e grazie al tuo tutorial è stato semplicissimo, ma ora ho una domanda da farti: come faccio a levare il bordo che viene in automatico sulle immagini inserite?
magari c'è anche una faq a riguardo ma non riesco a trovarla
grazie muccachicca

Meli ha detto...

Graziee :D

Pixia61 ha detto...

Ciaoo molto utile e bello il tuo blog comlimenti!!! in questo post cè propio quello che cercavo...sono una novellina blogger...di codici non ci capisco nulla ma vedessi come mi viene bene il copia-incolla!! :D ...se ti va fai una capatina nel mio blog:http://pixiablog.blogspot.com/ ...così puoi darmi dei consigli/se puoi e se vuoi )

Baciotti by Pixia!! :)

p.s. Ora ti seguo anch'io!!!

animalia ha detto...

Ciao Ten!
Mi sono cimentata con questa operazione in un blog di prova,della serie: mi piace cominciare con le cose complicate.. Sto usando il modello Picture Window per i miei esperimenti, ma salvo un momento in cui ho visto comparire la mia immagine non a fianco del titolo del post, ma in mezzo al nulla, non c'è stato verso..

animalia ha detto...

Eh eh.. come non detto. Dopo un intero pomeriggio di infruttuosi tentativi.. SI PUO' FAREEEE...! :D

Kia ha detto...

Grazie ottimo tutorial!sei davvero precisissimo!^__^Braavoo!

Joy ha detto...

Buona sera, Sig. Tenebrae.
Ascolti, e per inserire un'icona accanto ai titoli dei gadgets nella sidebar ("Ultimi commenti", "Preferiti", "Categorie"...). Vorrei un'icona accanto ad ogni titolo, come in tanti siti ho visto.
Dove s'inserisce il codice e quale codice? Non sono un esperto di HTML, sto imparicchiando le prime cose per forza di cose ora, lavorando al mio blog. Grazie.
Joy

Naomi Angelica Vibrati ha detto...

Grazie Mille per il post :)

Visitate il Mio blog please: http://naomivibrati.blogspot.it/


Prima di lasciare un commento, leggete qui

Posta un commento