-
.
Ragazzi, il compleanno di Pets Life si avvicina! Lunedì prossimo, il 22 aprile, Pets Life compie 3 anni! 
Per l'occasione ho voluto farvi un regalino grafico, cioè una firma animata che potrete personalizzare con i vostri animali
Ecco un esempio:
Requisiti delle immagini
- Le immagini devono essere quadrate, altrimenti risulteranno allungate o stirate.
- Le immagini preferibilmente devono avere dimensione di 200x200 px. Se sono più piccole risulteranno sgranate all'atto dell'ingrandimento. Sconsiglio di usare immagini più grandi, perché si potrebbe perdere in nitidezza (visto il ridimensionamento da browser), oltre al fatto che le immagini grandi ci mettono più tempo per caricarsi.
Come si ritagliano le immagini?
Installazione
Ecco il codice che dovere incollare nella vostra firma...
- Al posto di LINK IMMAGINE 1 dovete inserire il link di una foto di un vostro animale.
- Al posto di LINK DISCUSSIONE 1 dovete inserire il link alla discussione sul forum in cui si parla dell'animale nella foto. Questa parte è facoltativa, ma se inserite il link sarà possibile raggiungere la discussione sul vostro animale in maniera rapida
- Al posto di NOME 1 dovete inserire il nome del vostro animale. Questa parte è essenziale se volete visualizzare le etichette gialle dei nomi dei pets.
- Procedete in questo modo per tutti gli animali che volete inserire, per un massimo di 6 pets.
- Se avete meno di 6 animali, DOVETE cancellare le righe in eccesso, facendo attenzione a NON cancellare il /div finale. Cancellate SOLO le righe numerate che non vi servono.
Versione CON le etichette gialle dei nomiHTML<div class="firma_animata">
<a href="LINK DISCUSSIONE 1"><img class="img1" src="LINK IMMAGINE 1"/><span class="petname1">NOME 1</span></a>
<a href="LINK DISCUSSIONE 2"><img class="img2" src="LINK IMMAGINE 2"/><span class="petname2">NOME 2</span></a>
<a href="LINK DISCUSSIONE 3"><img class="img3" src="LINK IMMAGINE 3"/><span class="petname3">NOME 3</span></a>
<a href="LINK DISCUSSIONE 4"><img class="img4" src="LINK IMMAGINE 4"/><span class="petname4">NOME 4</span></a>
<a href="LINK DISCUSSIONE 5"><img class="img5" src="LINK IMMAGINE 5"/><span class="petname5">NOME 5</span></a>
<a href="LINK DISCUSSIONE 6"><img class="img6" src="LINK IMMAGINE 6"/><span class="petname6">NOME 6</span></a>
</div>
In alternativa...
Versione SENZA le etichette gialle dei nomiHTML<div class="firma_animata">
<a href="LINK DISCUSSIONE 1"><img class="img1" src="LINK IMMAGINE 1"/></a>
<a href="LINK DISCUSSIONE 2"><img class="img2" src="LINK IMMAGINE 2"/></a>
<a href="LINK DISCUSSIONE 3"><img class="img3" src="LINK IMMAGINE 3"/></a>
<a href="LINK DISCUSSIONE 4"><img class="img4" src="LINK IMMAGINE 4"/></a>
<a href="LINK DISCUSSIONE 5"><img class="img5" src="LINK IMMAGINE 5"/></a>
<a href="LINK DISCUSSIONE 6"><img class="img6" src="LINK IMMAGINE 6"/></a>
</div>
ATTENZIONE: il codice funziona SOLO su Pets Life, poiché l'animazione è installata su questo forum. Sugli altri forum di BlogFree vedrete semplicemente le immagini quadrate 200x200 prive di animazione.
Che ne dite, vi piace l'idea?
Edited by =Kiara= - 27/4/2013, 23:35
. -
.
Ahahahah c'ho capito poco. Quando si parla di grafica anche se è scritto chiaramente in italiano non ci capisco nulla. 
L'idea è a dir poco stupenda.
Ora vedo il primo che mette le proprie foto e faccio lo stesso.
. -
Cerbiatta03.
User deleted
Ha ha! Anch'io sono ignorante da questo punto di vista 
! Comunque bell' idea (anche se io ho solo un animale: Molly ).
. -
.CITAZIONEQuando si parla di grafica anche se è scritto chiaramente in italiano non ci capisco nulla.
Davide, se mi dici cosa non ti è chiaro posso provare a scrivere la spiegazione in altro modo
Comunque, fondamentalmente, il codice da usare è quello indicato sopra. Tu devi solo inserire i link delle tue discussioni e le immagini dei tuoi animali. Se mi fornisci queste cose posso anche prepararti il codice ioCITAZIONEComunque bell' idea (anche se io ho solo un animale: Molly ).
Se la firma ti piace puoi utilizzarla tranquillamente anche per un solo animale
Ne vedrai uno, anziché 6, ma l'animazione è la stessa
Anche tu, se mi fornisci i link della discussioni di Molly e il link ad una foto quadrata ti posso preparare il codice su misura
. -
.
Kia non ho le foto proprio quadrate. Infatti ridimensionandomele mi escono le misure 200x150. Sono rettangolari. E ora come faccio? . -
iryng78.
User deleted
Kia, ottima idea!! il mio problema è solo il tempo per verificare che foto postare e la ridimensione... vediamo, cercherò di impegnarmi.
Davide, poi hai risolto? il codice è lo stesso che usi quando vuoi postare un link solo che in questo caso specifico ogni href è chiuso all'interno di una classe che Kia ha chiamato class="firma_animata" che richiama poi il vero codice dove viene gestita l'animazione.
Non sò se sono stata abbastanza chiara
Per la redimensione della foto quale programma consigli?. -
.
Ahahah Ire voi siete chiarissime, figuratevi. Il problema è che io sono stupido su questo campo e lo sai.
Non c'ho capito nulla sebbene fosse scritto in italiano, comunque vedrò un po'. Grazie comunque.
. -
.CITAZIONEPer la redimensione della foto quale programma consigli?
Se siete pratici con i programmi di editing grafica allora sicuramente uno di quelli: Ps, PSP, Gimp... vanno benissimo!
Altrimenti ho cercato uno strumento online: ce ne sono diversi, ma quello più comodo che ho trovato è Web Resizer.
Caricate l'immagine
Cliccate su "
Crop Image".
Settate una dimensione 200x200 e mettere la spunta per bloccare le proporzioni, in modo da mantenere il formato quadrato.
Ora modificate e spostate la selezione quadrata sull'immagine in base alle vostre preferenze
Quando siete soddisfatti della vostra immagine, cliccate su "apply changes" per salvare le modifiche.
Poi cliccate su "download this image" per scaricarla.
Ora avrete un'immagine adatta ad essere aggiunta nella firma. Caricatela sul web usando i soliti host, come TinyPic, ImageShack, Picasaweb o dove volete voi. Quando avrete il link dell'immagine, inseritelo nel codice indicato nell'installazione.
Edited by =Kiara= - 26/4/2013, 21:50. -
.
Grazie Kia. Penso di saper fare questo.
Ora però sono impegnato nella sezione 'Pubblicità' a dare una ripulita. Magari dopo.
. -
iryng78.
User deleted
Direi molto utili le tue indicazioni.... provo subito! grazie Kia.
. -
.
Ire, ho visto che hai aggiunto l'immagine alla firma, ma non si vede.
Il codice che devi usare è questo:HTML<div class="firma_animata">
<a href="LINK DISCUSSIONE 1"><img class="img1" src="http://img836.imageshack.us/img836/6364/foto5opt.jpg"/></a>
</div>
<br/><br/><br/><br/><br/>
Se aprirai una discussione su Kira, potrai linkarla al posto di LINK DISCUSSIONE 1, altrimenti già così dovrebbe vedersi l'immagine
. -
iryng78.
User deleted
Ma grazie Kia!!!! L'ho provato ed ho ancora dei problemi....Pensavo di aver capito ed invece ho qualche perflessità sul risultato finale.. difatti non vedo nulla...
questo il codice di prova che ho usato:
<div class="firma_animata">HTML<a href="maya1"><img class="img1" src="http://imageshack.us/a/img404/4079/mayaopt.jpg"/></a>
<a href="maya2"><img class="img2" src="http://imageshack.us/a/img404/4079/mayaopt.jpg"/></a>
</div>
<br/><br/><br/><br/><br/>
Cosa sto sbagliando?
Ho notato che se scrivo qualcosa ad esempio "mmmmmmmmmmmm" prima del tag , vedo la foto ma non delle dimensioni corrette..
Edited by iryng78 - 19/4/2013, 11:51. -
.
Non c'ho capito nulla ancora una volta ahahah.
Allora Kia, queste sono le foto che ho provato a ritagliare (200x200), ma nulla da fare. Non me le ritaglia. Una misura non resta 200, ma si cambia da sola, ad esempio io metto 200x200 ma poi mi esce 200x180 (per esempio). Queste sono le foto che vorrei inserire.
Uff..
Non me le imposta delle giuste dimensioni.
. -
.CITAZIONECosa sto sbagliando?
Ho notato che se scrivo qualcosa ad esempio "mmmmmmmmmmmm" prima del tag , vedo la foto ma non delle dimensioni corrette..
Errore mio! Ho sistemato una cosa nel CSS, era una piccolezza, che però faceva attrito con il resto del codice del forum. Ora dovrebbe funzionare... e funziona anche su IE! Voi vedete tutto correttamente adesso?
Penso che tu possa togliere tutte le M: dovrebbe andare lo stesso. Fammi sapere se va tutto beneCITAZIONENon c'ho capito nulla ancora una volta ahahah.
Allora Kia, queste sono le foto che ho provato a ritagliare (200x200), ma nulla da fare. Non me le ritaglia. Una misura non resta 200, ma si cambia da sola, ad esempio io metto 200x200 ma poi mi esce 200x180 (per esempio). Queste sono le foto che vorrei inserire.
È perché non hai messo quella piccola spunta vicino al lucchetto, dopo le misure in pixel
Riprova e fammi sapere se funzionaSPOILER (clicca per visualizzare). -
iryng78.
User deleted
A prima vista anche senza togliere tuttle le "m" sembra che la mia Maya adesso si veda quadrata e non allungata appena mi soggio sopra col mouse
Bando alle ciance, come si cice qui in Sicilia, vado subito a sistemarla! Grazie Kia!.
Firma animata personalizzataUn regalino per gli Utenti di Pets Life :) |
Offline
