Effetti speciali da installare nel blog per San Valentino.

Come installare effetti speciali di cuoricini animati, cupido e altre personalizzazioni nel nostro blog per la Festa di San Valentino.

Il 14 Febbraio è San Valentino, la Festa degli Innamorati che prende il nome da Valentino, vescovo romano nato a Terni che fu torturato e ucciso intorno al 200 d.C. San Valentino è venerato non solo dai cattolici ma anche da ortodossi e anglicani.

La festa che prende il nome dal santo pare che derivi da quella pagana romana pre-cristiana di Lupercalia. L'associazione a San Valentino è merito dei monaci benedettini di Terni che diffusero per primi la festa in Italia, festa che poi attecchì in Francia e Inghilterra. Il 15 Febbraio San Faustino è invece la festa dei single. Secondo la tradizione pare che San Faustino da Brescia desse la possibilità alle ragazze di incontrare il loro innamorato. Vediamo quali effetti e personalizzazioni installare in una pagina web per ricordare la Festività di San Valentino ai lettori che passassero nei giorni antecedenti per il nostro sito. L'obiettivo è quello di mostrare effetti divertenti ma non troppo invasivi.

CASCATA DI CUORICINI LAMPEGGIANTI

Modificando opportunamente il classico codice della nevicata cioè sostituendo il fiocco di neve con questa immagine animata    si visualizzeranno nel nostro sito tutta una serie di cuoricini lampeggianti che cadranno dall'alto in basso. In un blog su Blogger si va su Layout > Aggiungi un gadget > Base < HTML/Javascript > Sezioni del sito e si incolla questo codice

<script src="https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/cuore-che-lampeggia.js" type="text/javascript"></script>

Si salva e si posiziona l'elemento sopra all'area del post. In un blog Wordpress self-hosted tale codice invece si incolla su Aspetto > Widget > Testo.

CASCATA DI CUORICINI PULSANTI

Se al posto dei cuoricini lampeggianti si preferiscono quelli pulsanti con questa immagine    allora il codice da incollare, sempre su Layout > Aggiungi un gadget > Base < HTML/Javascript > Sezioni del sito in Blogger e su Aspetto > Widget > Testo in un blog Wordpress, diventa

<script src="https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/cuore-che-pulsa.js" type="text/javascript"></script>

Demo Clicca qui

EFFETTO DEI CUORI CADENTI

Per mostrare dei cuori animati come nello screenshot mostrato in alto si va sempre su Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si incolla questo codice

<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>

Si salva l'elemento e si posiziona sopra l'area del post.

CASCATA DI CUORI TRASPARENTI

Se si desidera visualizzare nelle nostre pagine una cascata di cuori trasparenti    si va sempre su Layout > Aggiungi un gadget > HTML/Javascript e  si incolla questo codice

<script> if(typeof $pdj=='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(typeof $pdj=='undefined'){var $pdj=jQuery.noConflict()}if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['cuoreSV']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvE5nMr8pd7wae11b9AZ3bn9I4Cw02XgF3cf2tCBp0dtzwXlbZ6XL_mgwy7uwGyNVXY0xVNBqf4LRINFJhqdeKMAV53Jw4_G0W0IZLqBCu7JwK0HLa1bBLKEia84wGRKLaxDwucrc6ojI/s32/heart2.png";$pdj(document).ready(function(){var c=$pdj(window).width();var d=$pdj(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(8500,10000),function(){$pdj(this).fadeOut('slow',function(){f(a)})})},e(1,9000))};$pdj('<div></div>').attr('id','cuoreC').css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=15;i++){var g=$pdj('<img/>').attr('src',image_urls['cuoreSV']).css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('cuoreCad').appendTo('#cuoreC');f(g);g=null};var h=0;var j=0;$pdj(window).resize(function(){c=$pdj(window).width();d=$pdj(window).height()})}); </script>

Si salva e si posiziona l'elemento subito sopra l'area del post.

Demo Clicca qui

IMMAGINE ANIMATA DI CUPIDO CHE SCOCCA LE FRECCE

Questa immagine animata di cupido


verrà visualizzata volteggiante nel nostro layout. Per la sua installazione, dopo aver salvato il template, si va su Modello > Modifica HTML e subito sopra a </head>, si incolla questo codice

• Codice di Cupido che scocca le frecce,

quindi subito sopra alla riga </body> si incolla 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>

e infine si salva il modello.

Demo Clicca qui

Gli effetti mostrati dovrebbero funzionare in qualsiasi pagina web che supporti il javascript.