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

Ciascuna scheda permette l'accesso a un widget diverso che può essere aperto con il click del mouse e si mostrerà con un effetto slide tipico di JQuery. Ho postato in rete due test che illustrano meglio di mille parole questa personalizzazione:

• Cucina Toscana - un vecchio blog in cui ho inserito le schede in alto a destra
• Sidebar Multitab - un blog di prova creato per l'occasione con il modello Awesome (Fantastico)

Dobbiamo andare su Design > Modifica HTML e salvare il modello completo per un eventuale backup. Si cerca la linea  ]]></b:skin> e, immediatamente sopra, si incolla il codice presentato in questa pagina di Google Documenti. I più bravi possono pensare anche a una personalizzazione dell'aspetto del CSS ma consiglio di farlo solo in un secondo tempo.

Adesso si cerca la riga </head> e, immediatamente sopra si incolla questo codice

<!-- jQuery Call and Script -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
var starttab=0;
var endtab=3;
var sidebarname=&quot;sidebar&quot;;
</script>
<script src='https://sites.google.com/site/scriptperilblog/widget-1/multitab.js' type='text/javascript'/>
<!-- End of jQuery Call and Script -->

Si salva il modello. I dati fondamentali da considerare sono evidenziati di rosso. Se si inseriscono i parametri var starttab=0; e var endtab=3; significa che le prime quattro schede (0, 1, 2, e 3) saranno raggruppate insieme in un unico elemento. Nel caso in cui si inserisse var endtab=2; le schede con questa proprietà sarebbero solo tre come si vede nel primo esempio. Si può anche decidere di iniziare la multitab con un elemento diverso dal primo modificando var starttab=0;. In Design > Elementi pagina i singoli widget saranno sempre visibili nello stesso modo

Bisogna considerare che la larghezza delle tabelle sarà determinata da quella del loro titolo, quindi sceglieteli particolarmente corti per non rischiare di vedere le schede su due linee con una estetica molto compromessa.
Un discorso a parte merita il parametro sidebar perché è quello che individua la colonna laterale. Nei vecchi modelli che ne hanno una sola non va cambiato nulla. Se si hanno dei dubbi bisogna andare su Modifica HTML e cercare i blocchi di codice che iniziano con
   <b:section…
In questo modo sarà possibile individuare il nome identificativo della sidebar

Questa operazione va fatta soprattutto se si hanno due o più sidebar. In genere in questi casi si possono chiamare sidebar1 e sidebar2 oppure sidebar-left e sidebar-right. Nei nuovi modelli si procede nello stesso identico modo per individuare l'ID della colonna. In questo caso però conviene cercare le occorrenze di sidebar andando su F3 

Nello screenshot precedente relativo al modello Awesome si vede che l'ID della sidebar è
id='sidebar-right-1'
Nel codice incollato sopra a </head> si sostituisce quindi questo parametro. La riga allora diventa
var sidebarname=&quot;sidebar-right-1&quot;;
dove il dato inserito è stato colorato di rosso. Concludo ricordando che

1. Lo script funziona per una sola sidebar per blog
2. Tutti gli elementi della multitab devono avere un titolo
3. Se alcuni widget della multitab sono basati su altri script ci possono essere delle incompatibilità

Fonti| Abu Fahran - BloggerTuts - Dante Araujo - Webitect -