Mi è stato chiesto specificatamente di occuparmi di questa personalizzazione che non è poi difficile da effettuare. Illustrerò due procedimenti alternativi per i nuovi modelli realizzati con il Designer Modelli e per i template di prima generazione. Il concetto è come detto di visualizzare una piccola icona prima del titolo dell'articolo. Si può operare nella sezione <body> o nella sezione <head> segnatamente in quella <b:skin>.
Come inserire una immagine prima del post modificando la sezione <body>
Andate su Design > Modifica HTML e salvate il modello completo. Espandete i modelli widget e cercate la riga
<a expr:href='data:post.url'>
Nei nuovi modelli fa parte del blocco di codice che inizia con <h3 class='post-title entry-title'>, mentre nei vecchi modelli il blocco di codice dovrebbe variare. In ogni caso questa riga dovrebbe essere presente in tutti i template. Subito sotto incollate il seguente codice
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwl4RaEAz5GZQXUBbxmbFCCMnXcVRDTeSs7Za_v_2TwHDovLp5pWLFon0myv3JZzTu1tka4yax9DmHUCyPkjjJ1P2IOQghbf_tCeiRzhwu1MMqQ6DWazPb1L91c07zHqLnHZ4abquRJv8/'/>
come mostrato dallo screenshot
Al posto dell'indirizzo della icona che è evidenziato di rosso potete inserire quello della immagine che preferite. Salvate il modello. C'è da considerare che, anche nel caso in cui il vostro template inserisse in automatico delle cornici alle immagini, queste non sarebbero visibili perché il codice inserito è al di fuori dello stile del post. Ecco come appariranno i titoli del blog
Inserire una icona prima del titolo dell'articolo intervenendo nei fogli di stile
Nel caso in cui non siate riusciti a portare a termine la personalizzazione con la prima procedura, si può intervenire con un secondo metodo. Bisogna sempre andare su Design > Modifica HTML e cercare un blocco di codice che crei la classe per il titolo del post. In questa classe dovrebbe esserci il tag h3, e il tag post. Nei nuovi modelli ho trovato questo codice
h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}
mentre nei vecchi template ha una forma simile a questa
.post h3 {
text-align:justify;
font-size: 150%;
font-weight:bold;
}
Inserire due nuove linee di codice di questo tipo
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL3KjmiHWY4wTI9TtZG1QVGN5qLOrRdXyBUC6YcPuvgTZlxMiArRwe0XOlQ1FwgPtm2xm-K7y25Nd0JlF6l9vmoFGz4QBCWbAMFI1zJ9uNhfZpVyEx7YVpYVJsXMVK6y6a7BRVKqXIhfw/) no-repeat 0;
padding-left: 50px;
in modo che il blocco precedente diventi
h3.post-title, .comments h4 {
font: $(post.title.font);
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL3KjmiHWY4wTI9TtZG1QVGN5qLOrRdXyBUC6YcPuvgTZlxMiArRwe0XOlQ1FwgPtm2xm-K7y25Nd0JlF6l9vmoFGz4QBCWbAMFI1zJ9uNhfZpVyEx7YVpYVJsXMVK6y6a7BRVKqXIhfw/) no-repeat 0;
padding-left: 50px;
margin: .75em 0 0;
}
Anche in questo caso si deve sostituire l'URL evidenziato di rosso con quello della nostra immagine caricata su Picasa, Skydrive o altro sevizio di hosting. Salvare il modello. Se adesso visualizzate il blog, i titoli dei post avranno questo aspetto
Nel caso dei vecchi modelli, l'icona si vedrà solo prima del titolo mentre con i nuovi modelli, questa procedura porta a visualizzare l'icona anche nei commenti viso che è presente anche la classe .comments h4.
h3.post-title {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL3KjmiHWY4wTI9TtZG1QVGN5qLOrRdXyBUC6YcPuvgTZlxMiArRwe0XOlQ1FwgPtm2xm-K7y25Nd0JlF6l9vmoFGz4QBCWbAMFI1zJ9uNhfZpVyEx7YVpYVJsXMVK6y6a7BRVKqXIhfw/) no-repeat 0;
padding-left: 50px;
}
come mostrato nello screenshot
Salviamo il modello e l'icona sarà visibile solo prima del titolo
Con questo secondo procedimento è possibile configurare la distanza tra l'immagine e il testo che forma il titolo agendo su padding-left: 50px;. Aumentando il numero i due elementi si allontanano e diminuendolo si avvicinano.
Questa personalizzazione effettuata con il primo procedimento oppure con il secondo è in ogni caso compatibile con quella che permette di centrare il titolo del post.
Con il primo metodo si cerca lo stesso codice del secondo sistema (modelli vecchi) e si incolla la riga text-align:center;. Se si utilizza il secondo metodo o si hanno modelli nuovi è essenziale creare una nuova classe che in questo caso sarà
h3.post-title {
text-align:center;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL3KjmiHWY4wTI9TtZG1QVGN5qLOrRdXyBUC6YcPuvgTZlxMiArRwe0XOlQ1FwgPtm2xm-K7y25Nd0JlF6l9vmoFGz4QBCWbAMFI1zJ9uNhfZpVyEx7YVpYVJsXMVK6y6a7BRVKqXIhfw/) no-repeat 0;
padding-left: 50px;
}
Salvando il modello, i titoli dei post avranno questo aspetto
Avviso importante: Nel caso in cui abbiate optato per il primo metodo e l'icona si visualizzasse solo in homepage e non nei singoli post, significa che è presente una riga di questo tipo
<b:if cond='data:blog.url != data:post.url'> al di sopra di
<a expr:href='data:post.url'>
In questo caso il codice dell'immagine va inserito sopra a entrambe come mostrato in questo ultimo screenshot
vale a dire subito sotto la riga <b:if cond='data:post.url'>.
salve, vorrei segnalarvi un sito web creato con altervista che permette di accedere ai più grandi siti con un click permettendo un notevole risparmio di tempo e inoltre di trovare i film in streaming megavideo solo nei siti che offrono link megavideo veri..il sito si chiama playsearch...grz ciaoo
RispondiEliminaciao,
RispondiEliminavolevo chiederti se dopo aver inserito l'immagine prima del titolo, questa poi viene inserita anche nel relativo feed.
@Davide Morante
RispondiEliminaNaturalmente no. Fa parte del modello; nei feed ci vanno solo gli elementi del post
Ciao, nel caso volessi mettere mettere un'immagine diversa per ogni post?
RispondiEliminaOppure... ancora meglio... come si fa a mettere un'immagine invece del titolo del post o della sezione?
@concorso baol
RispondiEliminaPer questioni di indicizzazione del post, il titolo testuale ci dovrà pur essere. Non ho mai visto siti con immagini al posto dei titoli. Si può sostituire il nome del blog, questo sì
Ok per quanto riguarda il titolo del post... ma si può mettere un'immagine invece del titolo in in widget qualsiasi che sia pure nella sidebar o in un elemento html da posizionare dove voglio?
RispondiEliminaciao ma è possibile inserire l'immagine proprio sopra il titolo? io volevo inserire come una fascia della stessa lunghezza del box del post.
RispondiEliminaIn teoria sì. Inserisci l'immagine con la stessa sintassi mostrata nel post prima di
RispondiElimina<h3 class='post-title entry-title'>
o della riga simile che hai nel tuo modello.
Se vuoi fare le cose ancora più di classe potresti inserire questo codice
<div class='title-img'><img src='URL-IMMAGINE'/></div>
e poi crei una classe di stile in questo modo
#title-img {
margin...
padding...
}
con i parametri che vuoi e la incolli prima della riga che contiene
</b:skin>
ah ok, Grazie mille ci provo anche se non sono certo di concludere qualcosa :P
RispondiEliminabene in un certo modo ci sono riuscito come puoi vedere http://sonyericssongen.blogspot.com/ ed ho dato anche una lunghezza maggiore che rende la fascia come se spuntasse dalla sidebar :p
RispondiElimina@SE-Gen
RispondiEliminaHo visto, non sta male. Hai inserito questa immagine
http://img685.imageshack.us/img685/2583/fascia.png
Se vuoi un consiglio le immagini del template caricale tutte su Picasa per evitare troppe richieste DNS e velocizzare il caricamento della pagina.
grazie dell'ulteriore consiglio, sei grande. Io sono iscritto su flickr, è lo stesso?
RispondiElimina@SE-Gen
RispondiEliminaSiccome le immagini dei post vengono caricate su Picasa, nei limiti del possibile, bisogna fare lo stesso anche con quelle del template per evitare rallentamenti dovuti alla richiesta di troppi indirizzi da servizi diversi.
ah adesso ho capito, grazie mille ancora di tutto ;)
RispondiEliminaa risentirci :)
ciao Ernesto, innanzitutto complimenti per le sempre chiare e utili indicazioni che dai.
RispondiEliminaavrei un quesito.
ho inserito un riquadro come sfondo del post in questo blog:
http://qualcheprova.blogspot.com/
però blogger non mi visualizza la parte alta del riquadro, così ho pensato di inserire una linea a parte, che dovrebbe stare fra la data e il titolo del post. ho provato col secondo metodo che hai descritto ma me la sovrappone al titolo come vedi. provando invece col primo metodo, la posizione è giusta in verticale ma spostata in orizzontale, e non ho gli stili per settare margini e padding. c'è una soluzione?
ti ringrazio molto.
Ciao Ernesto!
RispondiEliminaGrazie ai tuoi suggerimenti sono riuscita a fare delle cose che prima erano impossibili!
La strada è ancora lunga però e credo che ti chiederò diversi aiutini...
Per quanto riguarda questo argomento, ho provato col primo sistema ed effettivamente l'immagine compare prima del titolo, però con la cornice che ovviamente non so come togliere.
In più qualche tempo fa avevo provato a fare la stessa cosa seguendo le indicazioni di un altro blog, ma l'immagine non compariva, si spostava solo il titolo verso destra. Evidentemente devo aver salvato quella prova perchè ora l'immagine che grazie a te ho inserito non rimane subito a sinistra... Sicuramente c'è da togliere qualche codice corrispondente all'immagine che avevo inserito, ma che non si vede... solo che non saprei come trovarlo ed eliminarlo! Help!!
Grazie.
La Fra
ah scusa... il blog interessato è elpaladarfeliz.blogspot.com
RispondiElimina@La Fra
RispondiEliminaNon so a quale dei tuoi tre blog ti riferisca, la prossima volta cerca di essere più precisa. Comunque hai fatto un po' un casino con una immagine su Picasa.
Hai inserito questo link di background
https://picasaweb.google.com/lh/photo/Q4UUQ2Kk9b2WzUtq_oI26vUz7dmelKOsVx-hVthhnek?feat=directlink
di una "cupcake" e invece l'URL era quest'altro
https://lh5.googleusercontent.com/-009VQUuHYI4/TcA4rqYuE-I/AAAAAAAABxw/uE4ZtS0Y9QA/cupcake%252520low%252520definition%252520trasparente.gif
Prova a fare questa modifica e poi fammi sapere. Ciao
Ciao,
RispondiEliminascusa per non averti indicato a quale dei tre blog mi riferivo, ma te l'ho scritto subito dopo... non pensavo fossi una vera scheggia nel rispondere!!
Effettivamente avevo fatto un bel casino con quelle immagini... e stamattina ci ho dato dentro nuovamente!
In pratica dopo mille tentativi, ho messo un'altra immagine (che raffigura lo stesso cupcake, ma in dimensioni più piccole).
Il problema è che c'è un conflitto col titolo.
Inizialmente con le impostazioni che avevo trovato il titolo andava sopra all'immagine. Così agendo per prove ed errori sono riuscita a spostare il titolo più a destra.
Però succede che nei titoli lunghi dei post, che vanno a capo, l'immagine si vede per intero. Nei titoli più corti che stanno su una sola riga, l'immagine si vede a metà...
In un precedente tentativo, l'immagine si vedeva per intero in vicino a tutti i titoli, però i titoli che vanno a capo presentavano una distanza eccessiva tra la prima e la seconda riga...
A questo punto non so più quale valore modificare...
Grazie in anticipo per l'aiuto...