Pubblicato il 07/03/11 - aggiornato il  | 30 commenti :

Come dividere una sidebar di Blogger in più schede.

Questa personalizzazione utilizza l'effetto JQuery, l'ho testata con i vecchi template e anche con quelli nuovi del Designer Modelli. Il lavoro è stato realizzato da diversi autori ciascuno dei quali ha dato il proprio contributo. Li indicherò alla fine del post, da parte mia ho trovato il sistema per generalizzare la personalizzazione a tutti i modelli di Blogger. Essendo l'effetto basato su JQuery, può essere incompatibile con altri script tipo Prototype o Scriptaculous. Prima di procedere ecco come si presenterà la sidebar dopo questa personalizzazione
multitab schede per blogger
Ciascuna scheda permette l'accesso a un widget diverso che può essere aperto con il click del mouse e si mostrerà con un effetto slide tipico di JQuery. Ho postato in rete due test che illustrano meglio di mille parole questa personalizzazione:
  • Cucina Toscana - un vecchio blog in cui ho inserito le schede in alto a destra
  • Sidebar Multitab - un blog di prova creato per l'occasione con il modello Awesome (Fantastico)
Dobbiamo andare su Design > Modifica HTML e salvare il modello completo per un eventuale backup. Si cerca la linea  ]]></b:skin> e, immediatamente sopra, si incolla il codice presentato in questa pagina di Google Documenti. I più bravi possono pensare anche a una personalizzazione dell'aspetto del CSS ma consiglio di farlo solo in un secondo tempo.
Adesso si cerca la riga </head> e, immediatamente sopra si incolla questo codice
<!-- jQuery Call and Script -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
var starttab=0;
var endtab=3;
var sidebarname=&quot;sidebar&quot;;
</script>
<script src='https://sites.google.com/site/scriptperilblog/widget-1/multitab.js' type='text/javascript'/>
<!-- End of jQuery Call and Script -->
Si salva il modello. I dati fondamentali da considerare sono evidenziati di rosso. Se si inseriscono i parametri var starttab=0; e var endtab=3; significa che le prime quattro schede (0, 1, 2, e 3) saranno raggruppate insieme in un unico elemento. Nel caso in cui si inserisse var endtab=2; le schede con questa proprietà sarebbero solo tre come si vede nel primo esempio. Si può anche decidere di iniziare la multitab con un elemento diverso dal primo modificando var starttab=0;. In Design > Elementi pagina i singoli widget saranno sempre visibili nello stesso modo
widget blogger numerazione
Bisogna considerare che la larghezza delle tabelle sarà determinata da quella del loro titolo, quindi sceglieteli particolarmente corti per non rischiare di vedere le schede su due linee con una estetica molto compromessa.
Un discorso a parte merita il parametro sidebar perché è quello che individua la colonna laterale. Nei vecchi modelli che ne hanno una sola non va cambiato nulla. Se si hanno dei dubbi bisogna andare su Modifica HTML e cercare i blocchi di codice che iniziano con
   <b:section…
In questo modo sarà possibile individuare il nome identificativo della sidebar
classe sidebar blogger
Questa operazione va fatta soprattutto se si hanno due o più sidebar. In genere in questi casi si possono chiamare sidebar1 e sidebar2 oppure sidebar-left e sidebar-right. Nei nuovi modelli si procede nello stesso identico modo per individuare l'ID della colonna. In questo caso però conviene cercare le occorrenze di sidebar andando su F3 
modello awesome una colonna
Nello screenshot precedente relativo al modello Awesome si vede che l'ID della sidebar è
id='sidebar-right-1'
Nel codice incollato sopra a </head> si sostituisce quindi questo parametro. La riga allora diventa
var sidebarname=&quot;sidebar-right-1&quot;;
dove il dato inserito è stato colorato di rosso. Concludo ricordando che
  1. Lo script funziona per una sola sidebar per blog
  2. Tutti gli elementi della multitab devono avere un titolo
  3. Se alcuni widget della multitab sono basati su altri script ci possono essere delle incompatibilità
Fonti| Abu Fahran - BloggerTuts - Dante Araujo - Webitect -




30 commenti :

  1. non so se amarti o odiarti in questo momento :) ci sto lavorando su da ieri senza risultati -.- se avessi capito che ci stavi mettendo mano avrei semplicemente aspettato senza scervellarmi :D ora provo tutto, speriamo vada. Torno a dirti più tardi. Grazie :)

    RispondiElimina
  2. che stupida c'ero anche arrivata ieri ma dato che mi dà con explorer dei punti strani sotto... lo avevo tolto. Ora vedo di configurare il css magari dipende da quello. Il tuo genio è imbattibile :) grazie mille.

    RispondiElimina
  3. @Soffio di Dea
    Amore e Odio, Eros e Thanatos, il dualismo di Empedocle e Freud ^:^

    RispondiElimina
  4. Davvero d'interessante! Peccato l'incompatibilità con aculos :(

    Ma non c'è qualcosa di più semplice che nn adotti script?
    Guarda sul sito della repubblica.it http://www.repubblica.it/index.html?refresh_ce
    nella sidebar destra. Il funzionamento è quello solo che nn c'è lo scorrimento.
    E possibile fare qualcosa dle genere su una sideba di blogger??

    RispondiElimina
  5. domanda: per mettere il testo non tutto maiuscolo... text-transform:uppercase ...al posto di uppercase che devo mettere: normal... false o none?

    RispondiElimina
  6. @Il Montes
    Siamo su Blogger, non possiamo accedere al file manager.

    @Soffio di Dea
    Prova semplicemente a togliere tutta la riga se non vuoi le maiuscole

    RispondiElimina
  7. ho messo none... e nn compare più grazie mille :)

    Cmnq per Il Montes: ieri ho provato diversi codici tabber per sidebar... ce ne sono alcuni anche come semplici tabelle dove devi mettere l'elemento di pagina e il contenuto in html all'interno... però non li ho presi in considerazione perché credo si possano inglobare solo link o cmnq widget di cui si conosce l'html... ad esempio della blogroll (che a me interessava) non è facile ricavarsi l'html per cui non avrei potuto metterla. Se a lui interessa inserire solo widget in html noto magari può usare quelli.
    Ernesto puoi ammirare il nostro capolavoro sul mio blog :D (mi prendo il merito per la parte grafica... :P) grazie mille! Genio e Colto!

    RispondiElimina
  8. @Soffio di Dea
    Fai in modo che i widget rimangano su una stessa linea accorciando i nomi o mettendone solo tre

    RispondiElimina
  9. forse li hai visti quando stavo modificando... a me appaiono sulla stessa linea -.- ho un'ultima richiesta per te... "se e quando avrai tempo e voglia"... un modo per mettere la casella ricerca in alto a destra come in molti template che si scaricano... (grazie in anticipo)

    RispondiElimina
  10. @Soffio di Dea
    Io li vedo su due linee con tutti i browser. Forse tu hai uno schermo largo 1920 pixel...
    Prova a testare come si vede il sito con le diverse risoluzioni
    http://testsize.com/

    RispondiElimina
  11. che risoluzione hai tu? Sto provando varie ma sembrano in fila... ma anche tu vedi la sbarra sotto che si muove? Che brutta :(

    RispondiElimina
  12. ne ho messi 3 speriamo sia risolto. Grazie per avermi avvisata. Kiss

    RispondiElimina
  13. @Soffio di Dea
    Con il computer a widescreen si vede bene ma con il portatile c'è "roll" che va ancora accapo. Puoi lasciare anche così ma se riesci a rimpicciolire i caratteri è meglio per chi ti segue con una risoluzione non molto elevata.
    Poi te l'ho detto anche prima di crearlo questo modello che per me era troppo largo. Non si possono passare i 1000 pixel. Adesso ci sono gli iPhone e 950 sarebbe l'ideale. In alternativa potresti allargare leggermente la sidebar a rimpicciolire l'area del post.

    RispondiElimina
  14. il problema è che ho i post con immagini da 800 px se rimpicciolisco dovrei rimpicciolire tutto... nun glia fo... ok aggiusto la tab... grazie

    RispondiElimina
  15. ma anche il tuo è largo... quindi c'è lo stesso problema? O su minima non appare la sbarra sotto?

    RispondiElimina
  16. @Soffio di Dea
    Questo blog si vede bene con la risoluzione dei portatili. C'è qualche problema solo se si ha una risoluzione più bassa ma non ho inserito le schede. Nel blog di prova, in cui le ho messe, ho fatto attenzione a dare dei nomi corti per far entrare tutto il widget in una stessa riga.
    Poi questo non è il modello Minima ma è un template senza larghezza definita. E' width="100%" quindi si adatta automaticamente allo schermo. Purtroppo modelli come questo non sono più disponibili.
    P.S Il template si chiama Tekka.

    RispondiElimina
  17. ah ecco peccato grazie mille provo ancora

    RispondiElimina
  18. Ciao! Ho provato ad installarlo, ma nel mio computer funziona (sia su Chrome che su Firefox) mentre su quello degli altri no!

    Io uso Linux, ma è lo stesso sia con windows (IE e Firefox) che su un altro Linux (Firefox).

    La divisione in tabelle non compare, i gadget vengono mostrati di seguito come se non ci fosse... Da cosa può dipendere?

    RispondiElimina
  19. @dr Christian Giordano
    Dalla diversa risoluzione. In uno schermo molto ampio tipo 1920 pixel non ci sono problemi mentre il un netbook ci possono essere delle sovrapposizioni

    RispondiElimina
  20. io non ho capito a cosa serve..

    RispondiElimina
  21. @BrilliDiLuce Serve per avere te o quattro schede contemporaneamente nello stesso spazio. Se vai nel blog di demo te ne puoi rendere conto. Puoi anche andare nella homepage di Repubblica
    http://www.repubblica.it/
    e in alto a destra avrai un esempio di come questo sistema sia usato anche da un sito importante

    RispondiElimina
  22. buon pomeriggio ernesto.ho visto che il widget fantastico dell'archivio non funziona neanche a te,ora mi chiedo,questo vale anche per la sidebar divisa in schede?dopo una decina di giorni che ce l'avevo ha smesso di funzioonare.Mi sono accorto inssomma che tutti i widget a partire dalla seconda scheda entravano a far parte delle schede eppure avevo fatto la sezione giusta e senza cambiare nulla è accaduto tutto ciò.per casualità l'ho capito sfogliando tra le schede.ora non credo al caso,perchè è successo anche ai blog di prova.ne sai qualcosa?e se sai di più potresti informarci sugli errori di blogger di questi ultimi giorni?ti ringrazio maestro!

    RispondiElimina
  23. @Tutti ...
    Nei miei blog di prova
    http://ricette-cucina.blogspot.com/
    http://sidebar-multitab.blogspot.com/
    le schede funzionano ancora. Il widget dell'archivio è invece andato.

    RispondiElimina
  24. ho notato due cose fondamnetali e cioè che da un paio di giorni va in conflitto con il widget degli ultimi post con le scritte scorrevoli o con la slidehow orizzontale,perchè prima che sparissero i widet sotto la sideber divisa in 3 schede,a volte non funzionavano.comqune non dipende nè da me nè da te,ma da blogger,mi ha anche dato un messaggio d'errore,quando cercavo di modificare la seconda scheda della sidebar.dipende da blogger,ho visto che molti ultimamente stanno avendo problemi con un errore bx etc

    RispondiElimina
  25. @Tutti ...
    E' probabile che tra un po' posti un altro metodo per creare delle schede nella sidebar.

    RispondiElimina
  26. ti ringrazio,ma non ti preoccupare fai con comodo!sinceramente è un metodo molto bello,anche l'altro che utilizzi va bene,ma nel mio non si adatto,per costruzione si vedono delle crocette antiestetiche,tra una scheda e l'altra.E' il mio template che certe cose non le recapisce proprio hehe Comuqnue spero che blogger accia qualcosa!io per questa cosa mi sono impazzito.Non si vedeva male il mio blgo,però addirittura non vedevo più il backgroun grigio che era scomparso..Certo che questi script fanno cose incredibili a livello di effetti!

    RispondiElimina
  27. Sembra caricare ma poi scompare diventando invisibile, inizialmente pensavo fosse la chat ed invece anche con un immagine ha questo problema, pazienza :/

    RispondiElimina
  28. Ciao Ernesto, questo è lo script che ho provato a mettere (e anche il cugino di maggio!) ma non c'è niente da fare.. il fatto è che ora ho provato a creare un nuovo blog di prova, con modello semplice e senza nulla e ancora non funziona nessuno dei due, quindi mi chiedo se a questo punto non sia di blogger il problema ?_?

    RispondiElimina
    Risposte
    1. Si tratta di un widget che ha sempre dato problemi di funzionamento. Prova anche questo
      http://www.ideepercomputeredinternet.com/2011/05/dividere-la-sidebar-in-schede-per.html
      Oppure scegli un'altra strada più radicale come mostrato in questo post
      http://www.ideepercomputeredinternet.com/2013/11/schede-multiple-pagine-web.html
      che funziona in sidebar e in post o pagine statiche
      @#

      Elimina
  29. Ok allora proverò quella radicale perché anche l'altra non andava :( grazie :))

    RispondiElimina

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.