Come creare degli stili personalizzati per inserire il codice HTML in un articolo.

Quando si vuole inserire del codice HTML in un post bisogna stare attenti a che non venga interpretato come tale da Blogger quindi per prima cosa se si usa l'editor di Blogger bisogna mettere la spunta a Mostra HTML letteralmente

mentre se si usa Windows Live Writer non ci sono problemi di questo tipo. In questo blog, fino a questo momento ho inserito il codice HTML in una citazione che genera una cosa di questo tipo

Codice HTML inserito in un articolo

che non è un granché ma che ha un tocco di originalità perché ho personalizzato la classe di stile del blockquote. Si può fare un passo ulteriore creandoci uno stile personalizzato per il codice. Vi presento tre diverse opzioni

Codice numero uno

.codice {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://5nxhyw.blu.livefilestore.com/y1pBmcsjN_C4Uz9apV4bqw0j4loIwnc6UgkhSOoSjJvltkgT_NywgOstjy2kWpNxLxGK8-tKrGD6sap9b1vTPJXG65BmSTZC8k7/codice-1.gif) no-repeat right bottom;
border : 2px solid #eeeeee;
color : #7D7D7D;
}

Codice numero due

.codice {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://5nxhyw.blu.livefilestore.com/y1pwb62k412-Whxwy-bDnggvi6aEkRyUbK4W9V-ujTxnoPZM78_uZmTHqHPky4Kev3THgC13jMWKK0xPbS0fI5AwGhNEYqyGq1U/codice-2.gif) no-repeat right bottom;
border : 2px solid #eeeeee;
color : #7D7D7D;
}

Codice numero tre

.codice {
margin : 10px;
padding: 0px 25px 5px 40px;
background : #ffffff url(http://5nxhyw.blu.livefilestore.com/y1pVZITfkJXZcRByP6rN1HGvFapbMijXNwFBk3R6gN8kd_fgygFJlx-C0_JdTexebihTUblgV3HCORgUipndTCztdk-bn8BEBx-/codice-4.png) no-repeat top left;
font: 0.9em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #767675;
border: 1px solid #767675;
}

dove possono essere personalizzati i colori di sfondo (p.e. background : #f9f9f9), i colori del bordo (p.e. #eeeeee), il tipo di bordo (solid, dashed, dotted) e la sua dimensione (p.e. 2px). Se non sono adatti al nostro modello si possono cambiare anche i valori accanto a margin e a padding. Rappresentano la distanza dal resto del layout (margin) e del codice dal rettangolo in cui è contenuto (padding). I quattro numeri sono relativi alle quattro direzioni partendo dall'alto e finendo alla sinistra in senso orario.

Gli URL evidenziati di verde sono quelli delle immagini di sfondo che sono stati caricati su un mio hosting. Potete lasciarli invariati oppure scaricare le immagini e ricaricarle su un vostro spazio tipo Skydrive sostituendone successivamente l'indirizzo. I più bravi in grafica possono personalizzare ulteriormente le immagini inserendo il logo del proprio blog.

Andiamo su Layout > Modifica HTML e cerchiamo la riga

]]></b:skin>

quindi, immediatamente sopra, si incolla il codice prescelto e si Salva il Modello.

Quando si inserisce del codice in un nostro articolo, per visualizzarlo con questo aspetto bisogna passare alla Modalità HTML (Origine se si usa WLW) e, all'inizio e alla fine del codice si inseriscono le due righe seguenti

<div class="codice">
Codice da visualizzare nel post
</div>

come mostrato nel seguente screenshot

Per vedere una dimostrazione reale di tutte e tre le classi di stile si può dare uno sguardo al mio blog di demo all'articolo sulla personalizzazione dello stile del codice.