Pubblicato il 26/11/13e aggiornato il

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

schede-multitab

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.




13 commenti :

  1. Questo widget è utile quando devo inserire più video in un post... :)

    RispondiElimina
  2. Negli ultimi giorni cercavo proprio una personalizzazione del genere, visto che non riesco a far funzionare il multi-tabbed widget. So di avertelo già chiesto in passato, ma ti ripeto la domanda: hai il dono della telepatia? :)

    E.

    RispondiElimina
  3. Mi rivolgo a te perché ne sai sempre una più del diavolo. Ho un problemino con le anteprime di Fb quando condivido un post. Praticamente non usa le immagini che ci sono nel post.
    Ho spulciato su tutti i forum e le domande già poste, ma non sono riuscita a trovare la risposta a questo errore
    Carico le foto da sempre dal pc
    allora ho provato con il caricatore di picasa, ma è peggio
    L'unica foto che carica è quella del mio profilo google plus
    Inoltre ho trovato che esistono degli Html da aggiungere a head ma solo per i blog di Wordpress
    E ho provato anche con il debug di fb (qui https://developers.facebook.com/tools/debug) dove, per l'ultimo post, mi diceva che le foto erano di meno di 200 px. Il problema è che le mie foto sono belle grandi perché scattate con la reflex e non mi spiego perché mi indichi questa cosa.
    ho provato anche a caricarle su photobucket e successivamente ad aggiungerle da "url" ma niente.
    comincio a credere che forse le foto del post siano troppo grandi, e forse non le riesce a caricare. Se per esempio infatti prendo delle foto su internet, di circa 100 kb non ha difficoltà nel caricamento. purtroppo le foto sul blog mi servono di buona qualità...forse riducendo i pixel si sgranerebbero.
    Illuminami!

    RispondiElimina
    Risposte
    1. Segui queste istruzioni
      http://www.ideepercomputeredinternet.com/2013/03/open-graph-facebook.html
      dopo aver attivato le Preferenze di ricerca su Blogger
      http://www.ideepercomputeredinternet.com/2012/03/come-personalizzare-le-preferenze-di.html
      soprattutto per quello che riguarda la descrizione del post
      @#

      Elimina
    2. Ciao Ernesto! Ho risolto con le anteprime, bastava ridimensionare le foto a 500 px come c'era scritto nei post tuoi. Una domanda per organizzare meglio il blog: è possibile in blogger mettere i bottoni sociali nella headline del blog? Il mio blog è questo http://lostilediartemide.blogspot.it: per intenderci volevo sapere se si possono spostare sotto la scritta Fashion blog, nel titolo ecco. Grazie a presto!

      Elimina
  4. Ciao, ho modificato leggermente il codice per far si che, al passaggio del mouse, oltre a cambiare il colore del testo cambi anche il colore del background.
    Ho incontrato però un piccolo problema: vorrei che il background (sempre al passaggio del mouse) venisse riempito completamente, invece continua a tagliarmi fuori dall'area colorata un sottile bordo. E' un pò che ci provo senza risultati.

    Tu hai qualche idea?
    Grazie

    RispondiElimina
    Risposte
    1. Risolto da solo, è bastato sostituire "#contenuto ul > li a:hover" con "#contenuto ul > li:hover" :)

      Elimina
    2. Un'altra cosa: volendo inserire in uno dei tab un widget NON esterno (per esempio il profilo blogger dell'autore o il widget "archivio del blog") c'è un modo?
      Ho provato prelevando il codice del relativo widget direttamente dal template, ma probabilmente va cambiato (o rimosso) qualcosa nel codice dello stesso widget perché funzioni.

      Elimina
    3. I widget nativi di Blogger utilizzano dei tag specifici
      http://www.ideepercomputeredinternet.com/2012/01/cosa-sono-e-cosa-significano-i-tag-di.html
      che funzionano solo nel modello o anche nei gadget HTML/Javascript ma non nelle normali pagine web come quelle che si editano nei post o nelle pagine statiche. Per alcuni widget come il modulo di contatto sono stati trovati i codici
      http://www.ideepercomputeredinternet.com/2013/05/modulo-contatto-blogger_27.html
      ma per altri non è stato ancora possibile. Non escludo che in rete ci sia qualcuno a cui sia riuscito per esempio ricavare il codice dell'Archivio ma se c'è non ne sono a conoscenza
      @#

      Elimina
    4. E' questo che non capisco: il menu a tab è inserito in un widget html/javascript, eppure nonostante tutto ho provato a prendere l'intero codice del widget -per esempio- del mio profilo autore (da a ) e ad inserirlo in uno a caso dei div (tab1,2,3 etc.) ma lo stesso non ha funzionato :(

      Elimina
  5. Ciao.
    Complimenti per il tuo lavoro.
    ho provato a modificare un po' il codice per togliere il cambio di colore al passaggio del mouse sui tab e per far modificare il colore della scritta dei tab una volta cliccato. Ho provato con a:active, ma non funziona. Come si può fare?

    Inoltre, è possibile mettere una linea di sfondo sotto le etichette dei tab?

    Comunque, Grazie.
    Ciao.

    RispondiElimina
    Risposte
    1. Prova a sostiuire a:hover con a:active. Non so se funzionerà mostrando il colore diverso dopo il click ma certamente non cambierà colore al passaggio del mouse. Per la linea orizzontale prova a aggiungere un border-bottom:1px solid #000;
      dopo border-top-right-radius:5px;
      Anche in questo caso non posso assicurare che funzioni
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.