Come abbellire il blog per la Festa di San Valentino.

Effetti speciali e personalizzazioni da inserire nei blog di Blogger e Wordpress in occasione della festività di San Valentino.

Il 14 Febbraio come noto a tutti si festeggia San Valentino il santo degli innamorati che è venerato non solo dai cattolici ma anche dagli ortodossi e dagli anglicani. Valentino fu un vescovo romano sepolto a Terni dopo la tortura e il martirio e vissuto intorno al 200 dC. La festività cristiana pare derivi da quella pagana di Lupercalia ed è stata associata a San Valentino perché la tradizione fu diffusa dai monaci benedettini di Terni prima in tutta Italia quindi in Francia e Inghilterra.

Forse non tutti sanno che il 15 Febbraio San Faustino è invece la Festa dei Single. La tradizione vuole che San Faustino in quel di Brescia desse l'opportunità alle ragazze di incontrare il loro futuro innamorato. È difficile che un blogger pensi a personalizzare il blog in occasione della festa dei single mentre in certe tipologie di siti renderlo in tema con la più conosciuta festa degli innamorati è piuttosto comune. Negli anni passati ho pubblicato una gran quantità di articoli su questo tema. Penso di fare cosa gradita ai lettori di ripresentare quelli più interessanti e facili da utilizzare.

CUPIDO PER SAN VALENTINO

Per visualizzare Cupido che scocca le frecce e si muove nel layout dopo aver salvato il template si va su Modello > Modifica HTML e cercare la riga </head>. Subito sopra va incollato questo

• Codice di Cupido per San Valentino -

Successivamente si cerca la riga </body> e subito sopra si incolla questo secondo 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>

Si salva il modello.

 

CUORI TRASPARENTI CHE CADONO

Per visualizzare una serie di cuori trasparenti che cadono nel sito si va su Layout > Aggiungi un gadget > Base > 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 l'elemento pagina. L'immagine del cuore che cade è la seguente




e volendo può essere modificata sostituendo l'URL colorato di rosso

 

CUORI CADENTI

Invece che un solo cuore si possono inserire più immagini per ottenere un effetto più complesso. Si va sempre su Layout > Aggiungi un gadget > Base > HTML/Javascript e 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 pagina. Naturalmente gli URL delle immagini possono essere cambiate.

 

EFFETTO DEI CUORICINI PULSANTI CHE CADONO

 

Uno degli effetti più classici sono quelli che derivano da un celebre script di Dynamic Drive. Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e si incolla questo codice 

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

Si salva l'elemento pagina. L'immagine scelta è la seguente    

 

EFFETTO DEI CUORICINI LAMPEGGIANTI

Se preferite visualizzare come immagine di cuoricino quest'altra   allora il codice da incollare su Layout > Aggiungi un gadget > Base > HTML/Javascript è il seguente

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

Per questi due ultimi effetti ho caricato lo script su Google Drive.Se avete un blog su Wordpress potete provare a testare il funzionamento di alcuni di questi script incollando il codice nelle posizioni indicate mentre invece che su Layout andare su Aspetto > Widget > Testo.