31 maggio 2011 Ultimo aggiornamento:

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.
schede multiple in una sidebar di Blogger 
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
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.



33 commenti :

  1. sempre geniale...e tremendamente utile!!! Ernesto for president!

    RispondiElimina
  2. Wwwwooooooooooooooohhhhhhhhhhhhhh!!!!!

    RispondiElimina
  3. E se lo volessi inserire all'interno del modello?


    IL MONTES

    RispondiElimina
  4. @Il Montes
    Non ti saprei dire nulla sul procedimento. Però ci sono dei modelli già strutturati in schede quindi è possibile.

    RispondiElimina
  5. Mmm... siamo troppo sullo specifico :D Me la cavo.. ma non fino a questo punto. Però peccato questo limite! Perchè ad esempio io la maggior parte degli elementi li tengo incorporati nel modello. Avevo pensato di fare una cosa carina con questo post, ma non vedo alternative.. inserendo il codice finale mi da l'errore. Qualcosa come "assicurati che tutti i tag di chiusura siano inseriti. Ma i tag di chiusura nn centrano.

    RispondiElimina
  6. @Il Montes
    Prova a convertire il codice in XML con Blogcrowds. Come tentativo, non è detto che funzioni...

    RispondiElimina
  7. Veramente bello! Ora lo monto! :) Occhio che nel codice html da inserire in aggiungi widget manca un "<" nella scheda 4

    RispondiElimina
  8. bel widget ora lo provo! ernesto volevo chiederti una cosa che non c'entra molto con questo tema. come è posibile inserire una skin di background in blogger?Sarebbe interessante inserire una pubblicità di background come si vedono in tanti siti da qulche tempo a questa parte.

    RispondiElimina
  9. @Lucky73
    Grazie,ora provvedo a correggere, mi era sfuggita.

    @Tutti...
    Inserire un background con un link si può sempre fare. Ma se deve essere una pubblicità devi avere un contratto con l'inserzionista e allora il codice te lo danno loro direttamente.

    RispondiElimina
  10. ah ok,quindi con i codici ad sense non si potrebbe fare?

    RispondiElimina
  11. Assolutamente no. La pubblicità è una cosa seria, si possono inserire solo i codici che ci vengono forniti e con le modalità previste nel contratto.

    RispondiElimina
  12. hai ragione infatti non c'è nulla di simile su ad sense.quelli che ho visto se hai presente sono tiscali,libeo,mediaword.grazie per la gentileza,come sempre unico,sapiente ed esperto!

    RispondiElimina
  13. Si funziona con la conversione :D.. ma funziona anche con il codice. Era dovuto all'errore di scrittura nella scheda 4. Cmq L'idea era quella di adottarlo appena sopra lo slider creando qualche altra sezione nevigabile con l'efetto. Ma non so perchè, nel mio template lo script perde tempo a caricarsi dando per almeno 5 secondi tutti gli elementi in fila risultando antiestetico per quel tempo. Sul tuo demo invece carica quasi instantaneamente. Forse Incompatibilità con qualche altro script? Eppure ce ne sono davvero pochi... I piu essenziali... Sono sul punto d'abbandonare la modifica, preferisco la velocita di caricamento anche se mi dispiace! Nota anche la lentezza sul mio blog di prova: http://ilmontesreflection.blogspot.com/

    Con firefox ed explorer 7 sucedde questo. Con chrome invece e quasi istantaneo. C'è un motivo? Qualche stratagemma risolutivo?

    RispondiElimina
  14. @Il Montes
    Le differenze di comportamento tra i vari browser sono sempre qualcosa di imperscrutabile :)

    RispondiElimina
  15. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  16. Alla fine c'è L'ho fatta!! Qualche settimana di lavoro, ma sono riuscito.. Ho modificato il Simple-Slider in modo che assomigli e abbia il funzionamento di un tabs :D. Lo "slide-tabs" presenta sezioni in cima e nel caso della (SUPPORTED PRODUCERS) altrettanti bottoni navigabili in basso che fanno scorrere le immagini della sezione in questione^^ (Ovviamente vorrei precisare che va solamente bene per le immagini) Insomma una modifica fatta per le mie esigenze s'intende! La cosa che mi entusiasma che ancora una volta, non carico nessun script (e la velocita di caricamento e praticamente eccezionale).. non ho dovuto rinunciare ai tool-tip (solo con css) indicativi sulle immagini.. e in fine le immagini che portano ad un link! :) Credo d'aver fatto anche stavolta un buon lavoro, senza tralasciare tutto il lavoro di grafica che c'è dietro per rendere più morbido il tutto ^^. L'unica pecca è.. che al click delle sezioni, il bottone ha solo una transizione di colore fin quando la freccia del mouse e sopra a questo, quando invece in un tabs, scelta la sezione, la transizione avviene permanente su questo :( ho fatto svariate prove sulle proprieta della gestione dei link (a:link, visited, hover, focus,active). Documentandomi L'active mi era sembra quello giusto.. ma nel mio caso nn andava o molto probabilmente sbagliavo la sintassi nel css :S Tu hai qualche asso nella manica :) per risolvere questa piccola cosa?
    Per il resto.. testato con Fire-fox/Opera/Chome/Explorer 7-8-9
    (su quest'ultimo browser ci sarà una piccola disfunzione sui bottoni alti, purtroppo determinata dal border-radius e dallo shadow che IE non supporta)
    Si può visualizzare lo slider nel mi blog: http://ilmontespushermusic.blogspot.com/
    Alla prossima! Grazie ancora per la spinta verso un'idea :)
    IL MONTES

    RispondiElimina
  17. @Il Montes
    grazie di aver condiviso il tuo entusiasmo contagioso ^_^

    RispondiElimina
  18. A me non funziona, come posso fare?

    Mi si visualizza un widget sotto l'altro tutti attaccati.

    RispondiElimina
  19. @Manager
    Se non hai fatto errori significa che nel tuo modello ci sono già degli script incompatibili con quello di questa personalizzazione

    RispondiElimina
  20. se io ti posto tutto il codice del modello me lo puoi modificare?, così mi funziona.

    RispondiElimina
  21. @Manager
    Magari fossi in grado di far funzionare tutto così :), lo farei anche con il mio sito :P

    RispondiElimina
  22. percui ora che dovrei fare? dovrei cambiare template? e se si, se sai, me ne puoi consigliare uno a 3colonne. grazie.

    RispondiElimina
  23. @Manager
    Ti devi mettere nella idea che su Blogger non è possibile fare tutto. Delle personalizzazioni sono possibili, altre non lo sono. Se si scelgono modelli già personalizzati queste sono ancora più difficoltose. Una raccolta di siti in cui trovare modelli per Blogger la puoi trovare qui
    http://www.ideepercomputeredinternet.com/2009/01/la-pi-grande-collezione-di-template-e.html

    RispondiElimina
  24. ho usato uno dei template ufficiali di blogger e nemmeno con quelli funziona. è possibile?

    RispondiElimina
  25. @Manager
    E' possibile perché l'ho testato in un vecchio modello come puoi vedere dalla demo
    http://demo-parsifal32.blogspot.com/2011/05/demo-della-funzione-multitab-per.html
    che adesso non è più disponibile

    RispondiElimina
  26. ciao sono riuscito a metterlo, il problema è che fra un bottone e l'altro c'è tot. spazio come lo diminuisco.

    RispondiElimina
  27. @Manager
    Cerca di modificare la lunghezza del titolo di ogni scheda. Poi prova a mettere dei numeri negativi a margin cioè metti una riga così
    margin:0 -10px 0 -10px;
    Poi vedi un po' che succede e puoi modificare i valori.

    RispondiElimina
  28. domanda: se volessi inserire in questo widget le visite, GFC e la blogroll... quale codice dovrei mettere dato che sono widget predefiniti?

    RispondiElimina
  29. @Soffio di Dea
    Il codice lo metti in HTML della Scheda 1 o 2 o 3. Per il blogroll temo invece che ci sia poco da fare perché non ha codice.

    RispondiElimina
  30. Io uso il tema SIMPLE, quello standard di Blogger, forse il più semplice tra tutti e che potrebbe essere lo stesso che hai tu. Ho un dominio personalizzato e il file js l'ho caricato su Google Drive con la procedura del .HTML ma alla fine il risultato è questo:
    http://imgur.com/6wBugKu Sbaglio io qualcosa o è proprio?

    RispondiElimina
    Risposte
    1. @# Il post ha quasi 2 anni e può darsi che da allora le cose siano cambiate per quello che riguardo il codice

      Elimina
    2. Si l'ho notato però avevo visto che a te andava. Ma non esiste qualcosa di simile per la sidebar di alternativo? Perché io avrei voluto inserire una chat e poi cliccando sulla scheda 2 invece sarebbe dovevo fare in modo che si oscurasse ad esempio con un immagine...

      Elimina
    3. @# Prova questo
      http://www.ideepercomputeredinternet.com/2011/03/come-dividere-una-sidebar-di-blogger-in.html

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.