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

<!-- Multitab Inizio -->
<script src='https://sites.google.com/site/scriptperilblog/widget-1/tabber.js' type='text/javascript'/>
<noscript><a href='http://goo.gl/LCvCS' target='_blank'><span style='font-size:small;'>Multi Tabbed Widget</span></a></noscript>
<style>
.tabberlive .tabbertabhide {
display:none;
}
.tabber {
}
.tabberlive {
margin-top:1em;
}
ul.tabbernav
{
margin:0;
padding: 3px 0;
border-bottom: 1px solid #003366;
font: bold 12px Verdana, sans-serif;
}
ul.tabbernav li
{
list-style: none;
margin: 0;
display: inline;
}
ul.tabbernav li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #777788;
border-bottom: none;
background: #DDDDEE;
text-decoration: none;
}
ul.tabbernav li a:link { color: #444488; }
ul.tabbernav li a:visited { color: #666677;
}
ul.tabbernav li a:hover
{
color: #000000;
background: #AAAAEE;
border-color: #222277;
}
ul.tabbernav li.tabberactive a
{
background-color: #ffffff;
border-bottom: 1px solid #ffffff;
}
ul.tabbernav li.tabberactive a:hover
{
color: #000000;
background: white;
border-bottom: 1px solid white;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid #aaaaaa;
border-top:0;
}
/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
height:200px;
overflow:auto;
}
</style>
<!-- Multitab Fine - www.ideepercomputeredinternet.com -->

Ho colorato di rosso i principali parametri che possono essere soggetti a personalizzazioni. I meno esperti possono consultare i post sui codici dei colori e sugli stili dei bordi. Ricordo anche che, oltre che in codice esadecimale, un colore può essere indicato dal suo nome (Es: white è come #FFFFFF). I colori che si riferiscono a a:link riguardano i collegamenti, quelli con a:visited i collegamenti già aperti e infine con a:hover si denotano quelli puntati con il mouse. La parte di codice che sta sotto al commento colorato di viola fino a </style> (escluso perché chiusura del CSS), serve per nascondere il titolo della scheda all'interno del widget.

I contenuti delle diverse schede devono essere inseriti in Design > Aggiungi un gadget > HTML/Javascript con questa sintassi

<div class="tabber">
<div class="tabbertab">
<h2>Scheda 1</h2>
<p>HTML della Scheda 1</p>
</div>
<div class="tabbertab">
<h2>Scheda 2</h2>
<p>HTML della Scheda 2</p>
</div>
<div class="tabbertab">
<h2>Scheda 3</h2>
<p>HTML della Scheda 3</p>
</div>
<div class="tabbertab">
<h2>Scheda 4</h2>
<p>HTML della Scheda 4</p>
</div>
</div>

dove in Scheda X si inserisce il nome della scheda (Foto, Video, ecc) mentre in HTML della Scheda X, il codice HTML relativo al singolo widget. Si possono inserire tutte le schede che si vuole: il limite è dato dal layout e dalla posizione di inserimento. In una sidebar è difficile inserire più di quattro o cinque schede ma, se si inserisce il widget sopra o sotto l'area del post, allora è possibile creare anche una decina di schede. Andate a vedere la

• Demo del widget suddiviso in schede -

Ho inserito foto animate, slideshow e video ma non c'è limite alla fantasia. Questo metodo di presentare i contenuti del blog viene usato da un sito prestigioso quale la Repubblica dove nella parte alta della sidebar di destra si visualizzano tre schede che possono essere selezionate singolarmente dal navigatore. E' utile per risparmiare spazio e offrire al lettore più possibilità di scelta.

Fonte | BarelyFitz Design -