REDAZIONE

Cari MyBlogger,

rieccoci con un nuovo tutorial tecnico che riprende, rielaborandolo, un post precedente in cui spiegavamo come aggiungere al blog un messaggio di benvenuto per i nostri visitatori.

Oggi invece proveremo a rendere questo "benvenuto" un po' più accattivante e multimediale facendovi inserire un video anziché del semplice testo.

Vediamo come procedere.

Il primo passo consiste nel creare l'elemento #benvenuto nel Foglio di stile. Per farlo, dal nostro pannello di gestione seguiamo il percorso presentazione>opzioni avanzate>foglio di stile e clicchiamo su "modifica modello". A questo punto, copiamo ed incolliamo il codice qui di seguito:

#benvenuto {
width: 450px;
overflow: hidden;
float: left;
background-color: #ffffff;
margin: 0 5px;
border-style: dashed;
border-color: #e86e2b;
padding: 0px 0px 0px 15px;
}

Fatto questo, dobbiamo scegliere un video. Andiamo su Dailymotion e selezioniamo quello che più ci piace (può essere un contenuto realizzato e caricato da noi, o uno già esistenti, non fa differenza). A prescindere dalla nostra scelta, quello che ci serve è il codice per l'embedding che troviamo sotto ad ogni video.

• le dimensioni del video (per il nostro caso, scegliamo "larghezza personalizzata" ed impostiamo come valore "450");
• il colore del sottopancia (dal menù a tendina, o modificando manualmente la lista dei colori intervenendo sui codici esadecimali);
• funzioni speciali (nascondi informazioni video, nascondi info video player, fai partire il video all'inizio o da un punto preciso - selezionando in tal caso il timing);

Fatte le nostre scelte, non ci resta che copiare il codice per l'embed ed inserirlo.

Qui l'esempio del codice da noi usato:

 <object width="450" height="337"><param name="movie" 
 value="http://dailymotion.virgilio.it/swf/video/xbdm5d?background
 =%23052880&foreground=%23FF0099&highlight=%23C9A1FF
 &autoPlay=1&hideInfos=0&width=450&additionalInfos=0
 &colors=background%3A052880%3Bforeground%3AFF0099%
 3Bspecial%3AC9A1FF%3B"></param>
 <param name="allowFullScreen" value="true"></param>
 <param name="allowScriptAccess" value="always"></param>
 <embed type="application/x-shockwave-flash" 
 src="http://dailymotion.virgilio.it/swf/video/xbdm5d?
 background=%23052880&foreground=%23FF0099&highlight
 =%23C9A1FF&autoPlay=1&hideInfos=0&width=450&additionalInfos
 =0&colors=background%3A052880%3Bforeground%3AFF0099%3B
 special%3AC9A1FF%3B" width="450" height="337" 
 allowfullscreen="true" allowscriptaccess="always">
 </embed></object><br /> 

Affinché tutto funzioni correttamente, dobbiamo adesso modificare il codice HTML della nostra pagina. Dal pannello di gestione del nostro blog seguiamo presentazione>opzioni avanzate>foglio di stilee clicchiamo sulla voce  "modifica modello" relativa al  "modello della homepage".

Il codice da incollare sarà così composto:

 <div id="benvenuto"><object width="450" height="330">
 <param name="movie" 
 value="http://dailymotion.virgilio.it/swf/video/xbdm5d">
 </param><param name="allowFullScreen" value="true">
 </param><param name="allowScriptAccess" value="always">
 </param><embed type="application/x-shockwave-flash" 
 src="http://dailymotion.virgilio.it/swf/video/xbdm5d" 
 width="450" height="330" allowfullscreen="true" 
 allowscriptaccess="always"></embed></object></div> 

Dove <div id="benvenuto"> richiama dal Foglio di stile l'elemento #benvenuto che abbiamo creato sopra.

Non ci resta che correre a preparare il nuovo benvenuto per i nostri visitatori.