Pubblicato il 05/02/16e aggiornato il

Bottoni di scelta per mostrare testi diversi in uno stesso spazio.

Come inserire in una pagina web un contenitore che cambia il contenuto quando si clicca su uno dei bottoni delle opzioni. Si utilizza la libreria jQuery.
A seguito di una richiesta ricevuta in un commento vado a illustrare un metodo per mostrare un testo diverso in funzione del bottone selezionato dal lettore o meglio un contenitore con più opzioni di contenuto. In altri termini pensate di avere un blog che parli di cinema. Si potranno creare per esempio i bottoni Interpreti, Personaggi, Trama, Produzione. Nella prima scheda si potranno inserire i nomi degli attori protagonisti, nella seconda i nomi e le caratteristiche dei personaggi interpretati, nella terza lo sviluppo della trama e infine nella quarta le notizie sulla produzione come il nome del regista, quello del produttore, dell'autore della colonna sonora e così via.

Sarà poi il lettore a cliccare sulla scheda corrispondente per avere le informazioni che desidera. Un tale metodo funziona anche come spoiler per evitare di mostrare in modo palese la trama del film anche a chi non la voglia conoscere per avere l'effetto sorpresa. L'esempio fatto per un sito di cinema può essere esteso a un sito di ricette con varie opzioni per cucinare lo stesso ingrediente.

contenuto-più-opzioni

Ed ecco una GIF sul funzionamento di questa interessante personalizzazione

opzioni-diverse-bottone

Vediamo innanzitutto come inserire questa possibilità in una pagina web. Nello specifico di un blog sus Blogger si deve aprire l'Editor del post e andare su HTML quindi incollare questo codice

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

Si deve pubblicare sempre da HTML senza tornare su Scrivi. Se lo facessimo Blogger inserirà dei link automatici che impediranno il funzionamento del javascript.


PERSONALIZZAZIONI DELLO SCRIPT


Nei CSS evidenziati di verde si possono modificare i codici dei colori dei link e le dimensioni dei caratteri degli stessi link (20px) e del testo del riquadro (16px). È anche possibile configurare lo stile del bordo del rettangolo contenitore oppure eliminarlo.  L'insieme dei 5 bottoni è centrato con il tag center mentre la larghezza proposta del contenitore è di 500 pixel.

Il contenuto di ciascun rettangolo colorato di blu compreso tra <p> e </p> è puramente indicativo e può essere personalizzato a piacere inserendo anche del testo già formattato con relativo codice anche con immagini o con dei video. Ho inserito 5 diverse opzioni che credo siano ampiamente sufficienti. Se se ne volessero usare per esempio solo 4 basterà cancellare la riga

<a class="link" href="#about" data-link="fifth">Opzione5</a>

Nel caso in cui nel nostro modello fosse già presente la libreria jQuery si può fare a meno di incollare la riga evidenziata di giallo.

INSTALLARE QUESTO SCRIPT NEL MODELLO DI BLOGGER


Se vogliamo usare questo script solo in pochi articoli allora si può incollare tutto il codice nell'Editor del post. Se invece volessimo usare questa tecnica in molti casi allora potrebbe essere conveniente modificare il modello in modo da incollare solo una parte del codice. Se si segue questa opzione, dopo aver salvato il template, si deve andare su Modello > Modifica HTML e cercare la riga </head>. Subito sopra si incollano le righe evidenziate di giallo (solo se non c'è jQuery) e quelle evidenziate di verde. Successivamente si cerca la riga </body> e, subito sopra, si incolla il codice evidenziato di beige. Infine si salva il modello. Quando si vorrà pubblicare un contenitore a più opzioni come quello presentato qui basterà quindi incollare solo la parte di codice non evidenziata. Concludo ricordando che se si procede alla modifica del post si deve sempre ripubblicarlo da HTML e non da Scrivi dopo aver verificato che Blogger non abbia inserito dei link indesiderati. 

AGGIORNAMENTO


Se avete deciso di inserire il codice nel modello e se il codice evidenziato di beige non vi viene salvato allora lo dovete modificare in questo modo

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




13 commenti :

  1. Grazie mille, ottimo articolo, cercherò di farne tesoro!:)

    RispondiElimina
  2. Buona sera.
    Stavo pensando se fosse possibile rendere lo script più avanzato, potendolo usare magari come legenda degli autori di un blog, corredato anche di miniatura delle loro foto. Credi che si possa fare? E quale codice bisognerebbe aggiungere? Grazie :)

    RispondiElimina
    Risposte
    1. Basta che tu crei un codice di un testo formattato anche con immagini, link e pure video. Lo puoi creare anche con l'Editor di Blogger se le immagini le inserisci con l'URL diretto dopo averle caricate su Picasa. Ciascun codice poi lo incolli tra < p > e < /p > di ciascun elemento
      @#

      Elimina
  3. Scusate ma non riesco a capire bene la posizione dei link da incollare. Nel Modello quando clicco su modifica HTML trovo due scritte "head" e una sola "body". Fatto sta che comunque io incolli i link mi dice che non sono supportati o che c'e un errore alla riga 676. Non sono ferratissima in materia (anzi, proprio per nulla), quindi gradirei molto un aiuto! :)

    RispondiElimina
    Risposte
    1. Ci sono i tag di apertura e quelli di chiusura. I tag <head> e <body...> sono i tag di apertura mentre </head> e </body> sono quelli di chiusura. Il codice lo devi incollare subito sopra ai tag di chiusura. Quello </head> lo hai trovato mentre per quello </body> vai alla fine del modello, spesso è nella penultima riga. Per quello che riguarda il codice evidenziato di marrone adesso aggiorno il post per farlo salvare in tutti i modelli
      @#

      Elimina
  4. Molto molto molto interessante, complimenti!! Tra l'altro ci sono arrivato da "Come mostrare in Blogger un contenuto solo alla fine dei post che abbiano una data etichetta", altrettanto valido.
    Però vorrei chiederti se mi indichi il tutorial per il tasto "demo" in mezzo al post, se l'hai fatto, perchè non riesco a trovarlo :-D

    RispondiElimina
    Risposte
    1. Leggi qui
      http://www.ideepercomputeredinternet.com/2015/04/css3-animated-button-demo-download.html
      @#

      Elimina
  5. So che in genere preferisci non dire molto a riguardo della SEO, però ti informo che qualche giorno fa leggevo una discussione in cui ci si chiedeva se il contenuto nei box di opzione fosse indicizzato da Google oppure no. Se non ricordo male l'opinione prevalente era per il NO: tu cosa ne pensi?

    RispondiElimina
    Risposte
    1. Sono sicuro che i link all'interno dei javascript vengono rilevati e indicizzati. Per quello che riguarda i contenuti si potrebbe sempre fare un test. Dopo aver pubblicato un post con il javascript di questo articolo si forza Google a indicizzarlo
      http://www.ideepercomputeredinternet.com/2016/02/google-indicizzare-post-search-console.html
      In una delle opzioni si inserisce un contenuto testuale non presente nelle altre e nel resto del post. Il giorno dopo aver forzato l'indicizzazione di fa una ricerca con questa struttura di query
      Titolo del post - Contenuto esclusivo di una opzione
      Nello snippet sotto il risultato di ricerca viene mostrato in grassetto il contenuto della query di ricerca. Se fosse presente significa che il c'è stata l'indicizzazione anche del contenuto del javascript
      @#

      Elimina
  6. Segnalo che il codice funziona perfettamente anche messo in un widget html da inserire in sidebar o altrove, per creare un menù con dentro quello che si vuole: da link verso altre pagine a testo+immagini... basta ovviamente adattarne le dimensioni (e colori e font), eventualmente mettendo le Opzioni in verticale invece che allineate modificando leggermente il div.

    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.