Come installare su Blogger effetti speciali per personalizzare i siti in occasione della Festa di San Valentino.
Il 14 di Febbraio come tutti sanno è San Valentino, la Festa degli innamorati. Si tratta di una festa cattolica e ortodossa che però ha preso piede anche in paesi non cristiani come il Giappone. In Cina invece una festa simile a San Valentino si festeggia il 23 Agosto.
Valentino fu un vescovo cristiano torturato e ucciso intorno al 200 dC e poi sepolto a Terni. La festività di San Valentino pare che derivi da quella romana di Lupercalia e l'associazione a San Valentino si deve ai monaci benedettini di Terni poi estesa ai monaci dello stesso ordine in Francia e Inghilterra.
Il giorno successivo, 15 Febbraio San Faustino, è invece la Festa dei Single che però non è adeguatamente pubblicizzata. In quel di Brescia sembra che Faustino desse l'opportunità alle ragazze nubili di incontrare il loro futuro innamorato.
In molte tipologie di blog in occasione di alcune festività si è soliti personalizzare il layout per renderlo in linea con la ricorrenza. In questo post riproporrò alcuni effetti speciali già visti negli anni passati che in molti casi hanno smesso di funzionare per il ritiro di servizi quali quello di hosting di Google Drive e quello della cartella Public di Dropbox.
CASCATA DI CUORICINI LAMPEGGIANTI O PULSANTI
Si va su Layout -> Aggiungi un gadget -> Base -> HTML/Javascript e si incolla questo codice
<script type='text/javascript'>
//<![CDATA[
//Sostituire gli URL per cambiare gli oggetti cadenti
var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD3RgPhLjLbwkU003xHJGWCXyjCOFp_uW1Os0l7gv7CDRGq0wpOjZl7PvRfZ7eJpL85kw2LYBswc-U96tMGwTcx_7mkAyfCU65Hf-ThZssL-JUaONZXaDJUaEMv3qBjcoKab7ijwSTg80/s18/cuore_che_lampeggia.gif"
// Il numero di immagini da mostrare contemporaneamente
var no = 15;
// Configurare dopo quanti secondi devono scomparire gli oggetti (0=mai):
var hidesnowtime = 0;
// Quantità di cuoriti che devono cadere prima di sparire ("windowheight" o "pageheight")
var snowdistance = "pageheight";
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
var dx, xp, yp;
var am, stx, sty;
var i, doc_width = 1100, doc_height = 800; // Larghezza e Altezza Effetto
if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD3RgPhLjLbwkU003xHJGWCXyjCOFp_uW1Os0l7gv7CDRGq0wpOjZl7PvRfZ7eJpL85kw2LYBswc-U96tMGwTcx_7mkAyfCU65Hf-ThZssL-JUaONZXaDJUaEMv3qBjcoKab7ijwSTg80/s18/cuore_che_lampeggia.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0;
xp[i] = Math.random()*(doc_width-50);
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}
function snowIE_NS6() {
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) {
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}
function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}
if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
//]]>
</script>
//<![CDATA[
//Sostituire gli URL per cambiare gli oggetti cadenti
var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD3RgPhLjLbwkU003xHJGWCXyjCOFp_uW1Os0l7gv7CDRGq0wpOjZl7PvRfZ7eJpL85kw2LYBswc-U96tMGwTcx_7mkAyfCU65Hf-ThZssL-JUaONZXaDJUaEMv3qBjcoKab7ijwSTg80/s18/cuore_che_lampeggia.gif"
// Il numero di immagini da mostrare contemporaneamente
var no = 15;
// Configurare dopo quanti secondi devono scomparire gli oggetti (0=mai):
var hidesnowtime = 0;
// Quantità di cuoriti che devono cadere prima di sparire ("windowheight" o "pageheight")
var snowdistance = "pageheight";
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
var dx, xp, yp;
var am, stx, sty;
var i, doc_width = 1100, doc_height = 800; // Larghezza e Altezza Effetto
if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD3RgPhLjLbwkU003xHJGWCXyjCOFp_uW1Os0l7gv7CDRGq0wpOjZl7PvRfZ7eJpL85kw2LYBswc-U96tMGwTcx_7mkAyfCU65Hf-ThZssL-JUaONZXaDJUaEMv3qBjcoKab7ijwSTg80/s18/cuore_che_lampeggia.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0;
xp[i] = Math.random()*(doc_width-50);
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}
function snowIE_NS6() {
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) {
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}
function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}
if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
//]]>
</script>
Andare su Salva quindi spostare il widget sopra l'area del post e cliccare su Salva disposizione.
Il parametro fondamentale da personalizzare è quello dell'URL del cuoricino colorato di rosso
Per avere invece il cuore lampeggiante posto sulla destra si sostituisce l'URL con il seguente
https://lh3.googleusercontent.com/-2kxgER7mRZI/TxkoOdYA-3I/AAAAAAAAWKk/iU45QTdgMsg/s15/cuore_che_pulsa.gif
nelle sue due occorrenze. Gli altri parametri importanti sono la larghezza e l'altezza dell'effetto e il numero di cuoricini che si possono vedere contemporaneamente.
CUORI CADENTI NEL BLOG
Un effetto simile al precedente ma con più immagini può essere creato con questo script
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!cuori){var cuori=Array()}if(!flash_urls){var flash_urls=Array()}cuori['rain1']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilTjBYU1L99zA7Vzj-XWC-kvTWFL9Vki0J5Se2wQXqGnrLCUvNOV7M6OSdanVrq6fMRIJHS1JpmLrsFeNNunTjUH3PM5bANlT6dc8qF75a25MFYX84RJ1lUVc92tMSuUvmbITYj9FHM-mB/s36/cuore1.png";cuori['rain2']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjREK-lD_xhSaUz55RtSDndSnzxCLx1OsRDnGWRkyjaWm1YITqdw7-q8A52ekz6tVBoyN-ysdOzukjZ_JXskqHvaYEPaEIuSbGElOptl2ZeLQqLxvR9pql3KAji8OAJhffeLdmfN6YrP-vE/s81/cuore5.gif";cuori['rain3']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkfJty12qYhV3PaRy_y_-m7vb01T4ecOwwoHq1Q-Mby1ixrmwQ9grqO9adFXfVYpzH1yp1YX8NIASbq1ndOGLU18dcGvM6-Jirnic5niQ-zJcOiXPk3CpxMLuklT0K3TxRk-D9xdWJYFzh/s36/cuore3.png";cuori['rain4']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj86I0kcOQuiWyju0QWngfqfGWGVXpbaAUumglsr4ElRmyhGU9eUlMFckW87rU1RrDU3PDpEqQSay9aHuOy13VzTbwEAx6YMMv9FkPlRfDz4fwy25a7eTW60XStrR0tgME6Ejixck-ljcc4/s38/cuore4.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv')
.css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',cuori['rain'+e(1,4)])
.css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script>
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src=//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js>');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilTjBYU1L99zA7Vzj-XWC-kvTWFL9Vki0J5Se2wQXqGnrLCUvNOV7M6OSdanVrq6fMRIJHS1JpmLrsFeNNunTjUH3PM5bANlT6dc8qF75a25MFYX84RJ1lUVc92tMSuUvmbITYj9FHM-mB/s36/cuore1.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'#'}).append(a).appendTo('body')});</script>
.css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',cuori['rain'+e(1,4)])
.css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script>
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src=//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js>');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilTjBYU1L99zA7Vzj-XWC-kvTWFL9Vki0J5Se2wQXqGnrLCUvNOV7M6OSdanVrq6fMRIJHS1JpmLrsFeNNunTjUH3PM5bANlT6dc8qF75a25MFYX84RJ1lUVc92tMSuUvmbITYj9FHM-mB/s36/cuore1.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'#'}).append(a).appendTo('body')});</script>
da incollare sempre su Layout -> Aggiungi un gadget -> Base -> HTML/Javascript per poi posizionarlo subito sopra all'area del post. Possono essere personalizzati i 4 URL delle immagini di cui uno deve essere ripetuto due volte. Ricordo che le immagini possono essere caricate su Google Foto e che ci sono vari metodi per ottenerne il link diretto.
CUPIDO CHE SCOCCA LE FRECCE
Con questo effetto si visualizzerà un cupido animato in GIF che scocca le frecce
Il primo codice può essere copiato da questa pagina di Google Drive che dovrà essere incollato nel modello subito sopra alla riga </head> mentre subito sopra alla riga </body> va incollato quest'altro codice
><div id='CupidArc' style='position:absolute; z-index:999; top:50px; left: -500px;'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha5I2KeY5dThFm6Llz-yqwjXfZdrwOWb7H-KcHqYv5XWMnLXs_elImnXpmGnWjOObRrfbA1AyyeaIPICnHPL9brqXGN4dpztuFSMSs084sVlXN3olT6LT-R-bzEUDLOuH3uyut72OXmIA/s166/cupid-1.gif'/></div>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha5I2KeY5dThFm6Llz-yqwjXfZdrwOWb7H-KcHqYv5XWMnLXs_elImnXpmGnWjOObRrfbA1AyyeaIPICnHPL9brqXGN4dpztuFSMSs084sVlXN3olT6LT-R-bzEUDLOuH3uyut72OXmIA/s166/cupid-1.gif'/></div>
Successivamente si salva il template.
Concludo questo post ricordando che negli anni passati ho pubblicato diversi post su San Valentino che potranno essere consultati in questa pagina dinamica.
Nessun commento :
Posta un 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