Pubblicato il 20/10/14e aggiornato il

Come abbellire il blog per Halloween.

Effetti speciali per Halloween come fantasmi, pipisgtrelli, zucche intagliate e suoni raccapriccianti da inserire in una o in tutte le pagine del nostro blog su Blogger.
Faccio parte di quella categoria di blogger che non amano modificare il layout del sito in funzione dell'avvicendarsi delle stagioni e delle varie festività. Ci sono però molti lettori di questo sito che aspettano il post che sono solito pubblicare sugli effetti speciali relativi al periodo dell'anno che sta arrivando o alla festa incombente. Tra 11 giorni  sarà Halloween che non è propriamente una ricorrenza italiana visto che è stata importata dagli Stati Uniti dopo che questi ultimi l'avevano ereditata dalle popolazioni anglosassoni ivi immigrate ma che è stata ampiamente adottata anche da noi. La notte del 31 Ottobre verranno organizzate feste a tema Halloween con zucche intagliate in stile horror, con simbologia rivolta all'occulto e con i bambini che si esibiranno nel classico trick or treat o nell'italianizzato dolcetto o scherzetto.

Per quello che riguarda il blog si può pensare di inserire degli effetti speciali di Halloween che riguardino immagini animate paurose, suoni raccapriccianti o altri widget sullo stesso tema. In questo periodo sono piuttosto impegnato quindi ho pensato di ripubblicare dei gadget che avevo già presentato in passato ma che magari i nuovi lettori non conoscono oppure che anche i vecchi lettori non si ricordano. Come considerazione comune a tutte le personalizzazioni ricordo di salvare il template prima di qualsiasi modifica del Modello di Blogger e che i gadget che non abbiano al loro interno i tag specifici di Blogger potranno essere installati anche in blog appartenenti ad altre piattaforme. 

ZUCCHE INTAGLIATE IN STILE HORROR

zucche-intagliate-stile-horror

Si va su Modello > Modifica HTML, si cerca la riga </head> e subito sopra si incolla questo codice

<!-- Zucche Animate per Halloween Inizio -->
<script>
//<![CDATA[
var zucche=new Array();function newObject(url,height,width){zucche[zucche.length]=new Array(url,height,width);}
var numObjs=10, waft=110, fallSpeed=4, wind=0;
newObject("https://lh3.googleusercontent.com/--cFBguon4Ys/UHQg0IECioI/AAAAAAAAbGI/UYG28ubkX4A/s153/zuccahalw1.gif",29,15);
newObject("https://lh3.googleusercontent.com/-SiKShtRpBeQ/UHQjdyMLCgI/AAAAAAAAbG0/RMkvUCekogY/s84/zuccahlw6.gif",27,23);
newObject("https://lh3.googleusercontent.com/-IFH4scxGiqI/UHQg9eLtc-I/AAAAAAAAbGg/hwHRuEGYFlI/s128/zuccahlw4.gif",46,20);
newObject("https://lh3.googleusercontent.com/-iBk2VdQLhWM/UHQlAIcG0FI/AAAAAAAAbG8/B1FyByGd4gA/s76/zuccahalw7.gif",40,28);
newObject("https://lh6.googleusercontent.com/-FHG9YRkryYE/UHQhAZt83SI/AAAAAAAAbGo/ZT5clQ7WCwg/s94/zuccahlw5.gif",36,33);
function winSize(){winWidth=(moz)?window.innerWidth:document.body.clientWidth;winHeight=(moz)?window.innerHeight:document.body.clientHeight;}
function fallObject(num,vari,nu){
objects[num]=new Array(parseInt(Math.random()*(winWidth-waft)),-30,(parseInt(Math.random()*waft))*((Math.random()>0.5)?1:-1),0.02+Math.random()/20,0,1+parseInt(Math.random()*fallSpeed),vari,zucche[vari][1],zucche[vari][2]);
if(nu==1){document.write('<img id="fO'+i+'" style="position:absolute;z-index:999;background:none;border:0;padding:0;box-shadow:none;" src="'+zucche[vari][0]+'">'); }
}
function fall(){
for(i=0;i<numObjs;i++){
var fallingObject=document.getElementById('fO'+i);
if((objects[i][1]>(winHeight-(objects[i][5]+objects[i][7])))||(objects[i][0]>(winWidth-(objects[i][2]+objects[i][8])))){fallObject(i,objects[i][6],0);}
objects[i][0]+=wind;objects[i][1]+=objects[i][5];objects[i][4]+=objects[i][3];
with(fallingObject.style){ top=objects[i][1]+winOffset+"px";left=objects[i][0]+(objects[i][2]*Math.cos(objects[i][4]))+"px";}
}
setTimeout("fall()",31);
}
var objects=new Array(),winOffset=0,winHeight,winWidth,togvis,moz=(document.getElementById&&!document.all)?1:0;winSize();
for (i=0;i<numObjs;i++){fallObject(i,parseInt(Math.random()*zucche.length),1);}
window.onresize=winSize;fall();
//]]>
</script>
<!-- Zucche Animate per Halloween Fine -->

Si salva il modello. I parametri in rosso si possono modificare e riguardano numero di zucche da visualizzare contemporaneamente in caduta, l'ampiezza delle oscillazioni laterali, la velocità e la direzione e intensità del vento ricordando che per questo parametro i numeri positivi sposteranno la caduta sulla destra mentre i numeri negativi la sposteranno sulla sinistra.

 

PIPISTRELLI CHE VOLANO NEL BLOG

 

pipistrelli-volanti-blog

Si va su Modello > Modifica HTML, si cerca la riga </head> e, subito sopra, si incolla questo codice
Successivamente si cerca la riga </body> e si incolla quest'altro codice

<!-- Pipistrelli volanti - Inizio -->
<div id='pipistrello1' style='position:absolute; z-index:60; left: -500px; width:125px; height:108px;'>
<img border='0' src='https://lh5.googleusercontent.com/-LsE783aQ5I0/TqfBKwIKwCI/AAAAAAAAUyc/NdnHrL829hE/s125/pipistrello1.gif'/></div>
<div id='pipistrello2' style='position:absolute; z-index:61; left: -600px; width:120px; height:99px;'>
<img border='0' src='https://lh3.googleusercontent.com/-D_51bMMtkrQ/TqfBUT9igaI/AAAAAAAAUyw/6IaF5-8LRvw/s120/pipistrello2.gif'/></div>
<div id='pipistrello3' style='position:absolute; z-index:62; left: -700px; width:160px; height:120px;'>
<img border='0' src='https://lh5.googleusercontent.com/-1tfPnny_b34/TqfBYeqooJI/AAAAAAAAUy4/VSS6xhiZcTQ/s160/pipistrello3.gif'/></div>
<div id='pipistrello4' style='position:absolute; z-index:63; left: -800px; width:106px; height:85px;'>
<img border='0' src='https://lh5.googleusercontent.com/-MEvV9HzPtOM/TqfBdsc78DI/AAAAAAAAUzA/RmL8IKmyjSU/s106/pipistrello4.gif'/></div>
<!-- Pipistrelli volanti - Fine  -->

Si salva il modello.

 

FANTASMI CHE POPOLANO IL BLOG

 

fantasmi-animati-blog

Per questo effetto molto particolare non occorre modificare il template. Basta andare su Layout > Aggiungi un gadget > Base > HTML/Javascript e si incolla su Sezioni del sito il
Si salva il widget. La personalizzazione si può fare operando nei parametri colorati di rosso con accanto i relativi commenti esplicativi e che riguardano il Numeri dei Fantasmi visibili contemporaneamente, la Velocità degli stessi e il loro Tempo di permanenza.


 

FANTASMI ANIMATI PER HALLOWEEN

 

       fantasma1                              fantasma2
fantasmi-animati-blog[4]

Si va su Modello > Modifica HTML, si cerca la riga </head> e, subito sopra, si incolla il codice

<!-- Fantasmi per Halloween Inizio -->
<script>
//<![CDATA[
// Fall v2.0 By MaxxBlade - http://www.maxxblade.co.uk/fall
var fallObjects=new Array();function newObject(url,height,width){fallObjects[fallObjects.length]=new Array(url,height,width);}
var numObjs=10, waft=100, fallSpeed=6, wind=0;
newObject("https://lh3.googleusercontent.com/-W47vfPgEw0c/UHKV7ozekFI/AAAAAAAAbFo/XuGMoQmhvBw/s156/ghost2b.gif",28,25);
newObject("https://lh5.googleusercontent.com/-nrKzF-U5mII/UHKWFpC4l-I/AAAAAAAAbF0/hhWAj6lmdXI/s118/ghost2.gif",21,21);
function winSize(){winWidth=(moz)?window.innerWidth:document.body.clientWidth;winHeight=(moz)?window.innerHeight:document.body.clientHeight;}
function fallObject(num,vari,nu){
objects[num]=new Array(parseInt(Math.random()*(winWidth-waft)),-30,(parseInt(Math.random()*waft))*((Math.random()>0.5)?1:-1),0.02+Math.random()/20,0,1+parseInt(Math.random()*fallSpeed),vari,fallObjects[vari][1],fallObjects[vari][2]);
if(nu==1){document.write('<img id="fO'+i+'" style="position:absolute;z-index:99;background:none;border:0;padding:0;box-shadow:none;" src="'+fallObjects[vari][0]+'">'); }
}
function fall(){
for(i=0;i<numObjs;i++){
var fallingObject=document.getElementById('fO'+i);
if((objects[i][1]>(winHeight-(objects[i][5]+objects[i][7])))||(objects[i][0]>(winWidth-(objects[i][2]+objects[i][8])))){fallObject(i,objects[i][6],0);}
objects[i][0]+=wind;objects[i][1]+=objects[i][5];objects[i][4]+=objects[i][3];
with(fallingObject.style){ top=objects[i][1]+winOffset+"px";left=objects[i][0]+(objects[i][2]*Math.cos(objects[i][4]))+"px";}
}
setTimeout("fall()",31);
}
var objects=new Array(),winOffset=0,winHeight,winWidth,togvis,moz=(document.getElementById&&!document.all)?1:0;winSize();
for (i=0;i<numObjs;i++){fallObject(i,parseInt(Math.random()*fallObjects.length),1);}
window.onresize=winSize;fall();
//]]>
</script>
<!-- Fantasmi per Halloween Fine -->

Si salva il modello. Si tratta praticamente dello stesso codice delle zucche horror con la sola modifica delle immagini. Si possono quindi fare gli stessi settaggi dei parametri colorati di rosso che riguardano il numero dei fantasmi, le oscillazioni laterali, la velocità di caduta e l'intensità del vento (numeri positivi spostano la caduta verso destra e numeri negativi verso sinistra).


 

SANGUE NELLA PARTE ALTA DELLA PAGINA

 



Si va su Modello > Modifica HTML, si cerca la riga </body> e, subito sopra, si incolla il codice

<img border='0' src='https://lh3.googleusercontent.com/-Emx4CdiNrLk/TqKwmnEm55I/AAAAAAAAUvk/1FlbCT6D5t8/s860/sangue.gif' style='position:fixed; top:0; left:0; width:100%; height:150px;'/>

Si salva il modello

 

FIAMME NELLA PARTE BASSA DELLA PAGINA

 



Si va  su Modello > Modifica HTML, si cerca la riga </body> e, subito sopra, si incolla il codice

<img border='0' src='https://lh3.googleusercontent.com/-E7-_EdYVGR0/TqH3wW3ouBI/AAAAAAAAUvM/iLHdDof_kEM/s338/fiamme.gif' style='position:fixed; bottom:0; left:0; width:100%; height:100px;'/>

Si salva il modello.

 

SUONI PAUROSI CHE SI SENTONO QUANDO SI APRE IL BLOG

 



Quando aprirete la pagina di demo e quando la ricaricherete pigiando su F5 ascolterete un suono casuale tra quelli in formato MP3 che ho caricato su Google Sites. Se avete un blog con dominio personalizzato del tipo www.esempio.com dovrete scaricare questi suoni e caricarli nella cartella Public di Dropbox oppure su Google Drive acquisendone l'hotlink.
Per l'installazione di questo effetto particolarmente interessante si va su Modello > Modifica HTML, si cerca la riga </body> e, subito sopra, si incolla questo codice

<style>
audio{ width: 0px; height: 0px; }
</style>
<script type='text/javascript'>
//<![CDATA[
// Suoni di Halloween
var halloween = [
"https://sites.google.com/site/musicafilemp3/halloween/bach1.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/bambina1.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/campane1.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/fantasma1.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/fantasma2.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/grido1.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/grido2.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/mostro.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/risate1.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/risate2.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/risa-ululato.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/ululato1.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/ululato2.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/battitocuore.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/bestia.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/cobra.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/dolore.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/risatasatanica1.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/risatasatanica2.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/spari.mp3",
"https://sites.google.com/site/musicafilemp3/halloween/tuono.mp3",];
var rotazione = Math.random()*halloween.length;
var numero = Math.floor(rotazione);
document.write('<audio controls="true" autoplay="autoplay">');
document.write('<source src='+halloween[numero]+' type="audio/mpeg">');
document.write('</audio>');
//]]>
</script>

Si salva il modello. Gli URL colorati di rosso rappresentano gli indirizzi dei file audio dei suoni che si riprodurranno in modo casuale. Si possono eliminare gli effetti che non ci interessano e aggiungere altri suoni a piacere mantenendo la stessa sintassi. Concludo ricordando che tutti gli effetti di Halloween proposti possono essere inseriti anche in una sola pagina del sito come per esempio la Homepage usando i tag condizionali.




2 commenti :

  1. troppo belli, davvero! li apprezzo molto anche se non li metterò nel mio blog, mi divertono un sacco :-)

    RispondiElimina
  2. Eh eh, che carini! Non li uso, ma li apprezzo quando li vedo nei blog degli altri ;)

    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.