Pubblicato il 25/01/10 - aggiornato il  | 5 commenti :

Come modificare il colore dei link nelle pagine statiche di Blogger.

Abbiamo già visto che si possa modificare lo stile delle pagine statiche per renderle differenti dall'aspetto degli articoli. Nel post precedente mi ero occupato solo di come togliere la sidebar e di come allargare il main-wrapper, vale a dire l'area utile per inserire i contenuti. Bisognava andare su Layout > Modifica HTML e subito sopra alla riga </head>, incollare il seguente codice

<!-- STILE PAGINE STATICHE INIZIO -->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#sidebar-wrapper{display:none;}
#main-wrapper{width: 100%;}
</style>
</b:if>
<!-- STILE PAGINE STATICHE FINE -->

Si possono inserire ulteriori stili che riguardano altri aspetti della pagina. Per esempio se si cambia il codice in questo modo

<!-- STILE PAGINE STATICHE INIZIO -->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#sidebar-wrapper{display:none;}
#main-wrapper{width: 100%;}
a {
color: #940F04;
}
a:visited {
  color: #FF7700;
}
a:hover {
  color: #003366;
  background-color: #FDBCB7;
}

</style>
</b:if>
<!-- STILE PAGINE STATICHE FINE -->

oltre a nascondere la sidebar e allargare l'area della pagina si sono personalizzati i colori dei link con queste modalità

  1. 940F04 è il colore del link non ancora visitato
  2. FF7700 è il colore del link visitato
  3. 003366 è il colore che assume il link quando viene puntato con il mouse
  4. FDBCB7 è il colore di sfondo che assume il link quando viene puntato con il mouse

Ecco uno screenshot di esempio con i colori inseriti come prova

colori-link-pagine-statiche

Occorre fare un paio di precisazioni

  1. Si possono inserire tutti i colori che vogliamo, è sufficiente conoscere i codici dei colori 
  2. Ho inserito il background-color per i link puntati con il mouse ma si può decidere di eliminarlo o, viceversa di inserirlo anche negli altri casi.
  3. In Homepage, negli articoli, nelle pagine archivio, insomma ovunque, i colori dei link resteranno gli stessi. Cambieranno soltanto nelle pagine statiche.

 



5 commenti :

  1. Parsifal,
    grazie! :)
    Ancora interessanti i suggerimenti, la pagina statica bella personalizzata!
    Capisco tuttavia di non essermi espressa chiaramente chiedendoti dei link ...
    Ci provo: ho messo i link ai *titoli* delle pagine statiche, in home, subito sotto l'header, in orizzontale. Ciò che mi piacerebbe è che quei titoli apparissero, proprio in home, di un colore e formato diverso dagli altri link presenti.
    - O, se sono rompi... non tener conto! :-)
    grazie!
    g

    RispondiElimina
  2. @giovanna
    Allo stato attuale quel widget che si chiama "schede blog" è direttamente gestito da Blogger e non credo si possa intervenire; in seguito può darsi che venga data questa possibilità o che qualcuno riesca a creare questa personalizzazione.
    Ciao

    RispondiElimina
  3. Parsifal,
    grazie, sei gentile.
    Ma sai poi: ho tolto il widget da sotto l'header e l'ho messo sulla sidebar. Non mi convinceva, troppo distanti una dall'altra le scritte, subito sotto ho poi altri link che mi interessano e il tutto appariva disordinato.
    grazie ancora,
    a presto!
    g

    RispondiElimina
  4. Io ho copiato il codice riportato, ma le pagine sono identiche alla home (come impostazione) dove sbaglio?
    c'è solo una riga di htlm che corrisponde "/head"
    Ciao e grazie per il blog, sempre molto utile
    Leo

    RispondiElimina
  5. @leodemonio
    non è detto che sbagli ci può essere una incompatibilità di modello...

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy