Personalizzare la scritta "leggi tutto" per renderla più evidente

L'attuale editor di blogger permette di inserire gli articoli sintetici senza dover intervenire nel codice html, basta cliccare sul foglio interrotto per scegliere l'esatta interlinea in cui il post sarà diviso tra anteprima visibile in home page e testo integrale visibile cliccando sul titolo o sul link "leggi tutto" che può essere personalizzato a piacere intervenendo direttamente nella sezione "post su blog" della videata design.

E' possibile intervenire sul codice html per modificare ulteriormente il link "leggi tutto" per attribuire uno sfondo e un colore particolari al link e modificarli con il passaggio del mouse.

Ecco come fare:
Cercate nel codice html del blog (ovviametne dopo avere spuntato la visualizzazione dei widget) la seguente striscia



]]></b:skin>

incollare immediatamente sopra il seguente codice

.jump-link a {
background: #FFFFCC;
padding: 3px;
color: #0000FF;
}
.jump-link a:hover {
background: #F2984C;
padding: 3px;
color: #000000;
}

La prima parte del codice è quella che identifica lo sfondo e il colore del  link in visualizzazione normale, la seconda parte individua i colori che verranno mostrati con il passaggio del mouse sul link.
Un contrasto adeguato aiuterà quindi ad attirare l'attenzione sulla possibilità di leggere tutto l'articolo.

I colori potrete sceglierli direttamente voi, potete usare quelli del vostro modello o sceglierli a seconda del vostro gradimento, questa è una tavolozza base per fare qualche esperiemento

#E1771E   arancione
#CC0000  rosso
#0000FF  blu
#6728B2  viola
#000000  nero
#FFFF66  giallo
#008000  verde
#FFFFFF  bianco

Potete sbizzarrirvi a piacere anche consultando la tabella di campioni  colori html

0 commenti: