Effetti speciali di Natale per il blog (3° parte)

Come installare effetti speciali quali stelle comete, luci natalizie o cursori personalizzati in occasione delle Feste di Natale.

Sono già arrivato al terzo post sulle personalizzazioni che possono essere aggiunte al nostro sito su Blogger, ma non solo, in occasione delle Feste di Natale. Ce ne sarebbero molti altri ma non ho ancora deciso se continuare a proporli o passare rapidamente a qualche altro argomento. 

In linea di massima un inserimento di effetti di tipo stagionale è consigliabile per dare un tocco di attualità ai blog e per rendere il lettore più partecipe di contenuti specifici di questo periodo dell'anno che abbiamo già postato o che pubblicheremo in seguito.

Bisogna avere l'accortezza di non appesantire troppo il caricamento della pagina ma anche questo è un problema relativo visto che la personalizzazione dura un mese al massimo e che dopo ritornerà tutto come prima anche dal punto di vista dei motori di ricerca. Ricordo gli articoli già scritti su questo tema

1. Effetti speciali di Natale per blog (1° parte)
2. Effetti speciali natalizi per blog (2° parte)

e passo subito a illustrare nuove interessanti personalizzazioni.

STELLE COMETE CHE CADONO NEL BLOG

Per questo effetto si va su Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si incolla il codice seguente quindi si salva l'elemento pagina

<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.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['stella-cometa']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBxWc7vV77tkzWJqy7ISqua79My4qjS8X8IbzhuvcMpleyNO4FHLJH3mgrwp-oQh5Mq6Ne_hBsAbso4jc3JJ-lgP4SYEGJuUUQwyvg8LiLy96VcO6hHNm_oyC_gU5LoUCuHlXuVWl_Ccaq/s160/stella-cometa.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','stellaDiv').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['stella-cometa']).css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('stellaDrop').appendTo('#stellaDiv');f(g);g=null};var h=0;var j=0;$pdj(window).resize(function(){c=$pdj(window).width();d=$pdj(window).height()})});</script>

Potete vedere il risultato nella dimostrazione online



Si può sostituire l'URL della immagine della cometa con quello di un'altra.

MOUSE CON SCIA CON MOTIVI NATALIZI

In molti blog amministrati da donne sono visibili dei cursori personalizzati che in epoca di Feste di fine anno possono avere dei motivi natalizi. L'effetto che vado a presentare non personalizza tanto il cursore che rimarrà identico ma crea una scia quando il mouse si sposta. La scia è formata da immagini in tema di Natale e il widget si deve a un sito giapponese che non linko perché non sono sicuro della paternità visto la difficoltà di interpretare le lingue orientali

Si va su Modello > Modifica HTML, si cerca la riga </body> e, subito sopra, si incolla il codice

<!-- Cursori personalizzati Natale -->
<div style='display:none'><script src='http://blogparts.giffy.me/0035/parts.js' type='text/javascript'/><p style='text-align: center;margin:0;padding:0;'><img alt='christmas-cursor' src='http://blogparts.giffy.me/0035/parts.png' style='border:0;'/></p></div>

quindi si salva il template. Anche per questo c'è una demo online

 

LUCI NATALIZIE

Il layout dei blog ha quasi sempre le due parti laterali vuote perché la risoluzione degli schermi del computer è decisamente maggiore di quella che è la larghezza standard intorno o di poco superiore ai 1000 pixel. Vediamo come visualizzare proprio in questa zona delle luci di Natale in questo modo 

Si accede a Layout > Aggiungi un gadget > HTML/Javascript e si incolla questo codice

<script language=javascript type=text/javascript>
//<![CDATA[
var Ovr2b='';
if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat')
{cot_t2_DOCtp="_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}";}
else
{cot_t2_DOCtp="_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);_left:expression(document.body.scrollLeft + document.body.clientWidth - offsetWidth);}";}
if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat')
{cot_t2_DOCtp2="_top:expression(document.documentElement.scrollTop-20+document.documentElement.clientHeight-this.clientHeight);}";}
else
{cot_t2_DOCtp2="_top:expression(document.body.scrollTop-20+document.body.clientHeight-this.clientHeight);}";}
var cot_tl4_bodyCSS='* html {background: fixed;background-repeat: repeat;background-position: right top;}';
var cot_tl4_fixedCSS='#cot_tl4_fixed{position:fixed;';
var cot_tl4_fixedCSS=cot_tl4_fixedCSS+'_position:absolute;';
var cot_tl4_fixedCSS=cot_tl4_fixedCSS+'top:0px;';
var cot_tl4_fixedCSS=cot_tl4_fixedCSS+'right:0px;';
var cot_tl4_fixedCSS=cot_tl4_fixedCSS+'clip:rect(0 100 85 0);';
var cot_tl4_fixedCSS=cot_tl4_fixedCSS+cot_t2_DOCtp;
var cot_tl4_popCSS='#cot_tl4_pop {background-color: transparent;';
var cot_tl4_popCSS=cot_tl4_popCSS+'position:fixed;';
var cot_tl4_popCSS=cot_tl4_popCSS+'_position:absolute;';
var cot_tl4_popCSS=cot_tl4_popCSS+'height:1920px;';
var cot_tl4_popCSS=cot_tl4_popCSS+'width: 98px;';
var cot_tl4_popCSS=cot_tl4_popCSS+'right: 120px;';
var cot_tl4_popCSS=cot_tl4_popCSS+'bottom: 20px;';
var cot_tl4_popCSS=cot_tl4_popCSS+'overflow: hidden;';
var cot_tl4_popCSS=cot_tl4_popCSS+'visibility: hidden;';
var cot_tl4_popCSS=cot_tl4_popCSS+'z-index: 100;';
var cot_tl4_popCSS=cot_tl4_popCSS+cot_t2_DOCtp2;
document.write('<style type="text/css">'+cot_tl4_bodyCSS+cot_tl4_fixedCSS+cot_tl4_popCSS+'</style>');
function COT(cot_tl4_theLogo,cot_tl4_LogoType,LogoPosition,theAffiliate)
{document.write('<div id="cot_tl4_fixed">');
document.write('<><img src='+cot_tl4_theLogo+' alt="" border="0"></a>');
document.write('</div>');}
//if(window.location.protocol == "http:")
COT("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiWFvtqAb_neiKk49b2N9WsoWG0ByNfuVu2rUvC_VDxRN2bbpx3VeySkpuglWQgEU-QJksuw5BGFmycW3Gis4PaeLDPxgLfUcMfEgO_AgFsKUhgdUX9XSPmc8IeVFoCEKpSlm6zuWXX7SK/s1200/luci-destra.png", "SC2", "none");
//]]>
</script>
<script language=javascript type=text/javascript>
//<![CDATA[
var Ovr2b='';
if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat')
{cot_t2_DOCtp="_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}";}
else
{cot_t2_DOCtp="_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);_left:expression(document.body.scrollLeft + document.body.clientWidth - offsetWidth);}";}
if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat')
{cot_t2_DOCtp2="_top:expression(document.documentElement.scrollTop-20+document.documentElement.clientHeight-this.clientHeight);}";}
else
{cot_t2_DOCtp2="_top:expression(document.body.scrollTop-20+document.body.clientHeight-this.clientHeight);}";}
var cot_tl3_bodyCSS='* html {background: fixed;background-repeat: repeat;background-position: left top;}';
var cot_tl3_fixedCSS='#cot_tl3_fixed{position:fixed;';
var cot_tl3_fixedCSS=cot_tl3_fixedCSS+'_position:absolute;';
var cot_tl3_fixedCSS=cot_tl3_fixedCSS+'top:0px;';
var cot_tl3_fixedCSS=cot_tl3_fixedCSS+'left:0px;';
var cot_tl3_fixedCSS=cot_tl3_fixedCSS+'clip:rect(0 100 85 0);';
var cot_tl3_fixedCSS=cot_tl3_fixedCSS+cot_t2_DOCtp;
var cot_tl3_popCSS='#cot_tl3_pop {background-color: transparent;';
var cot_tl3_popCSS=cot_tl3_popCSS+'position:fixed;';
var cot_tl3_popCSS=cot_tl3_popCSS+'_position:absolute;';
var cot_tl3_popCSS=cot_tl3_popCSS+'height:1920px;';
var cot_tl3_popCSS=cot_tl3_popCSS+'width: 98px;';
var cot_tl3_popCSS=cot_tl3_popCSS+'right: 120px;';
var cot_tl3_popCSS=cot_tl3_popCSS+'bottom: 20px;';
var cot_tl3_popCSS=cot_tl3_popCSS+'overflow: hidden;';
var cot_tl3_popCSS=cot_tl3_popCSS+'visibility: hidden;';
var cot_tl3_popCSS=cot_tl3_popCSS+'z-index: 100;';
var cot_tl3_popCSS=cot_tl3_popCSS+cot_t2_DOCtp2;
document.write('<style type="text/css">'+cot_tl3_bodyCSS+cot_tl3_fixedCSS+cot_tl3_popCSS+'</style>');
function COT(cot_tl3_theLogo,cot_tl3_LogoType,LogoPosition,theAffiliate)
{document.write('<div id="cot_tl3_fixed">');
document.write('<><img src='+cot_tl3_theLogo+' alt="" border="0"></a>');
document.write('</div>');}
//if(window.location.protocol == "http:")
COT("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd8hAQqSiveSkxNQ8v3eN7C6W003uQYZ0_A6ehq5bGp69NVvuvrm2mFjFY9OB9HkWLMH_9VO5R5pXchtwD9yILb1tgJ-Qoe1qqyXh7zOB4YIQkEeHESnFG3Xs7Pz7xAUd6qapBaeUIuvhi/1200/luci-sinistra.png", "SC2", "none");
//]]>
</script>

Si salva il modello. Ecco la demo di questo effetto

La dimensione delle immagini e quindi delle luci può essere configurata a piacere agendo su s1200 colorato di rosso nel codice sia per le luci di sinistra sia per quelle di destra. Se si vuole aumentare la loro dimensione si sostituisce s1200 per esempio con s1600 mentre per diminuirla si sostituisce per esempio con s1000. Le immagini caricate su Picasa hanno infatti la caratteristica importante che possono essere infatti ridimensionate modificando l'URL.