Pulsante oscura sfondo per i video su Blogger

Esistono diversi modi per incrementare il numero di visualizzazioni in un video, spesso, però, queste tecniche costringono il visitatore a guardare il video contro la sua volontà. In realtà a nessuno piace costringere i visitatori a guardare un video pertanto in questo articolo vi sarà spiegata un metodo davvero interessante che migliorerà l'aspetto dei video mediante un interruttore che utilizza uno script jQuery che consente di creare uno sfondo scuro intorno al video in modo che il video sia l'unica parte visibile della pagina visualizzata. Dato che questa funzione è possibili attivarla solo manualmente cliccando sul pulsante non sarà "forzata" e l'utente potrà spegnere o riaccendere la luce tutte le volte che lo vorrà.

Eccovi lo screenshot del risultato finale:

Per installare il "pulsante oscura sfondo" dovete andare su Modello > Modifica HTML ed incollare prima del tag </head> il seguente codice:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#lightsoff").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#lightsoff").toggle();
if ($("#lightsoff").is(":hidden"))
$(this).html("Turn off the lights").removeClass("turnedOff");
else
$(this).html("Turn on the lights").addClass("turnedOff");
});
});
//]]>
</script>

Dopo aver inserito il codice jQuery arriverà il momento di aggiungere il codice css nel vostro template. Con la combinazione di entrambi i codici jQuery e css il risultato sarà semplicemente perfetto. Dovete incollare il seguente codice css proprio sopra il tag ]]></b:skin> presente nel vostro modello:

/* Turn off the lights
----------------------------------------------- */
#lightsVideo {
position:relative;
z-index:102;
}
#switch {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
margin: 25px 0 0 60px;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(http://3.bp.blogspot.com/-Vs5EJnjVScM/Um0Sq84fJtI/AAAAAAAAEeQ/PEu-OStZciA/s1600/lights-on.png);
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
background-image:url(http://3.bp.blogspot.com/-vKGxmBhYshA/Um0Sqwy_hNI/AAAAAAAAEeU/F0WKs6_WARM/s1600/lights-off.png);
}
#lightsoff {
background:#000;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

Infine dovete cercare il tag </body> e appena sopra di esso dovete incollare quest'altro codice:

<div id='lightsoff'/>

Dopo aver aggiunto correttamente tutti i codici sopra riportati salvate il modello tramite il pulsante "Salva modello". Questa funzione è stata installata con successo e l'effetto è già presente nel modello. Ora, tutte le volte che volete inserire un video con il pulsante "light on/off" dovrete utilizzare un particolare codice da inserire nella modalità HTML dei post, ed è il seguente:

<center>
<div id="switch">
<a class="lightSwitcher" href="javascript:void(0);">Accendi/Spegni luce</a>
</div>
<div id="lightsVideo">
CODICE DEL VIDEO
 </div>
</center>

Dovete solamente sostituire il testo "CODICE DEL VIDEO" con il codice embed del video di Youtube o di altri siti fornitori di video.

Se volete potete anche personalizzare la scritta "Accendi/Spegni luce" o sostituirla con qualcosa di più semplice e adatto del tipo "Light on/off", "Oscura sfondo", "Modalità cinema" ecc.