Come mostrare in una pagina web dei contenuti divisi in schede cliccabili.

Come mostrare un contenitore con il contenuto, anche nascosto, suddiviso in schede con bottoni in modo da visualizzare solo quello che contiene la scheda cliccata

Al blogger mancano due cose sopra alle altre: il tempo e lo spazio. Non si riesce mai ad avere quei minuti di tempo necessari per scrivere un nuovo post o per rispondere ai commenti e d'altra parte non si riesce a concentrare nel layout tutti quei contenuti che si vorrebbero.

Con questo articolo non ho la presunzione di dare delle dritte per ottimizzare il tempo ma di dare un modesto contributo a quegli amministratori di siti su Blogger, Wordpress, o qualsiasi altra piattaforma che consenta l'utilizzo di HTML, CSS e javascript, di organizzare i contenuti suddivisi in schede con relativi pulsanti. In questo modo il lettore potrà cliccare sul nome del bottone per visualizzare il contenuto relativo e potranno essere mostrati molti più contenuti nello stesso spazio di layout.

Mostrerò due possibili configurazioni. Con la prima si mostreranno i contenuti immediatamente mentre con la seconda saranno nascosti fino al click del lettore. La prima opzione può essere utile per organizzare in schede tecniche le recensioni di un prodotto mentre la seconda è più indicata in situazioni in cui occorre inserire uno spoiler come recensioni di film, libri o fiction televisive.

COME DIVIDERE I CONTENUTI IN SCHEDE

Come vedete nello screenshot precedente a seconda di quale bottone si schiacci con il mouse verranno mostrati dei contenuti anche molto diversi tra di loro. In un post di Blogger in Modalità HTML o in una qualsiasi altra pagina web va incollato un codice come questo

<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>

Si pubblica la pagina come al solito. Le personalizzazioni più importanti riguardano:

1. Le dimensioni del contenitore che è 400x400 pixel
2. I codici dei colori per rendere le schede intonate ai colori del sito. Sono stati anche usati gradiente e trasparenza per dare un effetto rilievo ai pulsanti.
3. Il nome visualizzato sulle varie schede: Scheda1, Scheda2, ecc
4. La famiglia dei font Georgia
5. Al posto dei contenuti delle schede si mette il codice di quello che si vuole mostrare. Può essere quello di un testo formattato, di una immagine, di un video o di queste cose insieme.
6. Si possono aggiungere anche altre schede. Per inserire la sesta 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.

Demo
Clicca qui

COME MOSTRARE I CONTENUTI IN SCHEDE NASCOSTE

Se si desidera non mostrare immediatamente i contenuti ma renderli visibili solo dopo che un lettore ha cliccato su un pulsante si può usare questa seconda tecnica. Il codice da incollare sempre in Modalità HTML in una qualsiasi pagina web è il seguente

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script><style>
#menu_about a {
font-size:20px;
font-weight:500;
color:#036 !important;
}
#pages_about {
width:500px;
border:1px solid #00f;font-size:16px;
}
</style><div align='center'>
<div id="menu_about">
<a class="link" href="#about" data-link="first">
   &nbsp; Opzione1</a> &#8226;
<a class="link" href="#about" data-link="second">Opzione2</a> &#8226;
<a class="link" href="#about" data-link="third">Opzione3</a> &#8226;
<a class="link" href="#about" data-link="fourth">Opzione4</a> &#8226;
<a class="link" href="#about" data-link="fifth">Opzione5</a></div>
<div id="pages_about" class="textContainer_about">
<div class="textWord_about" data-link="first">
<p> <span style='color:red;'>Questo testo è visibile quando si clicca sulla Opzione1</span><br/>Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante orci, molestie vitae, vehicula venenatis, tincidunt ac, pede. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor</p></div>
<div class="textWord_about" data-link="second">
<p> <span style='color:blue;'>Questo testo è visibile quando si clicca sulla Opzione2</span><br/>Aliquam in lorem sit amet leo accumsan lacinia. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus et lorem id felis nonummy placerat. </p>
</div>
<div class="textWord_about" data-link="third">
<p> <span style='color:green;'>Questo testo è visibile quando si clicca sulla Opzione3</span><br/>Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aenean vel massa quis mauris vehicula lacinia. Quisque tincidunt scelerisque libero. Maecenas libero. Etiam dictum tincidunt diam. </p></div>
<div class="textWord_about" data-link="fourth">
<p> <span style='color:orange;'>Questo testo è visibile quando si clicca sulla Opzione4</span><br/>Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Suspendisse nisl. Sed convallis magna eu sem. Cras pede libero, dapibus nec, pretium sit amet, tempor quis, urna. </p></div>
<div class="textWord_about" data-link="fifth">
<p> <span style='color: brown;'>Questo testo è visibile quando si clicca sulla Opzione5</span><br/>In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p></div>
</div>
</div>
<script type="text/javascript">
$('.textWord_about').hide();
$('.link').click(function() {
    $('.textWord_about').hide();     
    $('.textWord_about[data-link=' + $(this).data('link') + ']').fadeIn({
        width: '200px'
    }, 300);
});
</script>

Se usate Blogger dovete sempre pubblicare da HTML e non da Scrivi altrimenti Blogger inserirà dei link in modo automatico. Anche nel caso di modifiche si deve sempre andare su Modifica HTML e controllare che non siano stati inseriti dei collegamenti da Blogger.

PERSONALIZZAZIONE DELLO SCRIPT

La riga di codice evidenziata di giallo è la libreria jQuery e se fosse già presente nel modello è meglio tralasciarla. Si possono modificare i codici dei colori dei link e le dimensioni dei loro caratteri  (20px). Si può anche configurare lo stile del bordo del rettangolo del contenitore.

Il codice evidenziato di grigio inserito in ciascuna scheda compreso tra <p> e </p> è puramente indicativo e possono essere inseriti altri elementi oltre al testo formattato. Se si volessero creare solo 4 opzioni invece di 5 basterebbe cancellare la riga evidenziata di celeste.   

COME INSTALLARE LO SCRIPT NEL MODELLO DI BLOGGER

Questo codice può essere incollato in modalità HTML in un post di Blogger ma può anche essere in parte incollato nel modello (CSS e javascript) per pubblicare nel post solo la parte HTML. In questa seconda ipotesi dopo aver salvato il template si va su Modello -> Modifica HTML e si cerca la riga </head> quindi subito sopra a questa si incolla la riga evidenziata di giallo sempre che non ci sia jQuery. Successivamente si cerca la riga </body> e, subito sopra, si incolla questo codice

<script type='text/javascript'>
//<![CDATA[
$('.textWord_about').hide();
$('.link').click(function() {
    $('.textWord_about').hide();    
    $('.textWord_about[data-link=' + $(this).data('link') + ']').fadeIn({
        width: '200px'
    }, 300);
});
//]]>
</script>

Demo
Clicca qui

che è leggermente diverso da quello evidenziato di beige che non sarebbe salvato da Blogger. Quando si vorrà pubblicare un contenitore a più opzioni basterà quindi incollare solo la parte di codice non evidenziata di giallo, di verde e di beige. Concludo ricordando che 300 è la velocità con cui viene mostrato e nascosto un contenuto di una scheda.