Come creare degli stili personalizzati per formattare il post.

Scrivo questo breve post a seguito di una richiesta di una lettrice che è migrata a Blogger da Splinder. I lettori più assidui di questo blog si ricorderanno che a seguito della chiusura di Splinder per cessazione di attività, scrissi un tutorial su come esportare tutti i contenuti dei blog che si erano creati con quel servizio per poi importarli su Piattaforme Blogger o Wordpress.

Sembra che su Splinder ci fosse una funzione con cui si poteva selezionare il colore da usare per il grassetto e il corsivo. In verità non ne capisco l'utilità visto che si può sempre usare l'Editor di Blogger o Windows Live Writer per formattare come ci pare qualsiasi testo. Però visto che mi è stato richiesto vediamo come si possano creare delle classi di stile personalizzate per poi usarle in certe parole o porzioni di testo. Non si tratta di una cosa immediata quindi diciamo che questo post ha più una valenza euristica che pratica perché consente ai neofiti di capire come creare delle classi di stile da utilizzare nei post.

Widget degli Articoli più commentati con elenco personalizzabile.

Questo post è un aggiornamento di un articolo che avevo pubblicato qualche tempo fa su un gadget per Blogger che elencava i post con più commenti. L'aggiornamento si è reso necessario perché Yahoo ha cambiato il motore del suo strumento Pipes  passando dal V1 al V2. Questo ha provocato il malfunzionamento di molti Pipes che erano stati realizzati con la tecnologia precedente. Alcuni sono tornati a posto da soli come quello che è alla base del Gadget dei Top Commentatori, altri come il Pipe per questo widget continuava a dare messaggi di errore.

Cercando tra i Pipes di Yahoo funzionanti ho trovato delle idee utili su quegli di Blogger Sentral e di Belog Cap Ayam, un blog malese di fashion, che mi hanno permesso di creare una Pipe in grado di generare i feed giusti per il nostro widget.

Il Widget degli Articoli più commentati mostra appunto un elenco personalizzabile dei post che hanno ricevuto più commenti tra gli Ultimi 1000 post che sono stati pubblicati. Ho postato nel web una

Come evidenziare i commenti dell'autore del blog su Blogger.

Ho già avuto modo di illustrare come inserire i commenti dell'autore del blog dentro un rettangolo colorato in modo da distinguerli da quelli degli altri commentatori. Tale personalizzazione però non funziona con tutti i modelli. Vediamo come fare per inserire uno stile particolare per i commenti del proprietario del blog con un metodo che dovrebbe andar bene per tutti i template. Visto che da poco è stata introdotta la Nuova Bacheca di Blogger vedrò di usare proprio le schermate tratte da questa nuova interfaccia per realizzare gli screenshot esplicativi.

Accedete alla Bacheca tramite Blogger in Draft e selezionate il blog che volete personalizzare. Quindi andate su Modello > Esegui backup/ripristino modello e cliccate su Scarica modello completo 

Come personalizzare l'aspetto del nome del commentatore su Blogger.

Dopo aver illustrato come inserire il commento dell'autore del blog in un rettangolo vediamo come sia possibile personalizzare l'aspetto del nickname del commentatore sia esso l'autore o un semplice lettore. Ricordo che andando su Bacheca > Impostazioni > Commenti, si possono scegliere quattro opzioni per l'identità di coloro che possono lasciare il proprio contributo

1. Chiunque
2. Utenti registrati anche OpenID
3. Utenti con un account Google
4. Solo membri del blog

La prima opzione è la più permissiva ma consente anche i commenti anonimi che sono spesso fonte di spam. Fino a qualche mese fa anche in questo blog era stata selezionata l'opzione che chiunque potesse commentare. Poi sono cominciate a arrivare tonnellate di spam da robot situati in Asia e ho dovuto scegliere di ricevere commenti solo da utenti con una identità accettata da Blogger. Questa personalizzazione è dunque possibile solo per i nickname degli utenti registrati. Se si è scelta la prima opzione, i commenti anonimi resteranno invariati mentre muterà l'aspetto degli username degli utenti registrati.

Non cambierà il testo del commento. Ecco un esempio

Widget degli articoli con più commenti per Blogger con diversi stili di elenchi.

In un precedente post ho già presentato un gadget inerente ai post più commentati ma non mi aveva pienamente soddisfatto in quanto a estetica e possibilità di personalizzazioni. Si basava su Yahoo Pipes e prendeva in considerazione gli ultimi 5000 commenti a prescindere dai post che li avevano ricevuti.
Con questo nuovo gadget si cambia approccio e i post rilevati saranno gli ultimi 1000 che sono stati pubblicati.
Lo perdita sarà quella di non considerare i vecchi post, se ne abbiamo pubblicati più di mille, ma ci sarà l'innegabile vantaggio di poter visualizzare il numero di commenti che hanno effettivamente ricevuto.

Come nascondere un widget in parti differenti del blog.

Ho già pubblicato articoli sui tag condizionali che consentono di visualizzare dei widget solo in certe parti del blog che possono essere i singoli post, la home page, le pagine statiche, ecc. Si può anche scegliere di mostrare un gadget ovunque escluso in una determinata tipologia di pagine. Una alternativa per nascondere i widget può essere quella di creare delle classi di stile specifiche. Può essere utile se il metodo illustrato nell'articolo citato e in quest'altro non funzionassero.

Innanzitutto fissiamo l'attenzione sul fatto che ciascun widget è univocamente determinato dal suo ID. Se andiamo su Design > Modifica HTML, senza espandere i modelli widget possiamo rendercene facilmente conto  

L'ID di un gadget è dato dal nome presente tra le virgolette dopo id= e in genere è rappresentato da HTMLX dove X è un numero progressivo. Vediamo alcune delle possibilità che si possono presentare. In ogni caso dobbiamo andare su Design > Modifica HTML e cercare la riga </head>. Immediatamente prima vanno incollati i seguenti codici in funzione del risultato che si vuole ottenere.

Come sottolineare i titoli dei post in Blogger.

Un articolo molto breve di risposta a una domanda che ho letto adesso in un commento e che mi chiede come si possa sottolineare il titolo di un articolo in Blogger. Che io sappia ci sono solo due modi per farlo. In entrambi i casi dobbiamo andare su Design > Modifica HTML e cercare la classe di stile che determina l'aspetto dei titoli dell'articolo. Nel modello Simple del Designer Modelli si trova questo blocco di codice

h3.post-title, .comments h4 {  
  font: $(post.title.font); 
  margin: .75em 0 0;
}

Nei modelli più vecchi potrebbe essere simile a questo

.post h3 {
  text-align:justify;
  font-size: 150%;
  font-weight:bold;
 
}

Inserire i numeri di pagina per la navigazione in Blogger scegliendo tra sei stili diversi e personalizzando completamente i colori.

In un precedente articolo ho presentato la personalizzazione su come inserire i numeri di pagina in Blogger per migliorare la navigazione. Ho anche creato un blog apposito per mostrare questa funzionalità che ho chiamato Numeri Pagina Navigazione. Come vedete, nella parte bassa della pagina sono presenti dei numeri che facilitano lo spostarsi tra le varie pagine






Alcuni lettori mi hanno fatto presente che lo stile non si addiceva al loro blog e se ci fosse la possibilità di modificarlo. Abu Farhan ha creato sei stili diversi per la visualizzazione di questi numeri nella parte bassa delle pagine di Blogger e ha pubblicato nel web delle demo dei singoli stili

1. Demo Stile n° 1 -
2. Demo Stile n° 2 -
3. Demo Stile n° 3 -
4. Demo Stile n° 4 -
5. Demo Stile n° 5 -
6. Demo Stile n° 6 - 

Questo credo che coprirà le esigenze estetiche di quasi tutti i modelli in ogni caso possiamo ulteriormente personalizzare come vedremo in seguito. Andate su Layout > Modifica HTML e salvate il modello completo. Cercate la riga

</body>

e, immediatamente sopra, incollate il seguente codice

<!--PAGINE NAVIGAZIONE INIZIO-->
<script type='text/javascript'>
var pageCount=10;
var displayPageNum=3;
var upPageWord =&#39;Precedente&#39;;
var downPageWord =&#39;Successiva&#39;;
</script>
<script src='http://sites.google.com/site/ideepercomputeredinternet/navigazione/pagine1.js' type='text/javascript'/>
<script src='http://sites.google.com/site/ideepercomputeredinternet/navigazione/pagine2.js' type='text/javascript'/>
<!--PAGINE NAVIGAZIONE FINE-->

Le personalizzazioni riguardano i seguenti punti

1. var pageCount=10; è il numero di post da inserire in ciascuna pagina
2. var displayPageNum=3; è il numero di bottoni che devono essere mostrati a sinistra e a destra della pagina corrente. Guarda la prima immagine per renderti conto di cosa significhi
3. Precedente e Successiva sono le espressioni che vengono visualizzate insieme ai numeri di pagina con ovvio significato. Possono essere sostituite da espressioni più stringate come Pre e Seg, oppure da espressioni inglesi come Prev e Next.

Adesso cercate la riga

</head>

e, immediatamente sopra, incollate il seguente codice

<!--PAGINE NAVIGAZIONE INIZIO-->
<link href='http://sites.google.com/site/ideepercomputeredinternet/navigazione/stile.css' rel='stylesheet' type='text/css'/>
<style type='text/css'>
.showpage a:hover {
color: #FFFFFF;
background-color: #940F04;
}
// STILE PER PAGINE SELEZIONATE
.showpagePoint {
color: #FFFFFF;
background: #940F04;
border: 1px solid #940F04;
}
// STILE PER BOTTONI NUMERI
.showpageNum a:link,.showpage a:link {
color: #000000 !important;
background-color: #940F04;
border: 1px solid #940F04;
}
// STILE PER BOTTONI NUMERI PUNTATI DAL MOUSE
.showpageNum a:hover {
color: #FFFFFF !important;
background: #940F04 !important;
border: 1px solid #940F04;
}
// STILE PER BOTTONI PRECEDENTE E SUCCESSIVA
.showpageArea a {
border: 1px solid #940F04;
}
// STILE PER BOTTONI PRECEDENTE E SUCCESSIVA PUNTATI DAL MOUSE
.showpageArea a:hover {
border: 1px solid #940FO4;
color: #FFFFFF !important;
background: #940F04 !important;
}
</style>
<!--PAGINE NAVIGAZIONE FINE - http://parsifal32.blogspot.com-->

dove il colore #940F04; può essere sostituito con un qualsiasi altro a vostra scelta così come gli altri parametri indicati nel codice. Il colore utilizzato è quello dei link di questo blog.
Alternativamente, se invece volete utilizzare gli stili già predisposti da Abu Farhan, allora incollate, sempre sopra la riga </head>, il seguente codice

<!--PAGINE NAVIGAZIONE INIZIO-->
<link href='http://sites.google.com/site/ideepercomputeredinternet/navigazione/stile1.css'  rel='stylesheet' type='text/css'/>
<!--PAGINE NAVIGAZIONE FINE - http://parsifal32.blogspot.com-->

dove al posto del numero evidenziato (1) di rosso inserite quello preferito dei sei sei stili proposti. Per esempio diventerà …/navigazione/stile4.css' se vi piace lo stile numero quattro. Nel caso voleste utilizzare colori diversi da quelli proposti, mantenendo lo stesso stile, dovete procedere in questo modo

1. Scaricare il file dello stile che vi piace andando con il browser nell'URL relativo per esempio (http://sites.google.com/site/ideepercomputeredinternet/navigazione/stile4.css)
2. Aprirlo con Notepad++ e modificare i colori seguendo lo schema illustrato nel codice precedente
3. Se non avete Notepad++, rinominate il file da CSS in TXT e apritelo con il Blocco Note, modificate i colori e rinominatelo con l'estensione CSS
4. Caricate questo foglio di stile su un hosting gratuito come Google Sites. Se utilizzate questa soluzione seguite le  indicazioni dell'articolo che spiega come creare una pagina schedario
5. Acquisitene l'URL puntando con il mouse il file e scegliendo Copia Indirizzo
6. Sostituite questo URL a quello dell'ultimo codice di questo post quindi incollatelo nel modello sopra </head>.

Credo che questo metodo potrà essere utilmente applicato a tutti i modelli di blog.

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. 

Come inserire uno script di un menù o di una personalizzazione direttamente nel modello.

Forse qualcuno tra coloro che mi seguono direttamente nel blog e non solo attraverso i feed si sarà accorto che da qualche giorno ho cambiato menù inserendo un menù orizzontale. Ho caricato i due file javascript e CSS in una pagina schedario di Google Sites. Purtroppo ho avuto dei problemi e c'è stato qualche ora di non accessibilità dei file che si è tradotta in una estrema difficoltà di caricamento del sito e in una non usabilità.

Per ovviare a questo inconveniente ho quindi deciso di caricare i due file direttamente nel modello di Blogger quindi per il futuro

1. Non ci saranno problemi di accessibilità dell'hosting dei file
2. Ci sarà una larghezza di banda illimitata. In Google Sites non è specificata quanto sia ma in questo modo non ci saranno più problemi al riguardo

Illustrerò questo metodo di inserimento basandomi sul mio precedente articolo

• Come caricare file javascript direttamente nel template di Blogger -

Il codice del Menù orizzontale ha essenzialmente due file da caricare che sono

http://sites.google.com/site/ideepercomputeredinternet/script-menu/chrome.css   e

http://sites.google.com/site/ideepercomputeredinternet/script-menu/chrome.js

Per il resto si tratta solo di commenti e di credits. Il primo file determina lo stile del menù mentre il secondo è il Javascript. Ho incollato gli URL nel browser e gli ho scaricati entrambi. Gli ho aperti con Notepad++ ma chi ne fosse sprovvisto li può tranquillamente rinominare in .txt e aprirli con il Blocco Note.

Il file CSS l'ho incollato immediatamente sopra la riga di codice

]]></b:skin>

e l'ho inserito in mezzo a due commenti (non è comunque indispensabile e si può incollare così com'è)

<!--Inizio Menu Chrome-->
Codice del file
<!--Fine Menu Chrome-->

tanto per sapere dove andare a cercare in fase di successive modifiche. Ecco uno screenshot esplicativo

 

 

mentre il file Javascript l'ho dapprima incollato in un file di testo secondo questa sintassi

<script type='text/javascript'>
//<![CDATA[

CODICE JAVASCRIPT

//]]>
</script>

quindi ho incollato il tutto immediatamente sopra la riga

</head>

Ecco il consueto screenshot

Anche in questo caso può essere utile inserire dei commenti di inizio e fine codice per riconoscere i vari blocchi nel caso ci fosse bisogno di intervenire. Prima di salvare il modello ho ovviamente cancellato il codice del menù che era presente precedentemente e che avevo inserito con le modalità di questo articolo.

Il codice del menù vero e proprio inserito in un elemento HTML/Javascript è rimasto esattamente lo stesso e non è stato toccato.

Ho illustrato questo metodo per un caso specifico ma può essere usato se siamo in presenza di una personalizzazione che abbia bisogno di un file esterno .css, o di un file .js oppure di tutti e due proprio come è successo in questo caso. Se ci fossero due file javascript possono comunque essere caricati entrambi uno di seguito all'altro, ciascuno di essi racchiuso dalle quattro linee di codice di cui sopra.

Come modificare lo stile predefinito nei messaggi di GMail con una funzione di Google Labs.

Se usate GMail vi sarete accorti che senza il vostro intervento i messaggi vengono inviati in un anonimo testo con il font San Serif, di dimensione normale e di colore nero. Se amiamo le email particolarmente vivaci, colorate e originali possiamo modificare lo stile di default del testo dei messaggi.

Bisogna andare su Impostazioni > Labs e attivare lo stile di testo predefinito

mettendo un segno di spunta a Attiva quindi andando a fondo pagina per Salvare le modifiche. Adesso torniamo su Impostazioni > Generali. Nella parte bassa sarà comparsa l'opzione Stile di testo predefinito

Si potrà scegliere se utilizzare il grassetto o il corsivo, la famiglia di caratteri, la loro dimensione, il colore e di rimuovere la formattazione. Bisogna andare in basso e Salvare le modifiche come al solito. Potrebbe essere stata interessante la possibilità di poter scegliere stili diversi a seconda del tipo di email che si vuole spedire, chissà se in futuro non inseriranno anche questa feature.

Come inserire i parametri del blockquote (citazione) nella sezione Caratteri e Colori di Blogger.

Se il vostro blog ha già una classe che definisce lo stile della citazione allora avrete nella sezione head del vostro modello una riga di codice che inizia con

blockquote { oppure con .post-body blockquote {

nel caso in cui non la abbiate ho già trattato l’argomento di come sia possibile

• Creare una classe di stile per il blockquote -

Adesso voglio fare un ulteriore passo in avanti e mostrare come si possa inserire nella sezione Caratteri e Colori di Blogger i dati per cambiare

1. Colore al testo delle citazioni
2. Colore dello sfondo delle citazioni
3. Colore del bordo delle citazioni

Se avete già inserito il blocco di codice di cui all’articolo citato precedentemente dovrete toglierlo per procedere con questa personalizzazione decisamente più raffinata (e si potrebbe arricchire ulteriormente ma non vorrei esagerare ).

Andate su Layout > Modifica HTML e salvate il modello completo da usare per un eventuale back-up. Cercate la parte in cui ci sono le variabili supportate dal modello e in mezzo incollateci il seguente codice

<Variable name="blockquotebgColor" description="Colore di sfondo citazione"
  type="color" default="#FFEAE9" value="#ffddf4">
<Variable name="blockQuoteColor" description="Colore testo citazione"
  type="color" default="#003366" value="#380494">
<Variable name="blockquoteBorderColor" description="Colore bordo citazione"
  type="color" default="#003366" value="#380494">

nel modo in cui è mostrato in questo screenshot

I codici dei colori inseriti non sono poi così importanti come vedremo in seguito, mentre la descrizione della variabile, di colore rosso, la potete ovviamente cambiare con una di vostro maggior gradimento.  Adesso cercate la zona del modello in cui sono presenti le varie dichiarazioni di stile ed incollateci il seguente codice

/* -----   BLOCKQUOTE   ----- */

blockquote {
  margin: 10px 20px 10px 20px;
  padding: 10px 15px 0px 15px;
  line-height: 1.6em;
  font-size: 90%;
  color: $blockQuoteColor;
  background: $blockquotebgColor;
  border: 1px dashed $blockquoteBorderColor;
}

In questo screenshot si vede il punto in cui l’ho inserito in questo modello

L’importante è inserirlo alla fine di un altra dichiarazione di stile cioè dopo la chiusura di una parentesi graffa. Per quanto riguarda le personalizzazioni colorate di rosso ho inserito i seguenti parametri che possono ovviamente essere modificati

1. 90% significa che la dimensione dei caratteri sarà del 10% più piccola di quella di default
2. 1px è la larghezza del bordo della citazione. Ho messo la misura minima ma può essere aumentata
3. dashed fa sì che il bordo sia tratteggiato come del resto gli altri bordi di questo blog. Si possono anche scegliere gli attributi solid per ottenerlo come linea continua oppure dotted per averlo punteggiato.

Non resta altro che Salvare il modello.

Fatto questo andate in Layout > Caratteri e Colori e vedrete che saranno presenti le altre tre opzioni di modifica dei colori che avete appena aggiunto

Le tre nuove caselle sono state evidenziate di giallo nel precedente screenshot. Per cambiare colori basterà selezionare il dato che ci interessa, inserire il colore prescelto o direttamente cliccando sulle caselle dei colori del nostro blog oppure inserendo il codice del colore in notazione esadecimale nell’apposito spazio. Per rendere le modifiche effettive si clicca su Salva Modifiche. Nella parte bassa della finestra del browser possiamo anche vedere l’anteprima delle nostre modifiche.

Come evidenziare del testo in un articolo di un blog con Line Marker, estensione di Firefox.

Molti di coloro che studiano hanno l’abitudine di evidenziare le parti più interessanti del libro per memorizzarle meglio e vederle immediatamente nelle fase di ripasso.

Il testo può essere evidenziato anche nelle pagine web e addirittura nel blog. Per prima cosa dobbiamo installare l’estensione Line Marker per Firefox. Dopo aver riavviato il browser nel menù contestuale che si apre cliccando sul destro del mouse sarà presente l’opzione di evidenziazione.

Una trattazione completa di questo add-on l’ho già fatta in

• Line Marker per evidenziare pagine web -

Adesso vorrei mostrare come sia possibile evidenziare anche il testo selezionato in un articolo. Innanzitutto bisogna operare dal browser quindi questo non sarà possibile farlo se si utilizza Windows Live Writer.

Occorre quindi postare con l’editor classico di Blogger, oppure come sto facendo io in questo momento, usare WLW, pubblicare e successivamente modificare con l’aggiunta delle evidenziazioni. Basta selezionare la porzione di testo da evidenziare e scegliere stile e colore per farlo

Il colore sarà immediatamente visibile nell’editor e quando sarà pubblicato l’articolo vi rimarrà.

Si può anche usare l’HTML ma è piuttosto complesso. Guardate due semplici parole evidenziate, di che codice avrebbero bisogno, negli screenshot sottostanti, fatti rispettivamente nella modalità Scrivi e in quella HTML

Come acquisire anche in Windows Live Writer i cambiamenti di stile effettuati nel blog.

Quando si scrive un articolo usando Windows Live Writer in modo automatico, nella modalità Modifica, è come se si scrivesse direttamente nel blog perché viene visualizzato esattamente come si presenterà dopo che è stato pubblicato.

Questo vale per tutti i blog di cui si è inserito l’account nel programma

Però il blog non è un’entità immobile, anzi molto spesso cambiamo colori, dimensioni, aggiungiamo dei widget, togliamo o inseriamo dei bordi,  foto, slideshow ecc.

Queste modifiche Windows Live Writer non le può sapere se non lo avvertiamo. Ecco quindi che dopo ogni modifica significativa all’aspetto del nostro blog dobbiamo acquisirne lo stile anche in WLW per mantenere la caratteristica di “Il tuo articolo sarà come tu lo vedi adesso”.

Per importare il cambiamento dobbiamo andare su Blog > Modifica Impostazioni blog > Modifica e cliccare su Aggiorna tema

in pochi secondi sarà effettuato l’aggiornamento e quando scriverai un articolo vedrai da subito come apparirà nel blog dopo la pubblicazione.

• Aggiornare il tema del blog in Windows Live Writer by Parsifal32 -