Mostrare contenuti suddivisi in schede in una pagina web.

Come mostrare contenuti in più schede e visualizzarle cliccando sulla linguetta di ciascuna di esse. I contenuti possono essere testo formattato, immagini, video, widget.

Nelle versioni online di celebri testate giornalistiche sono molto usate delle colonne multitab per mostrare più contenuti in uno stesso spazio. Sarà poi il lettore a cliccare sulla linguetta della scheda che vuole visualizzare. Per avere questa funzionalità anche su Blogger c'era la tendenza a modificare il modello per suddividere la sidebar in più schede. In questo post invece rovescerò il problema creando un codice per mostrare dei contenuti su più schede che può essere inserito in qualsiasi pagina web quindi in un post, in una pagina statica o anche in un gadget HTML/Javascript.

All'interno delle varie schede possono essere inseriti semplice testo formattato, immagini, video o anche widget. Con questo sistema si potrà risparmiare spazio e favorire la visione dei nostri contenuti

Il codice che vado a mostrare come detto può essere incollato in un post o in una pagina statica andando su HTML invece che su Scrivi. Si può anche incollare in un widget selezionando Layout > Aggiungi un gadget > HTML/Javascript e incollando il codice in Sezioni del sito. Come è abitudine di questo sito ho anche testato il funzionamento dell'hack in un post di prova

Il codice da incollare nelle pagine web anche di piattaforme non Blogger è il seguente:

<style>
::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}
::-webkit-scrollbar{width: 6px; background-color: #F5F5F5;}
::-webkit-scrollbar-thumb{background-color: #008E00;}
#contenuto ul{display:inline; list-style-type:none;}
#contenuto ul > li{background:#33FF00;cursor:pointer;background:-moz-linear-gradient(90deg, #33FF00 0%, #008E00 100%);background:-webkit-linear-gradient(90deg, #33FF00 0%, #008E00 100%);background:-o-linear-gradient(90deg, #33FF00 0%, #008E00 100%);background:-ms-linear-gradient(90deg, #33FF00 0%, #008E00 100%);background:linear-gradient(180deg, #33FF00 0%, #008E00 100%); padding:7px; float:left; margin-right:5px; -moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; border-top-left-radius:5px; -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; border-top-right-radius:5px;}
#contenuto ul > li a{color:#fff; text-decoration:none; font-weight:bold;}
#contenuto ul > li a:hover{color:#CCFE80}
#tabcontent{width:400px; height:400px; padding:5px; background-color:#eee; margin-top:15px; -webkit-box-shadow:3px 3px 5px rgba(50, 50, 50, 0.75); -moz-box-shadow:3px 3px 5px rgba(50, 50, 50, 0.75); box-shadow:3px 3px 5px rgba(50, 50, 50, 0.75); -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; border-top-right-radius:5px; -moz-border-radius-bottomright:5px; -webkit-border-bottom-right-radius:5px; border-bottom-right-radius:5px; -moz-border-radius-bottomleft:5px; -webkit-border-bottom-left-radius:5px; border-bottom-left-radius:5px;}
#tab1{height:400px; overflow-x:hidden;}
#tab2, #tab3, #tab4, #tab5 {height:400px; overflow-x:hidden; display:none;}
</style>
<!--[if IE]>
<style type="text/css">
#contenuto ul li a{background-color:#33FF00; color:#fff; display:inline; padding:5px; margin-left:5px; float:left; text-decoration:none; font-weight:bold; font-family:Georgia;}
</style>
<![endif]-->
<script>
//<![CDATA[
function contenuto(tabid) {for (i=1; i<6; i++){if (i == tabid) {var j = "tab" + i ;document.getElementById(j).style.display='block';}else {var k = "tab" + i ;document.getElementById(k).style.display='none';}}}
//]]>
</script>
<div id='contenuto'>
<ul>
<li><a onclick='contenuto(1)'>Scheda1</a></li>
<li><a onclick='contenuto(2)'>Scheda2</a></li>
<li><a onclick='contenuto(3)'>Scheda3</a></li>
<li><a onclick='contenuto(4)'>Scheda4</a></li>
<li><a onclick='contenuto(5)'>Scheda5</a></li>
</ul>
<div id='tabcontent'>
<div id='tab1'>Contenuto prima scheda</div>
<div id='tab2'>Contenuto seconda scheda</div>
<div id='tab3'>Contenuto terza scheda</div>
<div id='tab4'>Contenuto quarta scheda</div>
<div id='tab5'>Contenuto quinta scheda</div>
</div>
</div>

PERSONALIZZAZIONI PIU' IMPORTANTI

1. Le dimensioni proposte di tutto il contenitore sono 400 di altezza e 400 di larghezza
2. Si possono modificare i codici dei colori per rendere le schede intonate all'aspetto del nostro blog. Nelle linguette delle schede è stato usato anche il gradiente, la trasparenza e l'ombreggiatura
3. Gli arrotondamenti possono essere modificati agendo su border-top-left-radius e su border-top-right-radius cambiando il raggio di curvatura 
4. Il nome visualizzato nelle varie linguette sarà Scheda1, Scheda2, ecc e può essere modificato così come la famiglia di caratteri (Georgia)
5. Al posto dei Contenuti delle varie schede può essere incollato il codice di un testo formattato oppure di un video, di immagini con testo o anche il codice di un widget come mostrato nella demo.
6. Si possono aggiungere anche altre schede. Per inserire la settima bisogna modificare i<6; con i<7; e inserire #tab6 preceduto da una virgola accanto a #tab5. Bisognerà quindi aggiungere due nuove righe con la stessa sintassi di quelle precedenti nella parte finale del codice.