Pubblicato il 24/10/13e aggiornato il

Mostrare più video con schede in un widget o in un post.

Come realizzare un widget per mostrare più video cliccando nelle schede associate a ciascuno di essi. I video possono essere importati da Youtube o da altro sito di video sharing.
I video sono un grande arricchimento per il layout di un sito o per i contenuti di un articolo. Hanno però il difetto che il loro streaming rallenta il caricamento della pagina e di essere oggettivamente ingombranti nel caso siano più di uno. In questo articolo vediamo come sia possibile realizzare un widget in cui in uno stesso spazio vengono inseriti 4 o più video con il lettore che potrà selezionarli da delle schede che ricordano il gadget multitab per suddividere la sidebar in più sezioni così come accade in molti siti online di notizie. I video possono essere incorporati da Youtube o da altro servizio di video sharing.

La personalizzazione usa JQuery e il codice può essere oltre che inserito in un widget anche incollato in un post o in una pagina statica. Questo sistema può anche essere usato anche per altri contenuti come per esempio delle immagini con link ai più importanti articoli del blog. Questo però con ogni probabilità sarà il tema del prossimo articolo. L'aspetto del gadget che si vuole realizzare sarà il seguente

schede-video-youtube

Non occorre modificare il template. Si va su Layout > Aggiungi un gadget > HTML/Javascript e in Sezioni del sito si incolla il seguente codice

<style>
.schede{
margin: 0;
padding: 0;
}
.contenitore{
color: #777;
float: left;
clear: both;
display: block;
width: 100%;
background-color: #fafafa;
margin-top: -1px;
border: 1px solid #f5f5f5;
}
ul.schede li{
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
overflow: hidden;
position: relative;
text-transform: uppercase;
background-color: #f1f1f1;
border: 1px solid #fafafa;
outline: 1px solid #f5f5f5;
}
ul.schede li a{
font-family: Georgia;
text-decoration: none;
color: black;
display: block;
font-size: 13px;
padding: 0 10px;
outline: none;
}
ul.schede li a:hover{background:#fafafa;
}
ul.schede li.actual{
color: #777;
background-color: #fafafa;
outline: 0;
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
}
.contenuto{
padding: 5px;
font-size: 1.2em;
border-radius: 5px;
}
.contenuto img{margin:0 20px 20px 0;border:1px solid #ddd;padding:3px}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script><script type="text/javascript">
$(document).ready(function() {
$(".contenuto").hide();
$("ul.schede li:first").addClass("actual").show();
$(".contenuto:first").show();
$("ul.schede li").click(function() {
$("ul.schede li").removeClass("actual");
$(this).addClass("actual");
$(".contenuto").hide();
var act_diss = $(this).find("a").attr("href");
$(act_diss).fadeIn();
return false;
});
});
</script>
<br />
<ul class="schede">
<li><a href="#vid1">Scheda 1</a></li>
<li><a href="#vid2">Scheda 2</a></li>
<li><a href="#vid3">Scheda 3</a></li>
<li><a href="#vid4">Scheda 4</a></li>
</ul>
<div class="contenitore">
<div class="contenuto" id="vid1">
Codice del video 1
</div>
<div class="contenuto" id="vid2">
Codice del video 2</div>
<div class="contenuto" id="vid3">
Codice del video 3
</div>
<div class="contenuto" id="vid4">
Codice del video 4</div>
</div>
<div style="clear: both;">
</div>

Si salva e si posiziona con il mouse. Possono essere personalizzati tutti i colori del testo e dello sfondo nonché gli stili dei bordi consultando il post sui codici dei colori. È anche possibile scegliere una famiglia di font diversa da Georgia. Si può inoltre scegliere il testo da visualizzare al posto di Scheda 1, 2, 3 e 4. Si devono anche incollare i codici dei video preferibilmente in formato iframe. Se si usano video di Youtube si va su Condividi > Codice da incorporare > Dimensioni personalizzate

incorporare-video-youtube

e si sceglie la larghezza desiderata per i nostri video. Nella Demo ho usato larghezze di 420 pixel e altezze automatiche ma chiaramente si possono scegliere anche altre misure in funzione del layout.



Invece di quattro video se ne possono inserire di meno o anche di più specialmente se abbiamo usato pochi caratteri per il testo delle schede e una larghezza superiore a quella della demo. Per inserire il quinto video si aggiunge questa riga come questa

<li><a href="#vid5">Scheda 5</a></li>

e questo blocco di codice

<div class="contenuto" id="vid5">
Codice del video 5
</div>

mantenendo la stessa sintassi. Se volessimo visualizzare queste schede video in un post o in una pagina statica dovremo aprire l'Editor di Blogger e incollare il codice in Modalità HTML. In questo caso non si deve mai andare in Modalità Scrivi e si deve pubblicare il post da HTML perché altrimenti Blogger inserisce automaticamente dei link prima del cancelletto nell'elenco delle schede video

link-automatici-blogger

che impediranno alle schede stesse di funzionare. Concludo ricordando che se nel vostro modello fosse già presente JQuery allora la riga evidenziata di giallo può essere tralasciata.




4 commenti :

  1. invece di schede si può scrivere anche chessò video negozio 1, video negozio 2... e si può scegliere anche il carattere calibri grassetto<?

    RispondiElimina
    Risposte
    1. Come scritto nell'articolo puoi scrivere tutto quello che ti pare al posto delle scritte in blu. Bisogna solo considerare lo spazio a disposizione
      @#

      P.S. Lascia un solo commento e non ne postare due identici. Grazie

      Elimina
  2. invece di schede si può scrivere anche chessò video negozio 1, video negozio 2... e si può scegliere anche il carattere calibri grassetto<?

    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.