Pubblicato il 26/01/13e aggiornato il

Come inserire cuori nel blog per San Valentino.

Come inserire nel blog una cascata di cuoricini anche animati in occasione della festa di San Valentino.
Tutti gli anni mi sono cimentato nella realizzazione di un widget per ricordare la festività degli innamorati. L'effetto più richiesto per San Valentino del 14 Febbraio è quello dell'inserimento nel sito di cuoricini che cadono. Si può usare il classico script di Dynamic Drive sulla neve che cade modificando le immagini oppure si può usare la libreria JQuery. Visto che ogni anno bisogna pur cambiare qualcosa nei gadget stagionali ho preferito optare per questa seconda possibilità presentando un nuovo widget che ha però la stessa funzione degli altri. Rispetto al widget della nevicata in questo caso si possono scegliere 4 immagini anche diverse da quelle che ho proposto. Il formato richiesto è il PNG ma si possono usare anche immagini animate in formato GIF.

Nella mia demo ho inserito 3 immagini in PNG e una in GIF



Per l'installazione dell'effetto non bisogna modificare il template. Basta andare su Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, incollare il seguente codice

<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!cuori){var cuori=Array()}if(!flash_urls){var flash_urls=Array()}cuori['rain1']="https://lh3.googleusercontent.com/-7EEsjFHGXlA/UQOVctk1EFI/AAAAAAAAfYE/UqcUlpun0Dk/s36/cuore1.png";cuori['rain2']="https://lh3.googleusercontent.com/-kze60BJqwEA/UQOaWXzehTI/AAAAAAAAfZA/GowZfItRXVU/s81/cuore5.gif";cuori['rain3']="https://lh6.googleusercontent.com/-oYFWTBNAWiU/UQOVhKFyr2I/AAAAAAAAfYU/fXlDpK5KbBQ/s36/cuore3.png";cuori['rain4']="https://lh3.googleusercontent.com/-GEKdFJqMcWc/UQOVjQSemkI/AAAAAAAAfYc/XJ3BMI8v2V8/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=http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js>');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'https://lh3.googleusercontent.com/-7EEsjFHGXlA/UQOVctk1EFI/AAAAAAAAfYE/UqcUlpun0Dk/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 e si posiziona con il mouse preferibilmente subito sopra all'area del post

posizionamento-elemento-pagina

Ho messo il titolo al widget per chiarezza ma si può tranquillamente tralasciare altrimenti si vedrebbe nel layout. Dopo aver salvato la disposizione si controlla il funzionamento del gadget. Si vedranno i cuoricini che cadono dall'alto e che si dispongono nella parte bassa fino a scomparire.

Le immagini hanno gli URL colorati di rosso e possono essere sostituite da altre di vostro gradimento. In linea di massima la loro dimensione è meglio che non superi i 40-45 pixel ma si può provare con immagini più grandi anche tutte animate in formato GIF. Questa procedura oltre che su Blogger è anche applicabile ad altri CMS o servizi gratuiti di blogging. Basta che sia fattibile l'inserimento di javascript. Su Wordpress per esempio si va su Widget > Aggiungi un widget > Testo, si trascina in una sidebar e vi si incolla il codice. di Ricordo altri post su San Valentino:




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. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.