Pubblicato il 03/02/15 - aggiornato il  | 9 commenti :

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

cupido

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


cuore

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

demo-cuore

 

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.

demo-cuori

 

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


 

EFFETTO DEI CUORICINI LAMPEGGIANTI


Se preferite visualizzare come immagine di cuoricino quest'altra cuore-lampeggiante  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.


9 commenti :

  1. ciao Ernesto, è possibile inserire questo codice javascript in un post? grazie

    RispondiElimina
    Risposte
    1. Non vedo la ragione comunque puoi testare
      @#

      Elimina
    2. Forse ti sei espressa male o ho capito male io. Non è che ti riferisci alla possibilità di visualizzare solo in un post una delle personalizzazioni di San Valentino? Se è così si può fare molto facilmente utilizzando i tag condizionali
      http://www.ideepercomputeredinternet.com/2013/03/tag-condizionali-blogger.html
      Puoi usare i tag per mostrare l'elemento sono in una pagina incollando il relativo URL. Se hai un blog gratuito ricordati di usare il .com e non il .it
      @#

      Elimina
  2. ciao Ernesto, si hai capito bene, solo che volevo inserire lo script in una determinata pagina, come se fosse un anteprima e addirittura all interno di una textarea, non so se si può fare, ho letto l articolo che mi hai indicato ma non ho capito bene come devo sistemare il codice

    RispondiElimina
    Risposte
    1. Stavolta non ho proprio capito :)
      Che c'entra la textarea ... Se hai problemi con il post che ti ho linkato leggi i commenti che forse ti possono aiutare
      @#

      Elimina
  3. lasciamo stare la textarea, lo script dei cuoricini che cadono lo devo inserire nel gadget html/java e poi richiamarlo con qualche codice modificando l html del template? non voglio che si veda in tutto il blog ma sono in una pagina specifica. Ho letto nei commenti del post da te indicato ma credo che non ci sia nulla di inerente a quello che vorrei fare io, scusami ma alle volte faccio fatica

    RispondiElimina
    Risposte
    1. Inserisci il codice dei cuoricini in un elemento HTML/Javascript poi, per visualizzarlo solo in una determinata pagina o post, segui le indicazioni di questo post
      http://www.ideepercomputeredinternet.com/2013/03/tag-condizionali-blogger.html
      Cerco di spiegarmi meglio anche se è tutto nell'articolo.
      1) Leggi il post a partire dalla sezione
      COME USARE I TAG CONDIZIONALI NEI WIDGET
      2) Vai su Modello > Modifica HTML e cerca il widget che hai inserito. Per poterlo meglio individuare dagli un titolo che poi toglierai in un secondo momento
      3) Scorri il codice del widget fino a trovare le due righe
      b:includable id='main

      4) Rispettivamente subito sotto e subito sopra a queste righe incolla i tag condizionali
      <b:if cond='data:blog.url == "URL_PAGINA"'>
      e
      </b:if>
      dove al posto di URL_PAGINA ci metti l'indirizzo del post in cui visualizzare i cuoricini con il .com e non con il .it
      5) Salvi il modello. Fatto. Questa è una operazione che chi ha un sito su Blogger deve imparare a fare perché è utile in molti casi
      @#

      Elimina
    2. ok grazie infinite x la pazienza ci provo e ti faccio sapere :)

      Elimina
  4. Questo commento è stato eliminato dall'autore.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy