Sostituire con delle immagini i link "Post più vecchio", "Home", "Post più recente"


image Ieri ho parlato di come togliere questi link in fondo al template di Blogger, esigenza particolare ma che mi è stata chiesta da diverse persone. Oggi invece spiego come personalizzarli con delle immagini, operazione che se ben fatta contribuisce sicuramente a dare un look migliore ai nostri blog.

Come sempre, prima di cominciare, invito a fare il backup del template di Blogger o provare prima le modifiche su un template di prova.

Per prima cosa, cercate delle immagini adatte allo scopo e pubblicatele su un vostro spazio personale, come Skydrive o Imageshack. Vanno benissimo, e fanno un gran bell'effetto se sposano bene il template, anche delle immagini animate (GIF).

Sostituire "Home" con un'immagine

Dalla bacheca, andate in Layout->Modifica HTML del template, selezionate "Espandi i modelli widget" e cercate la seguente porzione di codice (che nel caso di template particolarmente modificati, potrebbe essere leggermente diversa):

<b:if cond='data:blog.homepageUrl != data:blog.url'>
  <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
  <b:else/>
  <b:if cond='data:newerPageUrl'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
  </b:if>
</b:if>

E sostituite la parte evidenziata in rosso con la seguente riga:

<img src='indirizzo immagine' />

Dove "indirizzo immagine" è l'indirizzo dell'immagine che avete scelto di usare per il link Home. Ecco l'effetto di quest'operazione:

 

image

 

Sostituire "Post più recente" con un'immagine

Qui l'operazione è un po' diversa. Blogger usa due diverse etichette: se state visualizzando un singolo post, appare il link "Post più recente", se visualizzate un elenco di post appare il link "Post più recenti", quindi potremo (se vogliamo) utilizzare due diverse immagini per l'operazione.

Cercate questa porzione di codice:

<b:if cond='data:newerPageUrl'>
  <span id='blog-pager-newer-link'>
  <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
  </span>
</b:if>

e sostituela in blocco con questa:

    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img src="indirizzo immagine per i post più recenti" /></a>
      <b:else/>
        <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img src="indirizzo immagine per il post più recente" /></a>
      </b:if>
      </span>
    </b:if>

In questo caso le immagini da utilizzare sono due, ma se volete potete utilizzare anche la stessa in entrambe i punti, specie se state utilizzando una freccia piuttosto che una scritta:

 

image

 

Sostituire "Post più vecchio" con un'immagine

Anche in questo possiamo scegliere se utilizzare due diverse immagini o una sola. Cercate la seguente porzione di codice:

<b:if cond='data:olderPageUrl'>
     <span id='blog-pager-older-link'>
     <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
     </span>
   </b:if>

E sostituela con questa:

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img src='indirizzo immagine per i post più vecchi' /></a>     
      <b:else/>     
        <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img src='indirizzo immagine per il post più vecchio' /></a>
      </b:if>   
      </span>
    </b:if>

Sostituendo gli indirizzi delle immagini dove dovuto (anche qui se volete potete utilizzare sempre la stessa immagine). Ecco alla fine delle nostre modifiche come appariranno i link di navigazione in fondo al template:

 

image

 

Decisamente più accattivanti. Da notare che quando passate sopra col mouse, Blogger spiegherà comunque cosa succederà cliccando:

 

image

 

A questo punto sono curioso di vedere quali risultati otterrà chi si cimenterà in questa modifica.

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!

55 commenti:

Iole ha detto...

Grazie Tenebrae per l'ottima spiegazione,
peccato che a lavoro ho tante cose da fare e a casa non ho internet. Ma appena ho un po' di tempo trovo delle immagini e sostituisco i link.
Grazie ancora per le email!!!
^_^

Anonimo ha detto...

Ciao Tenebrae, sempre utili i tuoi consigli! hai ricevuto la mia mail...per caso ci stai lavorando su...ti prego aiutami perchè sono alquanto preoccupato! saluti a tutti

Tenebrae ha detto...

@profeta: mi dispiace per l'attesa, appena potrò darò un'occhiata alla cosa e ti farò sapere

Mackos-gnu ha detto...

Bella guida, ma ecco una piccola implementazione
http://mackos-gnu.blogspot.com/2008/10/pulsanti-al-posto-dei-link-di-blogger.html
Ottimo lavoro (come sai fare tu)

Anonimo ha detto...

ok, attendo con ansia....intanto mi leggo i tuoi utilissimi post! un saluto

Anonimo ha detto...

è un ottimo suggerimento. Ma volevo chiederti una cosa....una volta fatto il tutto, il caricamento della pagina si appesantisce?
grazie e complimenti per il sito

ZiaBoby ha detto...

sono curiosa di sapere come mai tu non hai inserito delle immagini... solo per non appesantire la pagina?

Tenebrae ha detto...

in questo caso non si appesantisce più di tanto la pagina, in fondo sono immagini piccole e che finiscono pur sempre nella cache del browser... e un plus grafico vale qualche kb...

nel mio caso, qui non faccio comunque uso di molta grafica: è un plus che se fatto bene ha un bell'impatto, però si deve inserire in un contesto, e nel mio blog questo contesto non lo vedo

e sono orientato a un altro tipo di modifiche, di cui presto parlerò anche qui... sto anche valutando l'idea di fare un template ex novo per Creare blog ;)

Staff di Italy-lowcost ha detto...

Mi chiedo se sia possibile sostituire un template senza perdere le modifiche apportate al precedente. In pratica, vorrei modificare il template attuale al quale ho inserito tante modifiche che vorrei potessero essere trasposte direttamente sul nuovo

Quor è ha detto...

Una meraviglia averti scoperto. Tornerò presto a "studiare" da te. Grazie.

Unknown ha detto...

ciao orazio
sono dinuovo qui! ho pubblicato un pdf di ricette, ma nn so se ricordi volevo immettere l'iperlink all'interno, cmq NON CI SONO RIUSCITA sigh!, ho pubblicato tenendo un 'indice fisso senza che riporti alla pagina della ricetta. nel frattempo mica hai scoperto come si fa?
baci

cristina ha detto...

Mi hai insegnato a migliorare il mio blog!
Grazie e seguirò le tue novità!
Cristina

Anonimo ha detto...

Ciao Ten,

Una domanda che c'entra poco col post. Per molti "esperti", la soluzione migliore è Wordpress, rispetto a blogger. Io ho due blog e li uso entrambi. Hanno caratteristiche diverse, destinate ad un pubblico diverso. Anche grazie alle tue spiegazioni, trovo però più "firendly" blogger. Tu quali pensi siano le differenze e, soprattutto, tratti anche wordpress? Le tue spiegazioni sono sempre chiare, risparmiandomi fastidiosi mal di testa:)

- Francesca - ha detto...

Ciao!
Scusami la domanda...ma sono un po' un incompetente del settore!
Mi potresti dire la procedura precisa per estrarre il codice html di un template una volta scaricato il fil zip?
Una volta che salvo il file mi dice che è impossibile visualizzare la pagina XML...
Non so proprio che fare!
Ho postato la domanda qui xchè è il post piu' recente..spero tu possa rispondermi!
Fammi sapere!
GRAZIE!

Anonimo ha detto...

Ciao! che grande questo blog! grazie a te sono riuscita a fare molte cose ke volevo nel mio blog. grazie,grazie, grazie. per una come me che faceva solo "copia e incolla" sono stati grandi risultati. continua così!!!
p.s. ti ho messo nei miei link

Tenebrae ha detto...

@carmen: no, mi dispiace :(

Anonimo ha detto...

ho bisogno di una mano!!!!!
il mio blog è questa
http://ilmondodistoffadisimona.blogspot.com/
come mai gli altri blog non riescono a ricevere gli aggiornamente sul mio blog... come faccio io con il loro... me lo hanno detto in diversi....mi hanno detto di rivolgermi a te....
grazie..... e complimenti... qui si imparano un sacco di cose utili!!!
ciao

elena71 ha detto...

Uh, bello!!

Adesso mi creo delle giffine a forma di zucca per il mio blog e sostituisco le scritte :D

Quor è ha detto...

Peccato non avere il tempo di leggere con attenzione i tuoi post. Sei chiaro e conciso. Altro che i blog di altri in cui sono incappata e che non soltanto non fanno capire un tubo ma, si gonfiano anche come dirigibili! Da quel pò che ho avuto il tempo di leggere, ho seguito i tuoi consigli per il posizionamento degli annunci Ad sense e, a riguardo, vorrei chiederti un consiglio. Come fare se viene pubblicato qualche annuncio che non condividi? Per esempio sul mio blog oggi è apparso un annuncio tipo:" Cerchi donne ecc. ". Poi, mi piacerebbe anche sapere se l'iscrizione a Hit tail comporta dei rischi o se è a pagamento. E, per ultimo giuro!, non ho capito molto bene se per l'iscrizione si può seguire soltanto la procedura indicata da te o bisogna entrare nel sito Hit tail.
Ti ringrazio infinitissimamentissimo.

Tenebrae ha detto...

@elena: non vedo l'ora di vedere i risultati ;)

@magagiò: quello di localizzare gli annunci è un argomento su cui da tempo penso di approfondire, e vista la tua richiesta presto lo farò, quindi rimani nei paraggi... quanto ad hittail, non comporta dei rischi (neanche di rallentamento, lo script è velocissimo) e non paghi niente se ti sei registrata al servizio gratuito

Tenebrae ha detto...

@magagiò: scusami, avevo saltato l'ultima frase.. quando ho effettuato io la registrazione, i passi da seguire erano quelli, chiaramente nel frattempo può essere cambiata qualcosa

Tenebrae ha detto...

@luca: meglio wordpress o blogger? a mio avviso è irrilevante: il blog è fatto dal suo contenuto e dal suo autore, che usi una piattaforma piuttosto che un'altra è lo stesso :)

direi che se parliamo delle versioni "online", Blogger è sicuramente migliore... nella versione "hosted" wordpress offre molte caratteristiche in più già pronte, ma richiede conoscenze più avanzate (mysql, php, pubblicazione su ftp...), Blogger ha dalla sua la facilità d'uso

tempo fa avevo provato movable type, mi sembrava una piattaforma ancora migliore di wordpress, ma ormai da due anni uso solo blogger quindi non so le ultime novità

ma ripeto quello detto all'inizio: più importante l'autore e il contenuto del blog, che tutto il resto... mi sa che prima o poi dedico un post a questa cosa

a presto!

Tenebrae ha detto...

errata corrige: volevo dire nella versione "non hosted" piuttosto che "hosted"... insomma, la versione fai da te ;)

Anonimo ha detto...

sono riuscito a fare le sostituzioni, ma per ottimizzare la cosa vorrei anche centrare le icone che ho inserito. Come si fa?

Tenebrae ha detto...

@forrest: è una modifica un po' più ampia, magari sarà argomento di un futuro post, se sarà richiesto anche da altri

Anonimo ha detto...

ok! grazie, pensavo fosse più semplice...

Notte

Cassonetto ha detto...

Ciao Orazio,
volevo segnalarti che hai dimenticato di dire che arrivati nel HTML bisogna prima di tutto espandere i MODELLI DI WIDGET. Chi vuole fare questa modifica e non ha letto il post precedente diventa matto nel cercare la riga a cui ti riferisci.

La data importante si avvicina. Faccio scrivere " ad ORAZIO"?

Tenebrae ha detto...

@livia: grazie per la segnalazione, sistemerò subito il post, e scusami se ti ho fatta impazzire

Anonimo ha detto...

Ciao Tenebrae!

Sai cosa sarebbe fantastico? Sostituire le scritte orrende: "n. commenti" e "link a questo post" con delle belle icone personalizzate.
Chiedo troppo? ;-)

A presto

Tenebrae ha detto...

@forrest: no, anzi... segno e metto in lista d'attesa :)

[ Anemone ] ha detto...

Ciao Tenebrae!
Grazie a te sono riuscita a inserire dei bei pulsantoni nel mio blog! Grazie mille, utilissimo e ben fatto il tuo blog!!

Anemone di http://anemonekawaii.blogspot.com

Unknown ha detto...

ciao! innanzitutto complimenti per il blog davvero utile!!!
poi veniamo al dunque...volevo sapere se è possibile sostituire "post più vecchio" e "post più recente" con i titoli dei relativi post...ho visto che su wordpress si può fare, ma il codice mi pare diverso da quello di blogger.
grazie in anticipo, ciaooo!

Tenebrae ha detto...

@butterfly: bella richiesta... si teoricamente è possibile, ma dovrei studiare la cosa... me la segno, ma dovrai avere pazienza, ho già una lista lunghissima di post da fare :)

Unknown ha detto...

sì certo immagino! nel frattempo continuerò a scervellarmi pure io...ciao e grazie mille! :)

annacreazioniartigianali ha detto...

Ciao tenebrae!! Non riesco ad inserire l'immagine home mi da sempre questo errore:"
Non è stato possibile analizzare il tuo modello, in quanto non è strutturato correttamente. Assicurati che tutti gli elementi XML presentino il tag di chiusura richiesto.
Messaggio di errore XML: The value of attribute "src" associated with an element type "null" must not contain the '<' character"
Grazie per la tua disponibilità a presto Anna

Anonimo ha detto...

ciao orazio, anch'io ho lo stesso problema di anna... ci saranno moltissime altre richieste più importanti, ma confido nella tua immensa pazienza e disponibilità per avere una risposta... ovviamente senza fretta.. grazie... marco

Tenebrae ha detto...

marco, guarda, nel momento in cui ti scrivo blogger ha problemi ed è refrattario a qualsiasi modifica del template... quindi magari riprova un altro giorno e vedi se ti va... probabilmente ci sono dei lavori dietro le quinte

Andrea Walter ha detto...

Ciao Tenebrae! è un po' che non ci si sentiva! ero giusto alla ricerca della porzione di codice da cambiare per inserire le freccettine e zaaakkk mi appari tu su google! hehe! chissà se un'anima pia ha un link da darmi per scegliere accuratamente la forma delle freccettine e l'icona home..

il mio blog l'ho migliorato tantissimo, specialmente i menu in alto adesso oserei dire che sono perfetti! ciao e a presto!
Andrea

www.andreawalter.blogspot.com

Tenebrae ha detto...

@andrea: ciao, sempre un piacere vederti qui! ho visto il tuo blog, vedo che sei arrivato dove volevi

quanto alle immagini da usare... credimi come grafica sono l'ultima persona a cui rivolgersi :)

Alessia ha detto...

Ciao Orazio, mi ha chiesto dove ho preso i post it blu,ecco,è molto semplice e veloce e senza la necessità di iscriversi!
http://www.imagechef.com/ic/product.jsp?cat=work
grazie per il blog!
alessia

Tenebrae ha detto...

Grazie Alessia, è molto carino!

OrsoBruno ha detto...

Fatto! Molto simpatica come idea! Ho sostituito le scritte con dei bei pulsanti fatti da me e personalizzati per il mio blog...l'unica cosa che non gradisco molto è che a meno che non compaiano tutti e tre i pulsanti, la disposizione nello spazio non è proprio perfetta! Comunque va bene anche così, grazie mille!

http://blogorsobruno.blogspot.com

Circuito Cinema Bologna ha detto...

Sempre ottimi consigli, ho sostituito le immagini link, per il problma dei commenti ho risolto, reinstallando il template, uff ma che fatica, ciao sandro

Tenebrae ha detto...

@sandro: lo so, conosco benissimo lo stress di quando le cose non vanno :)

Vincintosh ha detto...

grazie per la guida!!! davvero utilissima!!! appena ho un po' di tempo la proverò sicuramente...
comunque, ti ho linkato con il bottone che hai affianco... dici di fartelo sapere così ci aggiungi in chi mi linka XD il mio blog è maconair.blogspot.com, un blog sul mondo apple aperto da poco XD

Andreas ha detto...

=))

ambramelly ha detto...

ciao
ho appena esguito questo bel cambiamento sul mio nuovo blog

www.pillole-di-sapere.blogspot.com
è davvero fantastico!!^__^
ho anche messo il tuo limk, se vuoi metti il mio
li troverai su"contatti"
ciaooo e buone vacanze

\\\ ha detto...

Arieccomi..
ho fatto tutte le modifiche facendo molta attenzione ad ogni singolo passaggio.
Il problema è questo: le immagini da me inserite sembrano posizionarsi ai lati dei link originali e non al di sopra.
Ho fatto le stesse modifiche in un altro blog dove invece sembra funzionare alla perfezione.

Sapresti darmi una spiegazione a questo fenomeno? :)

Ti allego i link per farti capire meglio il problema (dei margini).

acidolatte.blogspot.com
acidolatte00.blogspot.com

Unknown ha detto...

Ciao tenebrae innanzitutto grazie per tutti i consigli che applico fedelmente sul mio blog.

Ecco quello che sono riuscito a fare io grazie a te..ciao e complimenti.

http://blooin.blogspot.com/

Spyke ha detto...

ciao tene,
volevo segnalarti che ho inserito l'immagine come spieghi te ma non si apre il link ( si vede solo l'immagine), questa modifica era riuscita benissimo nel vecchio template, solo con una piccola differenza, che adesso ho trasformato il blog in una specie di sito statico ( se vuoi darci un 'occhio ) eliminando come spieghi in un'altro post i link "post piu' recenti" e "post piu' vecchio"
secondo te puo' esserci qualche collegamento che ho eliminato?
grazie e buona serata

Paolo P. ha detto...
Questo commento è stato eliminato dall'autore.
Paolo P. ha detto...

Ciao Orazio, ho eliminato il commento precedente perché innesatto , lavorando con linux su questo codice ci sono riuscito, da windows no! E' perfetto, clicca qui per visitare il mio blog! Grazie. P.S. Aspetto un tuo "aiuto per allargare scribe" ciao e grazie.

Johnny ha detto...

Ciao, nel mio template Revolution Church sono spariti dalla Home Page i link Post più vecchi, che ritornano invece quando si naviga dentro le categorie. Come posso rimediare?

luna margherita ha detto...

grande! ho fatto diverse modifiche al mio blog seguendo i tuoi consigli, sei chiaro ed efficace: complimenti!
ti linko (lunamargherita.com)

pcna ha detto...

ci sono riuscita! grazie per la chiarezza :-)


Prima di lasciare un commento, leggete qui

Posta un commento

Nota. Solo i membri di questo blog possono postare un commento.