Come spostare in alto o in basso una sidebar di Blogger.

Questo è un instant post che sto scrivendo a seguito di un commento appena ricevuto in cui mi si chiede se esiste la possibilità si spostare in basso la barra laterale. Credo che la lettrice si riferisca allo spostamento della sidebar di Blogger verso il basso.

Per affrontare questi problemi occorre utilizzare gli strumenti Ispeziona Elemento di Chrome o Analizza Elemento di Firefox. Solo in questo modo potremo conoscere l'ID o la classe dell'elemento in questione per potergli applicare una regola CSS che gli faccia cambiare di colore, di sfondo o appunto che lo sposti verso il basso come richiesto in questo caso.

Inserire bordi o immagini tra i widget nella sidebar di Blogger.

In alcuni modelli personalizzati scaricati da internet nella sidebar o nelle sidebar spesso si visualizzano degli elementi di divisione tra i vari gadget. Si può trattare di semplici linee facenti parte di un bordo oppure anche di immagini ovviamente di dimensioni appropriate. Questa personalizzazione diciamo che è una evoluzione dell'altra che prevede la visualizzazione di widget con lo sfondo colorato.

Queste modifiche in realtà sono piuttosto semplici e possono essere utilizzate da tutti coloro cha abbiano un minimo di esperienza nella gestione del modello di Blogger. Prima di procedere con la lettura del post consiglio di consultare l'articolo in cui si tratta dello stile dei bordi visto che utilizzeremo proprio quei codici.

Icone con collegamenti ai social network da mettere nella sidebar.

I social network più importanti ci mettono a disposizione i codici per inserire bottoni per condividere i post spesso insieme anche a contatori. Questi bottoni qualche volta non sono in linea con la grafica del blog e allora si potrebbe prendere in esame la possibilità di crearci da soli delle icone per poi inserire i collegamenti a nostro piacimento.

Ho pubblicato un articolo in cui ho postato anche i codici per far funzionare questi bottoni in modo simile a quelli ufficiali ma solo se vengono inseriti nel modello di Blogger.

Andiamo adesso a presentare una soluzione molto più minimalista che consiste semplicemente nel collegare ciascuna icona all'account di destinazione nel social network prescelto. Il risultato è questo

Come nascondere sidebar, footer e commenti in un post di Blogger.

Mi ricordo quando per la prima volta pubblicai un tutorial per nascondere le sidebar nei nuovi modelli di Blogger e per applicare queste personalizzazioni a una singola pagina statica. Seguendo la falsariga del post in cui illustravo come mostrare un background personalizzato in un determinato articolo vediamo come sia possibile modificare il layout di un qualsiasi post o di una singola pagina statica senza neppure intervenire nel codice del modello.

La prima cosa da fare è quella di scoprire i fogli di stile di tutti gli elementi che vogliamo modificare o nascondere. Si può usare Firebug, estensione di Firefox, oppure la più semplice Firebug Lite per Chrome. Chi non le conoscesse può leggersi i post che ho linkato e dove ho anche pubblicato dei videotutorial di questi addon per i due browser.

Ogni modello ha una struttura dei fogli di stile sotto certi aspetti unica, dobbiamo quindi scoprirli tramite Firebug e Firebug Lite. Con quest'ultima basta cliccare sul destro del mouse e scegliere Inspect with Firebug Lite per poi cliccare su Inspect e selezionare con il mouse l'elemento che ci interessa.

Come mostrare la sidebar nei modelli a Visualizzazione Dinamica.

Nonostante gli innegabili vantaggi offerti dai modelli di Blogger denominati a Visualizzazione Dinamica, questi ultimi non stanno avendo un grande successo. La ragione principale è che sono poco personalizzabili e che supportano un numero di widget ancora insufficiente.

Dopo aver visto come modificare alcuni aspetti di tali widget tramite i CSS vediamo come sia possibile rendere fissa la barra dei gadget e non a scomparsa come invece è di default. Questa personalizzazione funziona certamente nel modello Classic mentre non ho testato negli altri vale a dire nei template Flipcard, Magazine, Mosaic, Sidebar, Snapshot e Timeslide.

La classe da modificare è #gadget-dock e per poterlo fare dobbiamo aggiungere nuovi attributi insieme al tag !important che li rendono prioritari rispetto a quelli originali. Si va quindi su Modello > Personalizza > Avanzato > Aggiungi CSS e, nel modulo in alto a destra, si incolla il seguente codice

Come eliminare le sidebar e personalizzare ciascuna pagina statica di Blogger.

Attualmente su Blogger ci sono sostanzialmente tre tipi di template: quelli Ufficiali ma di vecchio tipo che possono essere assimilati a quelli scaricati da internet e creati da web designer, quelli Ufficiali di Blogger che sono stati introdotti insieme al Designer Modelli e quelli a Visualizzazione Dinamica.

Per questo ultimo gruppo le personalizzazioni da introdurre sono assolutamente limitate visto che non è attiva l'opzione Modifica HTML nella scheda Modello. Al massimo si può andare su Modello > Personalizza > Avanzato > Aggiungi CSS per inserire dei fogli di stile per modifiche alquanto modeste.

Nei commenti su questo blog ho ricevuto spesso la richiesta di come fosse possibile modificare l'aspetto di una singola pagina statica. Ricordo di aver già affrontato questo tema nei post su come eliminare le sidebar nelle pagine statiche nei nuovi modelli e come eliminarle in quelli vecchi.  

Queste modifiche riguardavano però tutte le pagine statiche. Vediamo come modificare lo stile di ciascuna di esse in modo individuale. Dividerò il tutorial in due parti, il primo a beneficio di coloro che hanno un template vecchio o scaricato da internet e il secondo per chi ha un template del Designer Modelli.

 

Come modificare l'aspetto di una singola pagina statica nei vecchi template

In questo caso non occorre apportare nessuna modifica al modello. Si va su Pagine > Nuova pagina > Pagina vuota e si edita la pagina statica come fosse un post. Se la pagina è già stata pubblicata si va su Pagine > Modifica. Si aprirà l'Editor che poi sarà pressoché uguale a quello del post. In alto a sinistra si clicca su HTML che si trova accanto a Scrivi e, subito all'inizio della pagina, si può per esempio incollare un codice come questo

Come ridurre lo spazio tra post e sidebar nei template del Designer Modelli.

I nuovi modelli di Blogger, non mi riferisco a quelli a Visualizzazione Dinamica ma a quelli del Designer Modelli, lasciano un po' troppo spazio tra la parte centrale in cui viene visualizzato il post e le sidebar. Questo spazio potrebbe invece essere utilizzato per allargare l'area del post o le colonne laterali. Ricordo che si può modificare la larghezza del layout del blog attraverso il cursore presente nel tool del Designer Modelli oppure agendo direttamente nel codice.

Nel caso si voglia sfruttare lo spazio in maniera ottimale si può ridurre la distanza tra la/e sidebar e la parte centrale del layout. Si va su Modello > Backup/Ripristino e si salva il modello completo per un backup di sicurezza. Si torna su Modello > Modifica HTML > Procedi e si controlla se nel codice c'è la stringa di codice Content Padding. Nel caso fosse presente significa che abbiamo il modello Travel (o Viaggi) oppure un template personalizzato che è comunque una sua derivazione. Dovrebbe essere allora presente un codice simile a questo

Come allineare alla stessa distanza le icone dei social sopra il post, sotto l'header o in una sidebar.

Ho già affrontato il tema di come si possano allineare i bottoni dei vari social network usando il codice di una tabella. Se lo si vuole fare con delle semplici icone che abbiano la stessa dimensione, può essere più proficuo usare un diverso metodo che mi è stato prospettato in una email. Con questo sistema tra l'altro le immagini saranno esattamente equidistanti una dall'altra senza bisogno di inserire manualmente i pixel dei margini

Nel caso di quattro icone, il codice da usare potrebbe per esempio essere il seguente

Come inserire linee o immagini di separazione tra i widget della sidebar.

Mi sono già occupato di come inserire delle immagini di separazione tra articolo e articolo da visualizzare nella homepage, nelle pagine di archivio e in quelle delle etichette. Adesso applichiamo lo stesso concetto ai widget presenti in una sidebar. L'obiettivo è quello di inserire una linea o anche una immagine che divida i singoli widget. Dobbiamo semplicemente agire aggiungendo opportuni CSS nel modello.

Nuovi template del Designer Modelli 

Se si ha un modello del nuovo tipo, bisogna andare su Design > Modifica HTML e cercare la riga

]]></b:skin>

Immediatamente sopra si incolla questo codice

Dividere la sidebar in schede per mostrare i widget nello stesso spazio.

Qualche tempo fa ho presentato un metodo per suddividere la sidebar in più parti, adesso illustro un procedimento alternativo che offre un maggior numero di personalizzazioni. Inoltre questo sistema ha il vantaggio di inserire i contenuti delle varie schede dello stesso elemento HTML/Javascript.

 

La larghezza delle linguette delle schede sarà proporzionata al numero di caratteri del suo nome. E' inoltre possibile modificare i colori di background, del link, del link visitato e di quello puntato. Si possono personalizzare anche i colori dei bordi e le dimensioni dei caratteri. Per l'installazione si va su Design > Modifica HTML e si salva il modello completo per un eventuale backup di ripristino. Si cerca la riga </head> e, subito sopra, si incolla il codice

Come modificare la larghezza del blog e delle sidebar con i nuovi modelli di Blogger.

L'avvento del Designer Modelli ha cambiato molti comportamenti tra gli utenti di Blogger che erano ormai consolidati. Una delle cose più interessanti dei template generati mediante il Designer Modelli è quello della possibilità di configurare il Layout e  cambiare le larghezze di Blog e Sidebar. Quando si fa per la prima volta, in fase di progettazione, si va su Design > Design Modelli > Modifica le larghezze

Menù orizzontale su più livelli da installare nella sidebar di sinistra.

Dopo aver presentato un menù verticale senza javascript, usando lo stesso meccanismo, vado a illustrarne uno orizzontale che forse è anche più interessante. Anche in questo caso si utilizzano i CSS e gli effetti di transizione.

• Demo del menù orizzontale su più livelli -

Il seguente screenshot è esplicativo del suo funzionamento

Menù Verticale per Blogger senza javascript.

Si sa che inserire javascript nel modello implica una diminuzione della velocità di caricamento, parametro che da circa un anno è entrato a far parte del "paniere" di Google per determinare il posizionamento di una pagina. I dati presi in considerazione sono comunque più di 200 e non si sa che peso sia stato dato alla rapidità con cui il sito si carica. Tra poco anche in Italia sarà introdotto il cosiddetto Panda Update e, quando accadrà, l'algoritmo diventerò ancora più complesso con risultanze tutte da verificare.

E' comunque sempre buona norma quella di cercare di mettere nel sito solo gadget utili e evitare quelli troppo pesanti. Vado a illustrare l'inserimento di un menù verticale che fa completamente a meno del javascript e che può essere inserito in una sidebar come menù di supporto a quello principale. Sono stati usati solo i CSS e gli attributi di transizione. Ecco uno screenshot

Come eliminare le sidebar dalle pagine statiche nei nuovi modelli di Blogger.

Nei vecchi template di Blogger era diventato abbastanza semplice togliere le sidebar dalle pagine statiche; con l'avvento dei template del Designer Modelli, la cosa è invece diventata più complicata ma finalmente fattibile. Prima di passare a illustrare il procedimento, ricordo che l'eliminazione delle sidebar risponde all'esigenza di avere un layout molto più ampio tale da poter utilizzare dette pagine per gallerie fotografiche, gallerie di video o landing page particolari. Nei nuovi modelli si può optare tra vari layout e si possono anche scegliere le dimensioni dei vari elementi. Se si va su Design > Designer Modelli > Layout si può vedere che si possono avere fino a tre sidebar e fino a tre colonne nel piè di pagina

Come inserire nel blog e personalizzare il traduttore della Microsoft.

Google ha indubbiamente la supremazia sulle personalizzazioni, servizi e accessori offerti ai blogger in modo gratuito. Basta ricordare il successo sempre crescente della piattaforma Blogger contrapposto alla cancellazione del servizio Live Space della Microsoft che ha costretto i blogger a migrare su Wordpress.com. Se c'è un gadget in cui Google deve migliorare e dove può imparare dalla Microsoft è quello della traduzione. Il traduttore di Google è spartano, assolutamente non personalizzabile e pure bruttino.

Il widget analogo della Microsoft ha la funzione di traduzione integrata con i cookie in modo da non dovere nuovamente scegliere la lingua di traduzione se si va Pagina avanti o Pagina indietro, questo a beneficio dei lettori che ci seguono pur non conoscendo il nostro idioma. Per l'installazione ci si deve recare su Microsoft Translator Widget per configurare il gadget

Come dividere una sidebar di Blogger in più schede.

Questa personalizzazione utilizza l'effetto JQuery, l'ho testata con i vecchi template e anche con quelli nuovi del Designer Modelli. Il lavoro è stato realizzato da diversi autori ciascuno dei quali ha dato il proprio contributo. Li indicherò alla fine del post, da parte mia ho trovato il sistema per generalizzare la personalizzazione a tutti i modelli di Blogger. Essendo l'effetto basato su JQuery, può essere incompatibile con altri script tipo Prototype o Scriptaculous. Prima di procedere ecco come si presenterà la sidebar dopo questa personalizzazione

Menù JQuery Accordion per nuovi modelli di Blogger.

JQuery è uno software framework in javascipt che permette una grande personalizzazione dal lato client. Uno degli effetti più comuni è quello della dissolvenza che permette di far scomparire l'elemento con un effetto slide. Il menù che vado a presentarvi si basa in particolare sulla libreria Accordion e lo avevo già presentato qualche tempo fa. L'obiettivo è stato quello di renderlo compatibile anche con i nuovi template di Blogger ottenuti con il Designer Modelli.

Demo del Menù Accordion -

Il menù è situato nella sidebar di sinistra ma può essere messo anche a destra e personalizzato come dimensioni, colori e font. Ciascuna voce principale può nascondere un indefinito numero di voci secondarie che verranno aperte cliccandoci sopra con il mouse

Popup Menù compatibile con i template del Designer Modelli di Blogger.

Quello che vado a presentarvi è un menù molto particolare che ha le seguenti caratteristiche:

     E' multilivello e possono essere inserite moltissime voci

     E' utilizzabile soprattutto in una sidebar di sinistra

     Si può inserire questo menù contestualmente in qualsiasi link dentro un post o un widget

     Funziona con il modello Semplice del Designer Modelli e quindi è presumibile che non abbia       problemi anche con gli altri template più recenti

     Si visualizza correttamente anche con Internet Explorer anche se con questo browser è un po' più lento.

Prima di procedere all'installazione ecco come si presenta il menù quando si punta una delle sue voci con il mouse

Come inserire uno sfondo o una immagine di background in un widget.

I gadget o widget che dir si voglia sono univocamente determinati dal loro nome o comunque da un numero, se non abbiamo inserito alcun titolo. Ciascuno di essi inizierà con il codice

<b:widget id=...

e terminerà con la riga

</b:widget>

Per modificare lo sfondo di un widget dobbiamo innanzitutto scoprirne l'ID. Andiamo quindi in Design > Modifica HTML e espandiamo i modelli widget. Per rendere le cose più chiare vediamo come inserire uno sfondo al widget degli Ultimi Commenti. Cliccando su F3 o su Ctrl+F e digitando il nome del widget si trova subito la riga corrispondente. In questo caso

Come eliminare o ingrandire i bordi delle sidebar in Blogger.

Nei modelli di Blogger è quasi sempre presente una linea di divisione tra l'area del post (main-wrapper) e quella della sidebar (sidebar-wrapper) o delle sidebar, se ce ne sono più di una. Nei vecchi modelli si possono agevolmente modificare le impostazioni delle sidebar andando su Design > Modifica HTML e cercando il foglio di stile relativo alla sidebar. I fogli di stile (CSS) sono individuabili perché iniziano con un punto oppure con un cancelletto.

Se si ha una sola sidebar dovremo quindi cercare le righe .sidebar oppure #sidebar. Nel blocco di codice sotto di queste, ci dovrebbe essere il parametro border che si riferisce appunto alla linea di separazione. Ecco cosa si trova per esempio in questo modello