Visualizzazione post con etichetta Grafica per il blog. Mostra tutti i post
Visualizzazione post con etichetta Grafica per il blog. Mostra tutti i post

Luci di natale animate nel blog!


luci di natale

Io adoro l’atmosfera natalizia: l’albero, il presepe, le luci fuori e un Babbo Natale appeso fuori dalla porta con una lavagnetta con scritto “Buon Natale da Orazio e Mary”. Ecco una modifica abbastanza semplice che vi permetterà di mettere le lucine (con tanto di effetti animati) anche nel blog. L’effetto originale l’ho trovato in questa pagina, ma ho dovuto fare diverse modifiche per farlo funzionare su Blogger.

Come sempre, fate prima un backup del template, perchè se c’è una cosa certa nella vita è l’imprevisto.

Icone social per tutti i gusti su CoolButton

CoolButton

Mentre oggi gironzolavo in rete, sono capitato in un sito carino che merita una menzione: CoolButton. Il sito è un raccoglitore di icone dei servizi social maggiormente diffusi: Facebook, Twitter, LinkedIn e Myspace, più le immancabili icone dei feed.

Effetto JavaScript: foglie che cadono

foglie che cadonoDa un po’ non propongo nuovi script e allora colgo la proposta di Vittoria di convertire per Blogger (ma può essere usato su qualsiasi piattaforma che accetti di inserire elementi di tipo Javascript) questo script di Dynamic Drive che farà cadere davanti agli occhi dei vostri visitatori delle foglie di varie dimensioni, a ricordare la stagione in cui siamo, come si vede in questa pagina di esempio.

Come sempre ho semplificato l’operazione, e l’inserimento del codice richiederà pochi secondi.

Fotomontaggi online: tre siti per rendervi ridicoli!

Ecco un’altra selezione di servizi che con pochi click vi permetteranno di diventare lo zimbello di amici e conoscenti (se lo siete già, per effetto chiodo schiaccia chiodo potrete smettere di esserlo, per poi ridiventarlo).

Comincio io, naturalmente!

Funnycollage: semplice da usare, basta scegliere l’effetto voluto dalla pagina principale e selezionare la foto con il vostro volto a cui applicarlo. Il sistema di riconoscimento facciale è molto preciso e il volto viene ritagliato perfettamente quasi senza dover mai sistemare a mano il risultato:

 image

Una volta creata la vostra opera d’arte basta cliccare su “Save picture” e nella pagina successiva potrete scegliere se pubblicarla online in tutti i servizi più diffusi o scaricarla direttamente cliccando col tasto destro sull’immagine e scegliendo “Salva immagine con nome…”.

San Valentino nel blog: scia di baci e cuoricini che segue il mouse!

San Valentino si avvicina e ogni occasione è buona per agghindare il blog con qualche nuovo effetto. Con quello che propongo in questo post, adattissimo all’occasione, l’impatto è garantito. Poi sono particolarmente soddisfatto perchè adattare il codice proposto da Dynamic Drive (andate nella pagina e muovete il mouse per vedere l’effetto finale) per farlo funzionare su Blogger e con i browser di oggi si è rivelata come sempre un’impresa titanica ma stavolta (ed ecco il motivo della mia soddisfazione) riuscita.

image

Aggiungere l’effetto al blog sarà cosa di pochi secondi, e sebbene le mie istruzioni si riferiscano a Blogger, lo script dovrebbe funzionare senza problemi su qualsiasi altra piattaforma (Splinder, Wordpress, e così via).

Invecchiare foto, aggiungere fumetti alle immagini, creare fotomontaggi online

Le rete offre continuamente molti nuovi servizi (gratuiti, che sono quelli che interessano a noi) che spesso approfondisco su queste pagine, ma mi rendo conto che le novità interessanti sono nettamente superiori a quelle che riesco a segnalare io. Per questo ho deciso di pubblicare periodicamente articoli come questo, dove non voglio limitarmi a segnalare un singolo sito ma una serie di essi, dalle tematiche comuni e che non richiedano una guida più approfondita per essere utilizzati.

Questo in particolare è dedicato a coloro che vogliono sbizzarrirsi a modificare foto e immagini applicando qualche effetto interessante.

IconFinder: ottimo motore di ricerca per icone!

Ultimamente, per un altro progetto, ho dovuto realizzare delle icone e cercando ispirazione e risorse in rete sono ricorso a Google Images, che sebbene proponga migliaia di risultati ha nella sua poca specializzazione il proprio punto debole: impossibilità di filtrare i risultati per il tipo “icona” e poca praticità nello stabilirne le dimensioni, senza contare le decine di risultati ripetuti.

E’ ovviamente possibile convertire da un formato all’altro, ma il risultato raramente è soddisfacente.

Guardando altrove ho trovato l’ottimo IconFinder, motore di ricerca specializzato in icone (nei due formati utilizzabili: ICO e PNG): la ricerca, in pieno stile Google – cioè inserendo le parole chiavi (o sfogliando per pacchetti), pesca tra oltre centomila immagini permettendo di filtrarne i risultati in modo molto veloce.

image

Come inserire le faccine animate nei post su Blogger

Da quando ho pubblicato il post su come inserire le emoticon nei commenti su Blogger, subito molti lettori mi hanno chiesto se fosse possibile farle apparire anche nei post. Cercando in rete per trovare ispirazione ho visto tante proposte ma che per un motivo o per un altro non andavano bene per tutti: alcuni richiedevano di usare Firefox + GreaseMonkey per scrivere i post che avrebbe escluso chi usa un altro browser o Windows Live Writer, alcuni propongono plugin per Windows Live Writer che avrebbe escluso chi non lo usa o non usa proprio Windows (dedico alla fine un paragrafo a quest’ultimo punto), e così via.

Alla fine ho deciso di riadattare lo script già scritto per i commenti e utilizzare sia lo stesso principio (le faccine saranno visibili alla pubblicazione del post) che le stesse faccine. Non ho modificato lo script già esistente per permettere la scelta di utilizzare uno o l’altro, o entrambi, a seconda delle esigenze.

image

Ho semplificato il tutto e l’operazione richiederà solo l’inserimento di una riga di codice nel template.

Decorazioni di Natale: effetti da inserire nel blog

Natale è alle porte e viene naturale decorare, oltre la casa, anche il blog. Ho dedicato alcuni post all’argomento l’anno scorso e dai commenti ho visto che molti sono andati a ripescarli, ma visto che è passato del tempo e tanti lettori si sono aggiunti da allora, ecco un post riassuntivo, così vi evitate di fare ricerche.

Questa lista si allungherà nei prossimi giorni: già da novembre mia moglie mi spinge ad aggiungere qualcosa di nuovo (il suo tempismo è nettamente migliore del mio) e da bravo marito non posso esimermi dai miei doveri. Se anche voi avete delle proposte, delle segnalazioni, o dei consigli su come modificare o migliorare gli effetti già presentati, lasciatemi un commento e ne vedremo la fattibilità!

Babbo Natale

Glitter text: creare scritte glitterate con Textanim 2.0

Textanim 2.0 è un generatore di scritte glitter davvero notevole, sia per la vasta quantità di motivi ed effetti applicabili, sia perché l’immagine verrà ospitata da Imageshack (quindi senza il rischio che scompaia col tempo, fermo restando che possiamo anche scaricarla), sia perché non applica nessuna pubblicità all’immagine ottenuta (se non il link diretto al sito nel caso decidessimo di usare il codice HTML fornito).

image

Calendari blog: 10 siti dove trovarli

image Mi è stato fatto notare che da tempo non dedico articoli ad elementi grafici da inserire nel blog, e comincio a rifarmi con questa collezione di 10 siti che offrono tutti calendari molto carini. E’ passato più di un anno dall’ultima volta che ho trattato quest’argomento, con il calendario umano: vi invito a darci un’occhiata se volete qualcosa di diverso dal solito.

Per aggiungere un calendario dai siti che propongo al vostro blog, ricordo che va copiato il codice HTML (se non vi funziona il tasto destro del mouse, copiate il codice con CTRL+C) e inserito in un elemento di tipo HTML/Javascript (nel caso di Blogger), o equivalente per altre piattaforme.

Chrome può segnalarvi che alcuni siti contengono Malware: non credetegli e andate avanti, installare i calendari non vi darà alcun problema nè lo darà ai vostri visitatori. Garantito al limone.

Creare divertenti fotomontaggi con Photo505

Dite la verità, quanti di voi sognano di vedere il proprio volto sulla maglietta di Paris Hilton? Sicuramente una moltitudine. Mi ha chiamato l’altro giorno proponendomi di creare una linea di magliette per il mio blog, ed eccone un primo prototipo:

1d097457d724241e0a52ccee74497f5c

C’è anche la versione con sondaggio in cui si deve toccare con mano l’opzione scelta. Per sapere il risultato si clicca su “Mostra tutto”.

Proteggere foto e immagini dal furto: siti e programmi per applicare watermark

Molti blogger fanno delle loro foto e delle loro immagini un elemento essenziale dei proprio spazi personali: penso per esempio ai blog di cucina, di scrapbook, o quelli semplicemente con le foto di tutti i giorni. Per molti può essere un problema economico o d’immagine: penso ai siti che trattano il mondo informatico e la tecnologia, che magari espongono screenshot in esclusiva di un software e vogliono evitare che le loro immagini vengano subito riutilizzate senza alcun credito alla fonte.

In questi casi si ricorre all’uso dei watermark, cioè loghi o scritte sovrapposti alle immagini originali, che ne indicheranno inequivocabilmente l’origine:

image

Sebbene esistano programmi generici di grafica, a pagamento come Photoshop o gratuiti come Gimp, che permettono di ottenere quest’effetto, ci sono software specializzati solo in questo o siti gratuiti che applicano dei watermark alle vostre immagini senza dover installare niente sul proprio computer.

Ecco un elenco proprio di diversi servizi, che si differenziano tra loro per gli effetti a disposizione, che arricchirò col tempo con eventuali vostre segnalazioni.

Website Ribbon Generator, generatore di ribbon per il blog

I ribbon (i “nastri” che si vedono in alcuni blog negli angoli in alto) sono spesso usati per segnalare un particolare evento o mettere in evidenza qualche area o link del sito. Website Ribbon Generator è un generatore di ribbon  molto usato, gratuito e privo di qualsiasi forma di pubblicità:

image

Ho segnalato recentemente via mail questo servizio a Davide e ho pensato di farlo conoscere anche ai lettori di questo blog.

Generare un ribbon

L’operazione è semplicissima, basta inserire un messaggio in Message (non troppo lungo magari!), mettere il link che sarà collegato al ribbon (opzionale), scegliere il font e il colore del testo, e il motivo del ribbon. A questo punto basta cliccare sul pulsante “Generate” pe vedere il risultato e avere il codice HTML da usare nel nostro blog:

image

Nel caso di Blogger, il codice HTML va incollato in un elemento di tipo HTML/Javascript, magari lasciato senza titolo. Ecco un esempio di quello che sarà il risultato:

image

Risolvere il problema delle faccine animate nei commenti che vanno in verticale

Nell’inserire le emoticon nei commenti molti hanno avuto il fastidioso problema di vedere la legenda comparire così:

image

Vediamo come risolverlo.

La causa del problema

Questo terribile effetto è dovuto alle impostazioni CSS del template di Blogger usato: sostanzialmente viene indicato di lasciare uno spazio prima e dopo ogni immagine. Mi sono fatto mandare il template di Alexs (dal cui blog ho anche catturato l’immagine) per fare le prove, e come si vede in quest’immagine anche le faccine che compaiono nei commenti hanno lo stesso problema:

image

Ma la cosa si nota anche in altre parti del blog, come mi ha fatto notare Alexs.

Ci sono tante soluzioni al problema, io ne propongo una radicale che avrà effetto su tutto il template (anche perchè presto parlerò di come utilizzare le stesse faccine nei post e non solo nei commenti, e il problema si ripresenterebbe). Proprio per questo motivo però potrebbero esserci effetti collaterali indesiderati, che comunque vedremo di capire assieme.

Modifichiamo il template di Blogger

Andiamo Layout->Modifica HTML, selezioniamo “Espandi i modelli widget” e cerchiamo questa riga di codice:

display: block;

Questa è la riga incriminata, però dobbiamo essere sicuri di beccare quella giusta. Se non l’avete ancora fatto, correte subito a fare il backup del template di Blogger, perchè potrebbe rendersi necessario andare per tentativi.

La riga infatti potrebbe essere presente più volte, ma a noi interessa che quella contenuta nel blocco img, che nel caso del template di Alexs si presenta così:

img {
border: 0;
display: block;
}

Bene, eliminate la parte in rosso e salvate il template, e il gioco è fatto.

Se non trovate un blocco di codice simile a quello da modificare, potete andare per tentativi togliendo una ricorrenza alla volta della riga incriminata e vedere cosa succede nel template. A mio avviso, comunque, dovrebbe essere possibile eliminarle tutte senza avere effetti collaterali nel layout del blog (e se li avete, adesso sapete che potete inveire contro l’autore del template).

Scritte Glitter, avatar animati, testo al contrario e molto altro su Glitter Graphics

Glitter Graphics è un grande raccoglitore di generatori di vario tipo e di immagini animate per chi vuole dare un tocco di colore al proprio blog, cerca qualche avatar animato particolare o vuole creare scritte glitter un po’ diverse dal solito.

Per ogni effetto generato, è possibile prelevare il codice HTML che può essere usato ovunque e che nel caso di Blogger può essere inserito in un elemento di tipo HTML/Javascript.

Tra le cose da segnalare, il generatore di scritte glitter (alcuni caratteri sanno di già visto, altri sono più particolari):

image

la sezione degli avatars, con oltre 10.000 immagini animate:

image

il generatore di testo rovesciato:

image

la sezione delle gif animate, anche in questo caso con oltre 10.000 immagini animate, suddivise per categoria:

image

e oltre 20.000 testi glitter già pronti per l’uso:

image

Ma c’è davvero molto altro. Le immagini possono essere scaricate liberamente e senza pubblicità all’interno (come il gattino che vedete in alto a destra nel post), e i generatori producono codice che si limita a linkare il sito. Per gli amanti del genere, consiglio di dare un’occhiata a Glitterbank e Glowtxt.

Risolvere il problema della favicon che non viene visualizzata su Internet Explorer

image La Microsoft con Internet Explorer è un mondo a parte. Non sono un discepolo dell’accademismo degli standard come quelli del W3C: se fosse per loro, probabilmente Internet sarebbe indietro di 10 anni, visto che ancora stanno discutendo su come inserire correttamente un’animazione in flash in una pagina HTML (purtroppo i tecnici non capiranno mai le esigenze di mercato nè dei suoi consumatori). Nè sono un anti-Microsoft, visto che anche adesso per scrivere il post utilizzo un loro software.

Ma Internet Explorer è tutto un mondo a parte: ogni volta far funzionare un JavaScript, qualche riga CSS, o visualizzare bene questo blog è un dramma senza fine. Per favore, scaricate Chrome, Firefox, Safari ed eliminiamolo dalla rete.

Tempo fa avevo spiegato come cambiare la favicon del blog (l’icona che appare nel browser quando viene caricata la pagina o viene messa nei preferiti), e fin da subito tutti hanno avuto problemi a farla visualizzare con Internet Explorer (me compreso).

Ecco come venirne a capo.

Problema di formato

Ci sono tanti modi per ovviare al problema, ma io espongo il più semplice: cambiare il formato dell’immagine. Dopo aver creato la vostra icona (dimensioni 16x16 o 32x32) convertitela in formato ICO utilizzando un programma gratuito come IconShop (qui il link diretto per il download).

Dopo averlo installato, aprite l’icona dal vostro disco e convertitela da File –> Export as –> Icon... :

image

Inserire la favicon nel blog

Per inserire la favicon nel blog, andate in Layout->Modifica HTML, selezionate “Espandi i modelli widget” e cercate questa riga verso l’inizio:

<title><data:blog.pageTitle/></title>

Subito sotto, incollate

<link href='indirizzo immagine' rel='shortcut icon' type='image/x-icon'/>

Sostituendo indirizzo immagine con l’indirizzo dell’icona che avrete pubblicato in rete su servizi come Skydrive. Se avete già inserito il codice per visualizzare la favicon come spiegato nel precedente post, eliminatelo e sostituitelo con questo.

Se non trovate la porzione di codice che ho indicato, cercate questa:

<b:skin><![CDATA[/*

E incollate il codice subito sopra.

Salvate il template e accendete un cero a San't’Agata (sostituendo Sant’Agata con il patrono/la patrona della vostra città). Visualizzando il blog su Internet Explorer il problema dovrebbe essere risolto (almeno finchè la Microsoft non ne pubblicherà una nuova versione):

image

42 immagini animate di Pucca e Garu

Girovagando nei blog, ho trovato in quello di Lecca (della quale in passato ho anche proposto alcuni template) una bella collezione di immagini animate di Pucca e Garu.

Personalmente adoro queste cose piccole e coccolose (come mia moglie, nel senso che anche lei è piccola e coccolosa). Tra l’altro proprio ieri mi sono imbattutto nella bilancia di Hello Kitty. Tranquilli, mi sono astenuto dal comprarla (ma un pensierino ce l’ho fatto, come penso pure mia moglie).

Se utilizzate Windows Live Writer, per inserirla in un post dovrete farlo da Inserisci->Immagine…->Da Web, incollando l’indirizzo dell’immagine che avete scelto in URL immagine. Per avere l’indirizzo di un’immagine, basta cliccarci col tasto destro e scegliere “Copia indirizzo immagine” o equivalente.