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

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

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj09TbgU1-lYOvEHvhCX-iYcBoZbJJ_YUPR4Vqqj-PEXeff1xXZAwTCrIWlWxag_ct12eLUfsMfPbUVyRfWgMpNBcnJ4ai7r8GVk2GAEy2KeGpQ8zeJN3SQlxIeojV3Et4iHY0qOWXVgNMS/s153/zuccahalw1.gif",29,15);
newObject("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1UNrRdjqDL1_F6NZWveNnckHuv-csgIv_uWfA8tAQXXFN4KGMEr5rCtYPzGysw_j2OIkXCM3YiDLYjfou55UNCAggyoITPxVQIP1XRifZSfXw_L17ItLYD12AYRwysQQrkP40rsOCqXfL/s84/zuccahlw6.gif",27,23);
newObject("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsDAmLkMf2DSiAAdC_VZd2qMgVrMCbQjHNuO2nAeoTiPY4dLCRq8Efff7Iu91nsyeeAyQGz4xAbKVqcGjIg5UpWMHRMpdY60KdJT9S1__T3JLBNKl1iFT0ufbS63HU0rRSmpFRhqVfvQ_V/s128/zuccahlw4.gif",46,20);
newObject("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0LJpRRS9CGU9aoRGBr45FHIeKlexKgNQ86pg5WwLuz538U21tNXVoHO8w94C_BDp4cqPDgnXNIc4dUq6GaJ8CsfGCvbWAc_UHQrH76GuBXMGQskUJ9emOHuFJI86tJT8cPsGvQvvEW7nd/s76/zuccahalw7.gif",40,28);
newObject("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw6OPw1O-kJfR9X29E5Qp0BiMMGq5eO2k3NDco9lyKwdeG1Ch62tNj-depH52cncjUaHLHXfXg7jUWsmzS8h_twZ4dGdjvLavwARkV-Cqc_3tF26U0UK0oKCkTapqXAjRKHfapeHjQrEKE/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>

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

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

Codice dei pipistrelli svolazzanti -

Successivamente si cerca la riga </body> e si incolla quest'altro codice

<div id='pipistrello1' style='position:absolute; z-index:60; left: -500px; width:125px; height:108px;'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCPDaiEN8R4cpucDVeJmMaldWCtXQC1Jd3FvwSv3XXl8swdICe73Gwt14uhLofsKndVCBT7C8VDLXee4YIBOvI6nbkwNe1VE3qat6XuJLK31MLa619-TRfrQTSyJ-D9Tg0XQ7NNobKuLY/s125/pipistrello1.gif'/></div>
<div id='pipistrello2' style='position:absolute; z-index:61; left: -600px; width:120px; height:99px;'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiREeXNlf3_5xX62kd2vNLgQSnKtM1QZKUp-5-EVw8SwlttCC8Hhahaj7ul6YdCZR6KBfqcyPJyFlzNX7SBAUN9lG0RkugQRYllFFG-x0dHzqhB9VbQAAM-jpDqbS5Lr3xDPMgXfNX9DFw/s120/pipistrello2.gif'/></div>
<div id='pipistrello3' style='position:absolute; z-index:62; left: -700px; width:160px; height:120px;'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-fYXapDbmDZBGgbcpyv-MdtYXMt_lqGD9QIDcofvGeG7RUaaIKISXAD4yfoObzwMORqtloYWWrWoDjYEqnLYb1mLVDSDC4UQO_Jig3ZoW2TWz9reSytReDr3bVQwcZTtsFfFISTHUefo/s160/pipistrello3.gif'/></div>
<div id='pipistrello4' style='position:absolute; z-index:63; left: -800px; width:106px; height:85px;'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0TSlsyVVP8_GwTipWt3tbYfti7XLzfikQXZSm-ttskP-YUKbR1ZeSKRJbIa2z4AWoYJ4uyHPyQXDHMbzYg-4gU_Q6Rgf-BYxDkV7HJy7wBHHA-6xcFsJhWF8osteJlwYaKY74eYqvr24/s106/pipistrello4.gif'/></div>

Si salva il modello.

FANTASMI CHE POPOLANO IL 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

Codice dei fantasmi animati per il blog -

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

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

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuBbjjw003-5nJq-rWFOmICYFZ40_snAAPqVtxcOZni8reiyekWFn1qRyF5C4OY0Zy9VXXU-Mu0AC5xzAamZUXqu2b7oZajLjgjiKRJJxPqC92BEhGCrJH9QzHK8M6vjJETxhf70pmzT7b/s156/ghost2b.gif",28,25);
newObject("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg55LoN_NUUN7fxKeKpSA8RB4hFblEGOx9gw6V5iOY-Dm6RRC8fhNFSQ_6yTtAR_ve25-xcJgmgbspuU_Ra-FTA1LX3hloSVF-bEkUSwuM58WLzrNiYYXMrbfMgzAGnVujcRAwHhWS-3Tyg/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>

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

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

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.

Scarica file ZIP dei suoni di Halloween -

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

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 :

Simona Nania21 ottobre 2014 alle ore 18:14
troppo belli, davvero! li apprezzo molto anche se non li metterò nel mio blog, mi divertono un sacco :-)
RispondiElimina
Risposte
Ansia e attacchi di panico S.O.S.21 ottobre 2014 alle ore 20:18
Eh eh, che carini! Non li uso, ma li apprezzo quando li vedo nei blog degli altri ;)
RispondiElimina
Risposte

Aggiungi commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy

Pubblicato il 20/10/14 - aggiornato il | 2 commenti :