Pubblicato il 28/01/14e aggiornato il

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 cuore-lampeggiante  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 cuore-pulsa .



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://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=//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://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>

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://lh3.googleusercontent.com/-THYrCOY5fiI/TzUoHNeRVsI/AAAAAAAAWf0/-X8fe3dYs7U/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 cuore 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

cupido-scocca-frecce
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
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://lh5.googleusercontent.com/-oMijP2tdVxs/TylEoERL9pI/AAAAAAAAWXs/8rk-oQtZomM/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;.





4 commenti :

  1. Teneri, i cuoricini per S.Valntino :)
    Ernesto, ho un problemino: aprendo la homepage del mio sito ogni tanto si apre in automatico anche questa finestra: http://www.cosmopolitan.it.com-html.pw/beauty/Corpo/Il-segreti-delle-star-per-perdere-peso/index.html?t202id=3367&t202kw=
    Sa tanto di virus interno a Blogger, ma come posso fare per eliminarlo?...
    Ti ringrazio

    RispondiElimina
    Risposte
    1. Credo che tu abbia inserito un widget malevolo. Il suffisso ?t202id=3367&t202kw= indica l'id del publisher che ci guadagna ogni qualvolta si apre quella pagina. Oppure potresti avere linkato una pagina con malware. Controlla gli ultimi widget e gli ultimi post che hai pubblicato e linka solo le pagine di cui sei sicura e metti widget affidabili.
      Potrebbe essere anche un problema di browser. Prova con uno che non usi quasi mai per verificare
      @#

      Elimina
    2. Grazie, Ernesto.
      Non ho inserito nuovi widgets ultimamente e non è un problema di browser perché continua a spuntare anche se disinstallo e reinstallo Firefox, e perfino se cambio pc.

      Ho pensato che poteva essere un articolo recente in cui, anziché salvare e inserire le immagini prese da un sito (affidabile) con cui sono affiliata, le ho solo copiate e incollate direttamente nel mio post, pertanto l'url delle immagini risultava esterno a Blogspot/Picasa. Ho provato a rimuoverle e reinserirle salvandole prima sul mio computer, e devo dire che la pagina malevola sembra non spuntare più. Poteva essere quello? Anche se nell'url delle immagini non compariva il link della pagina incriminata e anche se il sito da cui le ho copiate e incollate è affidabile?
      Grazie ancora per l'aiuto.

      Elimina
  2. Non si può dire con certezza ma se la pagina incriminata non si apre più doveva essere quello per forza
    @#

    RispondiElimina

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.