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
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
Commenti