Effetti speciali di San Valentino da installare nel blog.

Come installare effetti di cuori animati e cupidi che lanciano le frecce nei blog su Blogger e Wordpress.

I widget dedicati alle festività sono tra i più richiesti dai lettori o meglio si dovrebbe dire dalle lettrici. Il 14 Febbraio sarà San Valentino, la festa degli innamorati, e sicuramente ci saranno delle blogger che vorranno abbellire il loro sito per l'occasione con effetti particolari se non altro per stupire i lettori. Vado quindi a elencare una serie di gadget di facile installazione che potranno essere inseriti pochi giorni prima della ricorrenza e tolti non appena sia finita.

Ho già presentato numerose personalizzazioni gli anni scorsi e non è che si possa inventare più di tanto. Si utilizzano molti cuori, cuoricini magari in formato GIF che vengono visualizzati nel sito come fossero una cascata animata oppure si può optare per il classico cupido che scocca le frecce. Questi gadget potranno essere installati sia sui blog Blogger sia su quelli Wordpress.

EFFETTO CUORICINI LAMPEGGIANTI

Su Blogger si va su Layout > Aggiungi un gadget > HTML/Javascript mentre su Wordpress si apre la Bacheca e si sceglie Aspetto > Widget > Testo e si trascina in una sidebar o meglio ancora nell'header se presente nel Tema. In entrambi i casi si incolla questo codice

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

I cuoricini che si visualizzeranno avranno questo aspetto   e ho usato Google Drive come Hosting del javascript. Un posizionamento centrale del gadget favorirà una migliore visualizzazione

EFFETTO CUORICINI PULSANTI

Su Blogger si va sempre su Layout > Aggiungi un gadget > HTML/Javascript mentre su Wordpress su Bacheca > Aspetto > Widget > Testo. Il codice da incollare in questo caso sarà

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

I cuoricini cadenti avranno questo aspetto .

CUORI CADENTI CON EFFETTO TRASPARENZA

L'effetto dei cuori cadenti trasparenti è un po' più complesso dei precedenti e utilizza la libreria JQuery. L'installazione però è sempre semplicissima. Per Blogger si va su Layout > Aggiungi un gadget > HTML/Javascript mentre per Wordpress si seleziona Bacheca > Aspetto > Widget > Testo. Il codice da incollare per poi salvare il widget è il seguente

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

dove gli URL colorati di rosso sono gli indirizzi web delle quattro immagini animate utilizzate nell'effetto che possono ovviamente essere sostituiti da altri.

CUORE TRASPARENTE CHE CADE

Si può creare una versione più semplice dell'effetto precedente con una sola immagine invece di quattro. Il codice da incollare con le stesse modalità sia per Blogger sia per Wordpress in questo caso è

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

L'immagine il cui URL è colorato di rosso è questa e può essere modificata.

CUPIDO CHE SCOCCA LE FRECCE

Per avere il classico cupido armato di arco che scocca frecce verso il lettore si deve usare un procedimento diverso che va testato nei vari modelli Blogger o temi Wordpress per testarne il funzionamento. L'immagine animata del cupido è la seguente

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga </head> presente in tutte le piattaforme. Subito sopra a questa si incolla in codice seguente

• Codice di Cupido per San Valentino -

Successivamente si cerca l'altra riga </body> e, subito sopra, 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 si salva il template. Ho postato una dimostrazione in rete

Il cupido con l'arco flotterà in tutto il layout. Si possono personalizzare alcune impostazioni oltre alla modifica dell'immagine il cui URL è colorato di rosso. All'inizio del primo codice ci sono alcune righe colorate di cui si possono settare i parametri. Per configurare il punto esatto in cui iniziare a vedere l'immagine animata si possono modificare top:50px; e left: -500px;.