Personalizzare facilmente i modelli di Blogger con Stylebot.

Come modificare larghezze, altezze, colori, sfondi, caratteri, bordi e altro ancora nel template di Blogger senza conoscere nulla di linguaggi di programmazione ma usando Stylebot un addon di Chrome.

La personalizzazione dei modelli di Blogger può essere fatta mediante il Designer Modelli andando su Personalizza > Avanzato e modificando colori, dimensioni e caratteri dei vari elementi che compongono il layout. Queste modifiche però non sono semplicissime e del tutto senza rischi perché quando il template è stato scaricato da internet intervenire risulta essere particolarmente complesso e quando nel modello fossero già presenti modifiche importanti si corre il rischio di perderle.

I programmatori di professione usano per questi compiti le estensioni Firebug o Firebug Lite. Anche la funzione Ispeziona elemento di Chrome e quella corrispondente di Firefox possono dare una mano per conoscere i selettori e agire di conseguenza. Ci sono però anche altre estensioni che potremmo definire più alla portata di tutti in grado di aiutare nella modifica del template.

Stylebot è un addon di Chrome adattissimo ai principianti che con il suo ausilio possono apportare delle modifiche al modello, visualizzarle direttamente nel browser come anteprima e renderle definitive aggiungendole nel Designer Modelli. Dopo l'installazione della estensione si clicca sulla sua icona per aprire gli strumenti di modifica. Si apre il sito a cui apportare i cambiamenti e con il mouse si seleziona l'elemento della pagina che vogliamo modificare che può essere il titolo del blog, il titolo del post, il corpo dell'articolo, una sidebar  o un widget

   

COME MODIFICARE LARGHEZZE E DISTANZE SU BLOGGER

Ci sono anche delle tavolozze di colore per i caratteri e per gli sfondi. È anche possibile inserire dei bordi a degli elementi e operare sui margini. Un sistema particolarmente interessante che potrebbe permettere per esempio di avvicinare o allontanare la sidebar al corpo dell'articolo

Lo screenshot precedente mostra la situazione di partenza mentre quello seguente quella di arrivo

in cui è stata modificata la larghezza della sidebar a 280 pixel e il margine sinistro della stessa aumentato a 80 pixel. Aprite l'immagine in un'altra scheda per vedere meglio i dettagli. Oltre a operare su margin si può fare la stessa cosa sul padding nelle quattro direzioni per settare le distanze interne invece di quelle esterne. Ritengo che Stylebot dia il meglio di sé proprio in questo tipo di modifiche che non sono semplici neppure per chi sia un esperto di linguaggio di programmazione.

Le modifiche apportate saranno visibili solo nel nostro browser e potranno essere eliminate cliccando sulla icona CSS e andando su Remove Styling

Per rendere le personalizzazioni effettive bisogna andare in basso su Edit CSS quindi andare su Copy per copiare negli appunti il codice da applicare a quella pagina

Per inserirlo nel template si va su Modello > Personalizza > Avanzato > Aggiungi CSS e si incolla nel campo situato sulla destra del layout

si va su Invia, si visualizza l'anteprima del layout del blog e si clicca su Applica al blog a destra. Avevo già parlato di questa funzionalità ma ho ritenuto utile riprenderla e farci un breve video tutorial

Opzionalmente si può evitare di usare il Designer Modelli che è sempre rischioso quando si abbia un template molto personalizzato e andare su Modello > Modifica HTML e incollare il codice copiato da Stylebot subito sopra alla riga ]]></b:skin>.