Come cercare una stringa del codice nel nuovo editor HTML del template di Blogger

Per trovare con facilità un rigo del codice del modello del blog nel nuovo editor HTML di Blogger è possibile attivare la specifica casella di ricerca "Search" cliccando (dopo aver posizionato il cursore del mouse all'interno della finestra che contiene il codice HTML) nella tastiera del PC sulla combinazione di tasti:

Ctrl +  F 

Dopo aver inserito il termine o la stringa da cercare all'interno del form della casella di ricerca (che si visualizzerà nell'angolo in alto a destra) è necessario cliccare su tasto "INVIO" della tastiera del computer per procedere con la ricerca ed individuare il rigo nel template del blog di Blogspot.
Per ricercare nell'intero template del blog di Blogger possiamo espandere contemporaneamente tutte le sezioni del modello che di default sono compresse utilizzando (sempre dopo aver posizionato il cursore del mouse all'interno della finestra che contiene il codice HTML) in sequenza le seguenti combinazioni di tasti:
Ctrl  + A     per selezionare tutto

Ctrl +  C     per copiare

Ctrl  + V     per incollare

Come centrare la data dei post in un blog di Blogger

Per spostare al centro la data di pubblicazione del post, visibile in Home Page e nei singoli articoli in un blog di Blogger nella posizione di default laterale, è possibile utilizzare il menu "Avanzato" del Designer di Modelli.

Dal sottomenu "Aggiungi un CSS" possiamo infatti inserire un foglio di stile CSS che consente di mettere il modulo con la data che indica il giorno,il mese e l'anno di pubblicazione esattamente al centro sopra al testo del post.

Per centrare quindi la data che indica il giorno in cui è stato pubblicato un post bisognerà quindi,utilizzando la procedura per aggiungere un CSS in Blogger, inserire il seguente foglio di stile CSS:

h2.date-header

{

text-align: center;

}

Come rimuovere il titolo delle pagine statiche in un blog di Blogger

Per non mostrare il titolo posizionato sopra al contenuto di una pagina statica quando lo stesso titolo è già indicato nel gadget “Pagine” o in un menu orizzontale creato con il gadget “Elenco di link”,come nel caso della pagina Privacy di Test per Blogger,è possibile applicare dalla bacheca di Blogger in “Design”>”Modifica HTML” una modifica al codice HTML del template che permette di non visualizzare la sezione del titolo nelle pagine aggiuntive di un blog di Blogspot.

Dopo aver salvato per sicurezza una copia del template ed individuato con una scorciatoia da tastiera la stringa:

</b:skin>

E’ necessario aggiungere subito sotto alla stringa il seguente codice HTML:

<b:if cond='data:blog.pageType == "static_page"'>
<style>
.post-title.entry-title{
display: none;
}
</style>
</b:if>

A questo punto è sufficiente cliccare su “SALVA MODELLO” per applicare la modifica che consente di eliminare in un blog di Blogger il doppione del titolo della pagina statica già visibile nel menu orizzontale.

Come cambiare il testo dei link POST PIU’ VECCHI / POST PIU’ RECENTI in un blog di Blogger

Per modificare la scritta Post più vecchi /Post più recenti ed utilizzare termini diversi per i link che permettono di navigare tra le pagine dei post in un blog di Blogger è necessaria una modifica HTML al codice del template dalla Bacheca di Blogspot in “Design”>”Modifica HTML”.
Dopo aver selezionato la funzione “Espandi Modelli Widget” ed aver individuato (utilizzando una scorciatoia da tastiera) il codice:

<div class='blog-pager' id='blog-pager'>

nella porzione di codice subito sotto troveremo le stringhe di codice HTML al posto delle quali è possibile inserire i termini esatti che si desidera visualizzare al posto di Post più vecchi /Post più Recenti .

Al posto di <data:newerPageTitle/>  (post più recenti) possiamo scrivere NUOVI POST o il termine che si preferisce.
Allo stesso modo,in sostituzione di <data:olderPageTitle/> (post più vecchi) possiamo mettere la scritta POST PRECEDENTI o quella che ci sembra più adatta al nostro blog.

Dopo aver visualizzato il risultato cliccando sul tasto “ANTEPRIMA” è possibile applicare la modifica ai termini o al testo da utilizzare per i link che consentono ai visitatori di leggere i post del presenti in una pagina diversa del blog cliccando sul tasto “SALVA MODELLO”.

Prima di effettuare modifiche HTML al modello di un blog di Blogger,per sicurezza,è sempre utile salvare una copia in formato .xml del template sul proprio computer.

Ringrazio Moon del blog Figlia della Luna per il premio “Stylish Blogger Award”

e Francesca di Torte e Decorazioni per il premio “Liebster Blog”

che sono felice di condividere con tutti i lettori di BLOG E TEMPLATE! 

Come centrare ed ingrandire la descrizione di un blog su Blogger con un CSS dal Designer di Modelli

Per spostare al centro la descrizione di un blog che si trova nell’header del template,nel caso che non si volesse centrare l'intero header (titolo e descrizione) e cambiare anche la dimensione del carattere utilizzato,indipendentemente da quello impostato nel testo della pagina,come visibile in Viaggiare con il Web è possibile inserire un foglio di stile CSS direttamente dal Designer di Modelli di Blogger.
Per visualizzare quindi nella descrizione del blog,sotto al titolo,il font in un formato più grande e con il testo al centro della pagina bisognerà dalla Bacheca di Blogger in “Design”>”Designer di Modelli” nel menu “Avanzato”>”Aggiungi un CSS”(utilizzando la procedura per l’inserimento dei CSS) applicare il seguente foglio di stile:

.Header .description {
font-size: 200%;text-align: center;
}

Se si volesse invece modificare solo la grandezza del carattere della descrizione del blog di Blogspot è possibile inserire il CSS in questa forma:

.Header .description {
font-size: 200%
}

Per ingrandire il carattere del font della descrizione possiamo eventualmente utilizzare anche una misura fissa in pixel sostituendo nel CSS a: 200%  la dimensione del carattere con la grandezza espressa in pixel (es: 25px)in modo da scegliere la dimensione più adatta per il testo della descrizione di un blog su Blogger.

 

Ringrazio Mari di CreaMariCrea per aver pensato a me per questo premio che sono felice di ricevere e che condivido con piacere con tutti i lettori di Blog e Template!

Come aprire i link del gadget ELENCO DI LINK in una nuova finestra del browser in un blog di Blogger

Per aprire in un’altra finestra del browser i collegamenti ad altre pagine dello stesso blog o ad altre risorse Internet (siti web,forum,profili su Facebook ,Twitter o su altri Social Network) inserite  nel blog utilizzando il gadget di Blogger “Elenco di Link” è necessario inserire una modifica HTML al codice del widget nella finestra del template (disponibile nella sezione “Design”>”Modifica HTML” della bacheca di Blogspot).
Dopo aver selezionato la funzione “Espandi modelli widget” nella finestra con il codice HTML del template sarà possibile,utilizzando una scorciatoia da tastiera,individuare la sezione del widget denominata“LinkList1” nella quale troveremo il seguente codice:

<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Che andrà modificato sostituendo a:
<a expr:href='data:link.target'>
il nuovo codice:
<a expr:href='data:link.target' target="_blank"> 

Subito dopo aver salvato la modifica al template con il bottone “Salva Modello” sarà possibile visualizzare il blog ed aprire automaticamente i collegamenti inseriti con il gadget “Elenco di Link” di Blogger in una diversa scheda del browser.

Prima di inserire la modifica per visualizzare i link in una nuova finestra del browser web è opportuno per sicurezza salvare una copia del template che si sta utilizzando sul proprio computer.

Come centrare il titolo in un post di Blogger con un CSS dal Designer di Modelli

Per spostare da sinistra al centro la visualizzazione del titolo di un post in un blog di Blogspot è possibile inserire,direttamente dal Designer di modelli,un foglio di stile CSS con la modifica che permette di centrare il testo scelto come titolo.
Dalla bacheca di Blogger in “Design”>”Designer di modelli” possiamo selezionare a sinistra il menu “Avanzato” e successivamente la sezione “Aggiungi CSS” ed inserire così nella finestra di testo ”Aggiungi CSS personalizzati” il seguente CSS:

.post h3{
text-align:center;
}

Nella stessa pagina in basso è disponibile l’Anteprima nella quale visualizzare lo spostamento del titolo del post al centro e subito dopo possiamo cliccare su “Applica al blog” per rendere immediatamente efficace la modifica per spostare da sinistra al centro il testo e centrare in questo modo automaticamente il titolo di un post in un blog di Blogger.

Come impostare la posizione e lo scorrimento dello sfondo personalizzato in un blog su Blogger

Per selezionare il tipo di visualizzazione più adatto e lo scorrimento dell’immagine di sfondo,dopo aver caricato una foto come sfondo personalizzato del blog su Blogger,è possibile utilizzare lo strumento di configurazione che troviamo disponibile nel Designer di modelli e che consente di impostare l’immagine nel modo più adatto ed anche di spuntare l’opzione “Scorri la pagina” per permettere così alla foto inserita di scorrere insieme al contenuto della pagina con i post del blog.

L’opzione “Allineamento” consente,cliccando sulla freccetta a destra” di regolare la posizione orizzontale della foto tra sinistra, centro e destra e di scegliere l’allineamento in verticale tra alto e basso dell’immagine di sfondo del blog di Blogspot.

Dallo stesso strumento,in basso dalla freccetta a destra di “Non affiancare”,possiamo anche scegliere di sovrapporre l’immagine utilizzata come sfondo  oppure di affiancare orizzontalmente o verticalmente la foto scelta per il background del blog su Blogger.

Come aggiungere la colonna sinistra in un blog su Blogger dal Designer di Modelli

Per inserire nel blog una seconda colonna laterale da posizionare a sinistra della colonna principale del blog oppure per scegliere altre opzioni per l’impostazione di visualizzazione del blog con una terza colonna è possibile utilizzare,nei nuovi template di Blogger,il menu “Layout” disponibile nel “Designer di Modelli”.
Da “Layout”>”Layout corpo” è possibile scegliere tra otto diverse soluzioni grafiche per l’inserimento dei contenuti relativi ai post nell’elemento “Post sul blog” e per aggiungere i gadget nelle sidebar del blog su Blogspot.
Possiamo infatti anche scegliere di posizionare due colonne per i widget a destra che diventano tre con una sidebar più grande in alto e divisa in due sezioni più piccole in basso oppure utilizzare solo la colonna del post senza inserire la sidebar.

Dopo aver selezionato l’opzione che prevede una terza colonna del blog da mettere a sinistra dei post,se fosse necessario riorganizzare la posizione dei gadget già presenti nel blog di Blogger,è sufficiente trascinare con il mouse gli elementi visibili nell’anteprima.
Troviamo infatti nella preview,presente in basso nella stessa finestra di configurazione,le sezioni tratteggiate “Trascina i tuoi gadget qui” per spostare la posizione dei gadget dalla colonna destra a quella sinistra e mettere ogni widget nella posizione più adatta.

A questo punto per completare l’inserimento della terza colonna a sinistra nel blog su Blogger è necessario cliccare su “Applica”,in alto a destra nel Designer di modelli” per visualizzare così il blog con una seconda colonna laterale.
Dallo stesso menu “Layout” è possibile anche impostare il “piè di pagina” del blog.

Come inserire in un template personalizzato i pulsanti di condivisione di Blogger

Per aggiungere i bottoni di condivisione sui social network di Blogger all’interno di un template personalizzato,caricato sul blog con l’apposita funzione,può non essere sufficiente selezionare,in “Design”>”Elementi pagina”,dall’elemento centrale “Post sul blog”>”Modifica" l’opzione per condividere i post su Gmail,Google Buzz,Blogger ,Twitter e Facebook 
In alcuni template per Blogspot  infatti può essere necessario,per la corretta visualizzazione del gadget per condividere, utilizzare la funzione di ripristino dei widget (che però elimina altre eventuali personalizzazioni già aggiunte ai widget) oppure inserire una porzione di codice  aggiuntivo direttamente all’interno della finestra con l’HTML del template che è visibile nella sezione “Modifica HTML” del menu “Design” di Blogger.

  
Prima di inserire la modifica per aggiungere il tasto di condivisione è opportuno per sicurezza salvare il template che si sta utilizzando.Successivamente bisogna selezionare a destra della finestra del template l’opzione “Espandi modelli widget” ed individuare questo rigo: 

<data:post.body/>

Per trovare velocemente il rigo è possibile utilizzare una scorciatoia da tastiera per cercare il rigo HTML

dopo aver trovato il rigo,subito sotto bisognerà aggiungere:

<div class='post-share-buttons'>
   <b:include data='post' name='shareButtons'/>
</div>

A questo punto è possibile visualizzare l’anteprima con il risultato della modifica al codice HTML prima di salvare il template con il codice aggiuntivo necessario,in alcuni template personalizzati,per vedere ed utilizzare i pulsanti per condividere i post di Blogger sui social network.

Come modificare la dimensione ed il colore del carattere del post con il Designer di Modelli di Blogger

Per cambiare il font utilizzato per scrivere il post in un blog di Blogspot e scegliere la dimensione preferita,il colore più adatto e lo sfondo della pagina del post è possibile utilizzare il Designer di Modelli di Blogger raggiungibile dalla Bacheca dopo aver selezionato il link “Design” sotto al titolo del post.

Nel menu verticale “Avanzato” del Designer di Template di Blogger è disponibile infatti il sottomenu “Pagina” o “Testo pagina” per impostare il font che si desidera utilizzare per la scrittura dei post scegliendo tra quelli disponibili nella finestra di selezione. Possiamo anche scegliere di mettere il grassetto ed il corsivo e selezionare la misura in pixel del carattere da visualizzare nel post.
Nella stessa finestra troviamo lo strumento per cambiare automaticamente il colore del testo e lo sfondo della pagina con le indicazioni sui colori già presenti nel modello ed i suggerimenti sulle tonalità abbinabili,ma è anche possibile scegliere di aggiungere nuovi colori,per il carattere e lo sfondo della pagina del blog di Blogger,inserendo direttamente il codice o utilizzando lo strumento di selezione colori.


Tutte le modifiche apportate in questa sezione sono immediatamente visibili in anteprima direttamente in basso nella stessa pagina del Designer di Modelli di Blogger e saranno applicate al blog di Blogspot solo dopo aver cliccato su “Applica al blog” nell’angolo in alto a destra nella pagina.

Come inserire un Modello Classico di template in un blog di Blogger

Per caricare in un blog su Blogspot un modello classico di template tra quelli a due colonne disponibili prima in fase di creazione del blog come ad esempio i modelli Minima(Dark,Blue,Ochre,Lefty,Stretch),Simple,Tic Tac (Blue),Sand Dollar,Tekka,Thisaway (Blue,Green,Rose),Son of Moto (Mr.,Ms.) è possibile dalla Bacheca di Blogger selezionare la sezione “Design” e successivamente in “Modifica HTML” nel riquadro “Modelli Precedenti” cliccare sul link “Seleziona modello di layout” con l’avviso che per questi modelli più vecchi,creati nel 2006,non sono disponibili diverse nuove funzioni del Designer di modelli.

Nella finestra successiva sono disponibili gli screenshot di tutti i modelli disponibili,oltre ai template già indicati troviamo infatti anche i modelli classici Harbor,897,565, Denim (Stretch,Washed,Light),Rounders (2,3,4),Herbert,Jellyfish, Scribe ,Dots (Dark) e Snapshot (Sable,Tequila).

Nella finestra di selezione del modello classico di template di Blogger è possibile visualizzare l’anteprima e successivamente cliccare su “Salva Modello” per confermare la scelta;nel nuovo layout non saranno disponibili le personalizzazioni inserite nel precedente template di Blogspot,gli elementi pagina (gadget) saranno invece disponibili nel modello classico di layout scelto.In ogni caso è sempre utile,per sicurezza,prima di procedere al cambio del template del blog salvare una copia del template in uso.

Utilizzare il Designer di Modelli dalla sezione “Design” nella bacheca di Blogger

Per modificare la grafica del blog con gli strumenti del Designer di Modelli e realizzare un template personalizzato con la possibilità di scegliere il layout,i colori e lo sfondo preferito per il blog direttamente in Blogger è possibile utilizzare nella bacheca di Blogspot il link di collegamento “Design” visibile sotto al titolo di ogni blog in bacheca accanto alle “Impostazioni”.

Dalla sezione “Design” del pannello di controllo di Blogger possiamo accedere anche ad “Elementi pagina” per aggiungere nuovi gadget al blog o per modificare le impostazioni del post ed a “Modifica HTML” per inserire modifiche direttamente nella finestra con il codice HTML del template o per salvare una copia del template.

Come togliere la Navbar di Blogger con un CSS nel Designer di modelli

Per eliminare la Navbar da un blog di Blogspot realizzato con il Designer di modelli di Blogger è possibile utilizzare direttamente la finestra che permette di aggiungere stili personalizzati CSS al modello del template,senza dover inserire la modifica per nascondere la visualizzazione della barra di navigazione di Blogger manualmente nell’HTML del template.Quindi per eliminare questo elemento,che permette di collegare l’autore del blog alla Bacheca per personalizzare il blog oppure ad altri Blogspot mediante la funzione “Blog successivo” ed alle opzioni di condivisione dalla Navbar ,dal menu “AVANZATO” del generatore di template di Blogger è necessario selezionare ”Aggiungi CSS” ed inserire con copia-incolla nella finestra alla destra delle opzioni di modifica il seguente foglio di stile CSS:

#navbar-iframe {
display: none !important;
}

Per salvare la nuova impostazione,dopo aver visualizzato l’anteprima,è necessario cliccare su “Applica al blog” e cancellare così la visualizzazione della Navbar del blog realizzato o modificato con il Designer di Modelli di Blogger.
Se necessario per l’applicazione della modifica,dopo aver inserito il codice CSS nella finestra come indicato nel post,è possibile modificare la formattazione del codice come è visibile in questa immagine:

Come modificare la posizione del titolo con il Designer di Modelli di Blogger

Tra le caratteristiche del Designer di modelli di Blogger è sicuramente utile e funzionale la possibilità di aggiungere direttamente dal generatore online di Template su Blogspot stili personalizzati CSS al modello del template scelto senza dover inserire la modifica manualmente nell’HTML del template.Per spostare al centro il titolo del blog di Blogspot creato con il Designer di modelli è sufficiente come indicato nell’esempio dal menu “AVANZATO” selezionare ”Aggiungi CSS” per inserire con copia-incolla nella finestra alla destra dell’elenco degli elementi modificabili il codice:

.Header { text-align: center; }

Dopo aver salvato l’impostazione cliccando su “Applica al blog” il titolo e la descrizione del blog saranno visibili al centro dell’intestazione nell’header del template del blog realizzato o modificato con il Designer di Modelli di Blogger.

Come eliminare la navbar di Blogger dal blog

Per togliere dal blog la Navbar,la barra di navigazione in alto nella pagina nei template base di Blogspot e renderla invisibile ai visitatori è possibile inserire nel codice HTML del template queste righe:

#navbar {
height: 0px;
visibility: hidden;
display: none;
}

Da posizionare nel codice HTML del template,come è visibile nell’immagine in basso,immediatamente prima del rigo:

/* Variable definitions

Per trovare più facilmente il rigo è possibile utilizzare questo sistema di ricerca.Come tutte le operazioni di modifica del codice HTML è utile visualizzare l’anteprima del blog prima di salvare ed è sicuramente opportuno fare prima il backup del template che si sta utilizzando.

Come salvare la copia di sicurezza del template di Blogger

E’ sicuramente importante,prima di sostituire o modificare il codice del template o anche quando è necessario aggiungere nuove righe di HTML nel blog di Blogspot,fare una copia di backup dell’intero template che si sta utilizzando.
Queste modifiche infatti a volte possono causare problemi imprevisti e può capitare di non riuscire a salvare il nuovo template o di non riuscire a visualizzare correttamente il blog.Per creare il file XML del backup in “Design”>”MODIFICA HTML” troviamo in alto nella pagina il titolo “Esegui backup/ripristino modello” con il link “Scarica modello completo” che permette di aprire la finestra per il Download sul disco fisso del computer del template che si sta utilizzando con i gadget e le impostazioni stabilite in precedenza.
Questa operazione consente quindi di non perdere il lavoro effettuato sul blog,infatti il template in caso di necessità potrà essere ripristinato su blogspot; sarà sufficiente caricare sul blog il file XML archiviato sul PC come se si trattasse di un template personalizzato.

Come caricare un template personalizzato in un blog su Blogger

Per inserire un template personalizzato in un blog di Blogspot al posto del template base scelto al momento della creazione del blog o tra quelli presenti in "Carica nuovo modello"dopo aver precedentemente scaricato sul proprio computer il file XML prelevato dal sito dal quale abbiamo scelto il nuovo template( se è compresso in un file ZIP è necessario procedere prima all'estrazione del file XML) bisogna dalla Bacheca di Blogger selezionare "Layout" e successivamente nel menu orizzontale scegliere"Modifica HTML" cliccando su "Sfoglia" si visualizzano le cartelle ed file del computer, basta selezionare il file XML del nuovo template personalizzato e con doppio clik  lo possiamo già vedere nella casella di inserimento pronto per essere caricato cliccando su "Carica". A questo punto sarà possibile scegliere di eliminare o salvare insieme al nuovo modello i gadget precedentemente inseriti.E' possibile anche saltare questa opzione e salvare solo il template personalizzato in fondo alla pagina dopo aver controllato,cliccando sul tasto "Anteprima",se il risultato è di nostro gradimento.Prima di modificare il template è importante salvare una copia del modello in uso come indicato in alto nella pagina cliccando su “Scarica modello completo” per poterlo eventualmente ripristinare in caso di problemi con il nuovo template.

! Attenzione !

Le istruzioni relative alla procedura nella nuova interfaccia di Blogger sono disponibili nel seguente articolo:
Come caricare un template personalizzato in un blog di Blogger