giovedì 19 aprile 2012

Icone di navigazione tra i post di un blog

Aprendo un post di Blogger, sotto la sezione dei commenti possiamo notare tre voci o link seguenti: Post più recente, Home page e Post più vecchio. Il loro significato lo possiamo comprendere facilmente. Per abbellire e rendere più facile il passaggio tra un post all'altro di un blog possiamo introdurre le pagine di navigazione che però non sempre riesce nei nuovi modelli.
Vediamo come possiamo sostituire queste voci (Post più recente ecc......) con delle immagini. 

Per prima cosa dovremmo procurarci delle icone. Sul Web troveremo sicuramente siti dove trovarle come Iconza e Iconfinder ma ce ne sono anche altri basta fare delle ricerche sul Web. Una volta trovato le icone di nostro interesse salviamole sul nostro pc. Ora, carichiamole su un Hosting tipo, Picasa, ImageShack o SkyDrive ma ce ne sono anche altri. Cliccando su di esse copiamo gli URL diretti di ciascuna immagine dalla barra del Browser. Ora andiamo su Design modifica Html e salviamo il nostro modello per eventuali errori che potrebbero compromettere il nostro blog. A questo punto espandere i modelli widget e cerchiamo questo codice:

<b:includable id='nextprev'>

cancelliamolo fino a:
 
</b:includable>

e inseriamo questo:

<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>
<img src='URL FRECCIA SINISTRA'/></a>
</b:if>
<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>
<img src='URL FRECCIA DESTRA'/></a>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='URL HOME PAGE'/></a>
</div>
<div class='clear'/>
</b:includable>

Adesso cerchiamo questa riga:

]]></b:skin>

e immediatamente sopra incollate queste nuove classi di stile

#blog-pager-older-link {
float: right;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager {
text-align: center;
}
Salvate il template. Ecco come apparirà la parte finale di ciascun blog.

                    


Ciao alla prossima







Nessun commento:

Posta un commento

300 Euro Bonus di Benvenuto!