Pubblicato il 02/04/15 - aggiornato il  | Nessun commento :

Come abbellire il blog su Blogger per le Feste di Pasqua.

Effetti speciali da installare nei blog su piattaforma Blogger per le Feste di Pasqua.
In occasione di festività particolarmente importanti è mia abitudine pubblicare una raccolta di widget per rendere il layout del nostro sito su Blogger in linea con quel periodo dell'anno. L'ho fatto per Halloween, per Natale e per San Valentino e adesso mi appresto a farlo anche per le Festività Pasquali

Non è che si possa inventare chissà che cosa e alla fin fine si utilizzano i soliti script modificati con immagini pasquali. Quasi tutti gli effetti li avevo già presentati anche in passato quindi per i lettori che mi seguono da più tempo probabilmente non rappresenteranno una novità.

EFFETTO DEI CAMPANELLI PASQUALI


L'immagine utilizzata per questo effetto è la seguente   e per la sua installazione si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e si incolla questo codice
Si salva e si posiziona preferibilmente subito sopra l'area del post.
 
campanelli-pasqua

Ho anche pubblicato una demo online

demo

 

TRE IMMAGINI PASQUALI ANIMATE FLOTTANTI


Una soluzione più originale è quella di tre campanelli animati che si muovono nel blog

demo-pasqua

con un effetto di questo tipo

effetti-pasqua-campanelli

Dopo aver salvato il template si va su Modello > Modifica HTML, si cerca la riga </head> e, subito sopra, si incolla il seguente codice 

<!--Effetto Pasqua Inizio-->
<script src='https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/movimento.js' type='text/javascript'/>
<script type='text/javascript'> var immaginea, immagineb, immaginec
function pagestart(){ immaginea=new ipcj1(&quot;immaginea&quot;,70,82);
immagineb=new ipcj1(&quot;immagineb&quot;,50,60);
immaginec=new ipcj1(&quot;immaginec&quot;,30,40);
idpceinmov3(&quot;immaginea&quot;);
idpceinmov3(&quot;immagineb&quot;);
idpceinmov3(&quot;immaginec&quot;);
} if (window.addEventListener)
window.addEventListener(&quot;load&quot;, pagestart, false)
else if (window.attachEvent)
window.attachEvent(&quot;onload&quot;, pagestart)
else if (document.getElementByid)
window.onload=pagestart </script>
<!--Effetto Pasqua Fine -->

Si salva il modello. Il javascript colorato di viola è stato caricato su Google Drive. Si va quindi su Layout > Aggiungi un gadget > Base > HTML/Javascript e in Sezioni del sito si incolla

<div id="immaginea" style="position:absolute; left: -300px; width:70; height:70;">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKnMPSR3g7cZR7MHhub1DqdSBSYI5xCDkusygb-5kQvAh_ud3ylBr5ewsIbIaAtx9brfhIKiDjPNPsfayKCo2NcOtfwT0EzgiLZUCcwfE2eTwj2nJFsQ-14VYIzDX4q0ws53ZAT8YvMRE/" border="0" /></a></div>
<div id="immagineb" style="position:absolute; left: -400px; width:70; height:70;">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUr-umvlK6o7v9ut-XkvPkKmAsN_bPxdqc1tRUSvTFQ-vvhyn2N5aQ2EMw9NJD4HRZI-pF09bKzEIpSjyvYCV4uX6wn9gIlHA10dYsARGoBHqExGcYK98C-TSwf5hFIc2MxORguUTUPJI/" border="0" /></a></div>
<div id="immaginec" style="position:absolute; left: -500px; width:70; height:70;">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXAii1agOEsTAAJ_LbB80nQ54spgHPbwu2OqIhRtaX6KKf0AuGpXD81DG21i_vbc5lI73fmx9NJL93GYaCXOchL0F6Si78KDwlu3pgHy0v57rVq1wqMK4laB8ghM5WwtKjaErX5DgVdkk/" border="0" /></a></div>

Si salva e si posiziona sopra l'area del post. Le immagini sono inserite tramite il loro URL colorato di rosso mentre opzionalmente si possono anche inserire dei link al posto dei cancelletti ( # ).

CADUTE DI OGGETTI PASQUALI


Riporto anche il classico effetto ricavato da Dynamic Drive usato per la prima volta per la nevicata.



Il codice è semplicissimo e si inserisce senza modificare  il modello. Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e in Sezioni del sito si incolla questo codice

<script src="https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua1.js" type="text/javascript"/></script>
Si salva e preferibilmente si posiziona sopra l'area del post. L'immagine cadente è la seguente pasqua-uova. Si possono usare anche altre immagini che ho già caricato insieme allo script su Google Drive. Basterà modificare nel codice l'indirizzo del javascript. Accanto all'URL è mostrata l'immagine relativa

https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua2.js  pasqua-uova
https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua3.js pasqua-uova
https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua4.js pasqua-uova
https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua5.js pasqua-uova
https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua6.js  pasqua-uova
https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua7.js pasqua-uova
https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/pasqua8.js pasqua-uova

 

ANGELI ANIMATI CHE CADONO

 

Concludo gli Effetti Pasquali con una serie di angeli animati che cadono nel sito

angeli-cadenti

con un effetto di opacità e dissolvenza. Si può anche visualizzarlo online

angeli-cadenti

Si va su Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si incolla

<script>   
    if(typeof $pdj=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/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['angeli']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX7-6Hcowid93PW5YdvpWSYZmk8BwBzJuc7LsPayrNEA5GLh_zD8lwxhVrATMX9VlB-ExzaQ9_qfIsxSNxDO6YiK37bg70qpGhb81GlZt-8_uqxeks3gZD7_-nnyZu6k3rC81CGvUF-Qk/s100/Angelo100.gif";$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','corazonDiv').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['angeli']).css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('corazonDrop').appendTo('#corazonDiv');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 e si posiziona preferibilmente sopra l'area del post. L'URL della immagine colorato di rosso può essere sostituito da quello di un'altra immagine a piacere. Lo script utilizza JQuery


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.
Info sulla Privacy