Guida: Creare un Template per Splinder

[ Html - Css ]

« Older   Newer »
 
  Share  
.
  1. Mezmerized
        +1   -1
     
    .

    User deleted


    Creare un Template per Splinder
    Non è necessario essere forniti di un editor HTML per procedere con la creazione di un template, il block notes di Windows è più che sufficente.

      Menù Rapido



      Lo scheletro del Layout
      Inseriamo per primo il tag di apertura del codice HTML validato per il w3c, necessario affinche il browser riconosca la pagina web
      HTML
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">


      In seguito inseriamo il tag di stile della pagina, seguito dal meta tag che definisce la pagina come documento di testo in html, e infine il titolo della nostra pagina.
      HTML
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title><$BlogTitle$></title>
      </head>


      Bene, ora che la nostra impaginazione è finita possiamo passare al corpo del layout aprendo il tag
      HTML
      <body>
      </body>


      In ultimo ricordiamo di chiudere tutto il nostro codice con
      HTML
      </html>




      Il Css, ovvero i fogli di stile del template
      Dopo aver steso il codice scheletro concentriamoci sullo stile della pagina html. Per stile intendo tutto, a partire dai vari colori, per finire con le dimensioni del testo del corpo del template.
      Focalizziamo la nostra attenzione su questa parte del nostro codice, precisamente tra il tag di titolo e quello di chiusura dell'head. In quel punto dovremo inserire il tag di riconoscimento per il nostro Css.

      HTML
      <style type="text/css">
      </style>


      In questo modo il codice risultante sarà questo:
      HTML
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>Titolo Pagina</title>
      <style type="text/css">
      </style>
      </head>

      All'interno dei tag di stile ora provvederemo a scrivere il Css.



      Modifica del corpo del Testo: Body
      La prima parte da settare riguarda il background, ovvero lo sfondo, del nostro template. La dicitura "body" serve a fare in modo che queste modifiche siano applicate a tutto il corpo del nostro lavoro.
      HTML
      body {background-color: #000000; background-image: url('http://'); background-repeat: repeat;}

      - background-color: #000000; significa che il colore di sfondo della nostra intera pagina sarà il nero. Il colore è espresso in esadecimali e per ottenerlo è sufficente avere un programma di grafica da cui ricavarlo, oppure cercarlo attraverso le tabelle esadecimali presenti in moltissimi siti.
      - background-image: url('http://'); è il css usato per richiamare un immagine che abbia la funzione di sfondo alla nostra pagina. Se per caso volessimo invece uno sfondo a tinta unita, invece che un immagine basterebbe omettere nel css questa parte.
      - background-repeat: repeat; definisce invece il tipo di ripetizione dell'immagine. Ci sono 3 tipi di ripetizione disponibile ed ognuno di essi produce un diverso effetto sull'immagine di sfondo. Lasciando semplicemente repeat l'immagine si ripeterà per tutta la pagina, sia in lunghezza che in larghezza. Inserendo repeat-x, come sul piano cartesiano, lo sfondo si ripeterà solamente in orizzontale nella pagina. Utilizzando invece repeat-y lo sfondo si ripeterà solamente per verticale.

      Concentriamoci ora sulla formattazione dello stile del testo e della scrollbar (per quest'utima le modifiche vengono visualizzate solamente con IE)
      HTML
      body, td {font-size : 10px; font-family: Verdana, Georgia, Tahoma, Book Antiqua, Batang, Comic Sans Ms, Arial, Time New Romans; color :#000000;
      scrollbar-arrow-color: #000000;
      scrollbar-base-color: #000000;
      scrollbar-3dlight-color:#000000;
      scrollbar-highlight-color:#000000;
      scrollbar-face-color: #000000;
      scrollbar-shadow-color:#000000;
      scrollbar-darkshadow-color:#000000;
      scrollbar-track-color: #000000; }

      - font-size : 10px viene utilizzato per cambiare le dimensioni e la famiglia di font nel body. Le dimensioni possono essere date sia in px (pixel) che in pt (punti). Per pixel si intende la dimensione di un singolo punto sul desktop, mentre i punti rappresentano le dimensioni utilizzate nei programmi di scrittura come MicrosoftWord.
      - font-family: Verdana, Georgia, Tahoma, Book Antiqua, Batang, Comic Sans Ms, Arial, Time New Romans;
      La lista di font inserita invece rappresenta lo stile di scrittura che vogliamo usare. Il mio consiglio è quello di usare una serie varia di font per aumentare la visibilità della pagina, poichè non tutti i computer hanno la stessa lista di font inserita al loro interno, e a meno che non vengano scaricati, il testo non risulterebbe visibile. Invece utilizzando le maggiori famiglie di font (inserendo per ultima quella più comune) si evita di incappare in questo rischio, poichè il browser automaticamente scorrerà la lista fino a trovare un font che riconosce nel computer.
      I nomi dei font devono essere scritti correttamente e tra un nome e l'altro deve essere presente la virgola seguita da uno spazio.
      - color :#000000; rappresenta invece il colore di tutto il testo della pagina.
      Per quanto riguarda la scrollbar invece vi lascio una guida creata da Rinouccia che spiega perfettamente i codici associati ad ogni parte della scrollbar.



      I Link
      Passiamo ora ad una parte molto importante del nostro Css: la modifica dei link. Normalmente nelle nostre pagine web senza definire questo stile i nostri link apparirebbero normalmente (a:link) in questo modo, mentre i collegamenti già visitati (a:visited) apparirebbero in violetto.
      Esistono 3 tipi principali di selettori per il collegamento: a:link, a:visited e a:hover. Il primo definisce i link a "riposo" cioè tutti quei link non visitati che appaiono al caricamento della pagina. Il secondo specifica le caratteristiche dei link visitati e presenti nella chache del browser, mentre il terzo definisce il collegamento al passaggio del mouse.
      HTML
      A:LINK {color: #000000; text-align: left; text-decoration: none; font-weight: bolder; font : 10px;}
      A:VISITED {color: #000000; text-align: left; text-decoration: none; font-weight: bolder; font : 10px;}
      A:HOVER {color: #000000; text-align: left; text-decoration: none; font-weight: bolder; font : 10px;}

      - color :#000000; rappresenta il colore del link. E' consigliabile differenziarlo dal colore del testo principale, in modo che sia immediatamente riconoscibile il collegamento. Se omesso il colore del link diviene automaticamente questo.
      - text-align: left; identifica l'allineamento del testo del link nella pagina. Può essere definito in 4 modi differenti; lasciando left il testo si allineerà a sinistra della pagina, condizione normale del testo. Al contrario, utilizzando right il testo si allineerà nella parte destra, invece usufruendo della definizione center il testo sarà centrato. La quarta ed ultima definizione è justify, che allinea il testo a sinistra e a destra, rendendolo giustificato ai bordi della pagina. Non è consigliabile utilizzare questa definizione con link brevi poichè si otterrebbe lo stesso risultato con l'allineamento a sinistra.
      - text-decoration: none; intende specificare le decorazioni applicate al testo. Sono disponibili 5 tipi di decorazione diversi. None lascia il testo normale, senza alcuna modifica rispetto al testo del body, underline sottolinea il link, overline crea una linea al di sopra di esso, line-through sbarra il collegamento, blink definisce un testo lampeggiante (questa opzione non funziona in IE e Opera)
      - font-weight: bolder; invece serve a definire lo spessore di un testo. Se settato su normal oppure omesso, il testo avrà uno spessore normale. Definito su bold si otterrà un testo in grassetto, mentre con bolder il grassetto risulterà leggermente più spesso. Con lighter infine si avrà un testo meno spesso di quello di default.
      E' inoltre possibile variare la dimensione del testo del link utilizzando font-size: 10px; e modificando la dimensione in px o pt a seconda della grandezza di cui si desidera ottenere i link.
      Solitamente consiglio di lasciare a:link e a:visited con gli stessi parametri, mentre consiglio di variare il colore di a:hover



      Creare un Titolo
      Ora passiamo alla spiegazione necessaria per creare i titoli delle nostre sezioni, ovvero quelle parti di testo differenziate dal resto per colore e background che servono a dividere le parti del template. Utiliziamo la dicitura h1 per identificarli in modo che in seguito sarà facile richiamarli nel testo attraverso l'utilizzo di un tag specifico.
      HTML
      h1 {color: #000000; background-color: #FFFFFF; font-weight: bolder; text-align:left; border: 1px solid #0000FF; font : 10px;}

      Non credo ci sia bisogno di specificare nuovamente la funzione di color, background-color, font-weight e text-align perchè ne abbiamo già parlato.
      - border: 1px solid #0000FF; invece è un selettore che ci interessa perchè grazie ad esso riusciamo a far si che il nostro titolo abbia dei bordi ben definiti. 1px è la dimensione che abbiamo definito per il nostro bordo, mentre #0000FF è il colore che vogliamo appaia. Quello su cui voglio concentrarmi invece è la differenza di stili che possiamo utilizzare per la creazione del nostro bordo. Ci sono ben 9 tipi diversi di bordo che possiamo ottenere e che ora specificherò:
      None: il bordo non verrà visualizzato.
      Solid: il bordo sarà formato da una linea continua.
      Dashed: il bordo sarà formato da una linea tratteggiata.
      Dotted: il bordo sarà formato da una linea formata da punti.
      Double: il bordo sarà formato da due linee continue (funziona solamente con misure da 3px e superiori).
      Groove: il bordo avrà un effetto 3D a scanalatura (l'effetto dipende dal colore assegnato).
      Ridge: il bordo avrà un effetto 3D a cresta (l'effetto dipende dal colore assegnato).
      Outset: il bordo avrà un effetto 3D di tipo esterno (l'effetto dipende dal colore assegnato).
      Inset: il bordo avrà un effetto 3D di tipo interno (l'effetto dipende dal colore assegnato).



      L'header, l'immagine principale del Template
      Passiamo ora alla parte di formattazione vera a propria del template, ovvero l'immagine Header, le colonne e i tag di splinder.
      Iniziamo con il posizionamento della nostra immagini principale, in funzione della quale ricaveremo poi colonne ed altro.
      HTML
      <body>
      <div style="position: absolute; left: 0px; top: 32px; width: 780px;">
      <img src="http://xxx.jpg" border="0" alt="xxx"></img>
      </div>

      Subito dopo il tag di apertura body dobbiamo inserire il tag di apertura del Div, che ci permette di muovere e sistemare la nostra immagine in qualsiasi punto della pagina attraverso le dimensioni in pixel.
      - position: absolute; specifica che la posizione con qualsiasi risoluzione e dimensione dello schermo sarà fissa sulle impostazioni che gli daremo.
      - left: 0px; top: 32px; width: 780px; sono le distanze da sinistra, dall'alto (vi consiglio di lasciare 32px per questa seconda opzione a causa della barra pubblicitaria di splinder), e la larghezza dell'immagine (vi consiglio di non superare mai i 780px di larghezza, in questo modo potrete rendere il vostro layout adatto a tutte le risoluzioni).
      Dopo aver inserito tutti i paramentri che ci servivano possiamo passare al tag di richiamo dell'immagine.
      - border="0" è la dimensione del bordo che circonderà l'immagine. In questo caso il bordo non apparirà
      - alt="xxx" è il nome da specificare per l'header.
      Ricordatevi di chiudere il div subito dopo la fine del tag di immagine, altrimenti tutti i seguenti passaggi risulteranno sballati.
      Suggerimento: grazie al div è possibile allineare perfettamente l'immagine allo sfondo. Per farlo (nel caso di un pattern o un immagine ripetitiva) basta apportare leggere modifiche al left e al top, fin quando le immagini non combaciano perfettamente. E' un procedimento lievemente noioso, ma la soddisfazione di avere un template perfettamente allineato è grande ^^



      Le Colonne del Template
      Dopo aver opportunamente sistemato l'immagine passiamo alla creazione delle famigerate colonne del template. Come abbiamo fatto per l'immagine, anche per le colonne sfrutteremo l'utilissimo div, poichè questo ci consente di definire oltre che la posizione nella pagina anche la larghezza della colonna stessa. Il procedimento per entrambe le colonne è identico, quello che cambierà sarà il contenuto, che vedremo però nella prossima parte di questa guida.
      Creiamo il nostro div (ricordando anche il tag di chiusura) e settiamo nuovamente i valori, a seconda della posizione in cui vogliamo mettere la colonna:
      HTML
      <div style="position: absolute; left: 50px; top: 300px; width:250px;">
      <div>

      In questo caso la nostra colonna (la sinistra) sarà posizionata a 50 pixel dal lato sinistro, 300px dalla parte superiore della pagina e sarà largo 250 px.
      Per la colonna destra creiamo un altro div identico a quello appena creato, subito dopo il suo tag di chiusura, ma questa volta facciamo attenzione che la posizione in pixel a sinistra sia leggermente più grande della somma del left e del width (in questo caso 301 px o superiore). Consiglio di differenziare anche la larghezza della colonna, aumentandola di almeno 100px, poichè in questa parte inseriremo i nostri post.
      Il codice che otterremo alla fine di questi passaggi sarà questo:
      HTML
      <body>
      <div style="position: absolute; left: 0px; top: 32px; width: 780px;">
      <img src="http://xxx.jpg" border="0" alt="xxx"></img>
      </div>
      <div style="position: absolute; left: 50px; top: 300px; width:250px;">
      <div>
      <div style="position: absolute; left: 301px; top: 300px; width:350px;">
      <div>
      </body>




      I Tag di Splinder
      Iniziamo ora a riempire la nostra colonna sinistra lavorando all'interno del primo div (tra il tag di apertura e quello di chiusura per intenderci.)
      Per far funzionare Splinder è necessario avvalersi di alcuni Tag specifici della piattaforma (la cui lista completa è rintracciabile a questo link), in questa guida parleremo dei pricipali.
      Iniziamo con la creazione della descrizione del Blog, usufruendo del tag di titolo che abbiamo creato in precedenza.
      HTML
      <div style="position: absolute; left: 50px; top: 300px; width:250px;">
      <h1>Descrizione Blog</h1>
      <p align="justify"><$BlogDescription$></p>
      <div>

      Seguiamo poi con delle normali sezioni dove inseriremo una descrizione su di noi e sulle nostre passioni.
      Suggerimento: quando vogliamo andare a capo dobbiamo utilizzare il tag </ br>
      HTML
      <h1>A Proposito di Me</h1>
      <p align="justify">Descrizione descrizione descrizione descrizione descrizione descrizione descrizione</p>
      <h1>Amo</h1>
      <p align="justify">Descrizione descrizione descrizione descrizione descrizione descrizione descrizione</p>
      <h1>Odio</h1>
      <p align="justify">Descrizione descrizione descrizione descrizione descrizione descrizione descrizione</p>

      Inseriamo anche una lista di link dove potremmo inserire i blog dei nostri amici:
      HTML
      <h1>Lista dei Link</h1>
      <p align="center">
      <a href="http://...">Link</a></ br>
      <a href="http://...">Link</a></ br>
      <a href="http://...">Link</a></ br>
      </p>

      Riprendiamo ora con 3 Tag abbastanza utlili e molto utilizzati, le categorie, l'archivio e la lista dei commenti recenti ricevuti dal blog, ma in questo caso faremo in modo che l'allineamento all'interno della colonna sia di tipo centrale.
      HTML
      <h1>Categorie</h1>
      <p align="center"><$BlogCategories$></p>
      <h1>Archivio Temporale</h1>
      <p align="center"><$BlogArchiveCollapsed$></p>
      <h1>Commenti Recenti</h1>
      <p align="center"><$BlogRecentComments$></p>

      In ultimo (ma possi dirvi che è la sezione più importante di tutto il nostro template) creeremo la sezione con i ringraziamenti.
      Vi prego di lasciare i ringraziamenti allo SkinFactory e a me, e di rispettare il mio lavoro.
      HTML
      <h1>Ringraziamenti</a>
      <p align="justify">
      Template creato da <a href="http">Tuo Nome</a> grazie alla guida dello <a href="http://skinfactory.forumfree.net">SkinFactory</a> creata da <a href="http://shin-chan.splinder.com">Mezmerized</a>.
      </p>


      Il Blogger
      Ed eccoci infine alla parte conclusiva del nostro template, il blogger, ovvero la sezione di pubblicazione dei post scritti attraverso Splinder. Questa parte non è molto complicata, ma richiede un ordine preciso di scrittura per alcuni elementi per garantirne il perfetto funzionamento.
      Spostiamoci a scrivere il nostro codice nel div della colonna destra, sempre stando bene attenti a lavorare tra il codice di apertura e quello di chiusura del div.
      Iniziamo con l'aprire e chiudere il nostro Blogger attraverso i tag specifici <blogger> e e inseriamo il tag che ci permetterà di inserire il titolo dei nostri singoli post. Otterremo così questo codice:
      HTML
      <Blogger>
      <h1><$BlogItemTitle$></h1>
      </Blogger>

      Inseriamo poi, subito sotto al titolo il nome dell'autore del post, i commenti e la data con l'ora:
      HTML
      <$BlogItemAuthor$>, hai dei <$BlogItemComments$>? Scritto il <$BlogDateHeaderDate$>, alle ore <$BlogItemDateTime$>

      Passiamo poi al tag che ci permetterà di visualizzare il testo del post:
      HTML
      <p align="justify"><$BlogItemBody$></p>

      In ultimo nel blogger inseiriamo il tag che inserirà la lista delle categorie a cui appartiene il post:
      HTML
      <p align="center"><$BlogItemCategories$></p>

      Il corpo del blogger risultante sarà questo:
      HTML
      <Blogger>
      <h1><$BlogItemTitle$></h1>
      <$BlogItemAuthor$>, hai dei <$BlogItemComments$>? Scritto il <$BlogDateHeaderDate$>, alle ore <$BlogItemDateTime$></ br>
      <p align="justify"><$BlogItemBody$></p>
      <p align="center"><$BlogItemCategories$></p>
      </Blogger>




      La Paginazione
      Passiamo ora alla fase conclusiva del nostro template, la paginazione dei post. Questo Tag serve a fare in modo che superato il numero massimo di post per ogni pagina, Splinder archivi gli interventi più vecchi in una lista di pagine. Inseriamo subito dopo il tag di chiusura della sezione Blogger questo codice:
      HTML
      <h1>Paginazione</h1>
      <$BlogPager$>




      Il Codice Completo

      HTML
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title><$BlogTitle$></title>
      <style type="text/css">
      body {background-color: #000000; background-image: url('http://'); background-repeat: repeat;}

      body, td {font-size : 10px; font-family: Verdana, Georgia, Tahoma, Book Antiqua, Batang, Comic Sans Ms, Arial, Time New Romans; color :#FFFFFF;
      scrollbar-arrow-color: #000000;
      scrollbar-base-color: #000000;
      scrollbar-3dlight-color:#000000;
      scrollbar-highlight-color:#000000;
      scrollbar-face-color: #000000;
      scrollbar-shadow-color:#000000;
      scrollbar-darkshadow-color:#000000;
      scrollbar-track-color: #000000; }

      A:LINK {color: #000000; text-align: left; text-decoration: none; font-weight: bolder; font-size : 10px;}

      A:VISITED {color: #000000; text-align: left; text-decoration: none; font-weight: bolder; font-size : 10px;}

      A:HOVER {color: #000000; text-align: left; text-decoration: none; font-weight: bolder; font-size : 10px;}

      h1 {color: #000000; background-color: #FFFFFF; font-weight: bolder; text-align:left; border: 1px solid #0000FF; font-size : 10px;}

      </style>
      </head>
      <body>
      <div style="position: absolute; left: 0px; top: 32px; width: 780px;">
      <img src="http://xxx.jpg" border="0" alt="xxx"></img>
      </div>
      <div style="position: absolute; left: 50px; top: 300px; width:250px;">
      <h1>Descrizione Blog</h1>
      <p align="justify"><$BlogDescription$></p>
      <h1>A Proposito di Me</h1>
      <p align="justify">Descrizione descrizione descrizione descrizione descrizione descrizione descrizione</p>
      <h1>Amo</h1>
      <p align="justify">Descrizione descrizione descrizione descrizione descrizione descrizione descrizione</p>
      <h1>Odio</h1>
      <p align="justify">Descrizione descrizione descrizione descrizione descrizione descrizione descrizione</p>
      <h1>Lista dei Link</h1>
      <p align="center">
      <a href="http://...">Link</a></ br>
      <a href="http://...">Link</a></ br>
      <a href="http://...">Link</a></ br>
      </p>
      <h1>Categorie</h1>
      <p align="center"><$BlogCategories$></p>
      <h1>Archivio Temporale</h1>
      <p align="center"><$BlogArchiveCollapsed$></p>
      <h1>Commenti Recenti</h1>
      <p align="center"><$BlogRecentComments$></p>
      <h1>Ringraziamenti</h1>
      <p align="justify">
      Template creato da <a href="http">Tuo Nome</a> grazie alla guida dello <a href="http://skinfactory.forumfree.net">SkinFactory</a> creata da <a href="http://shin-chan.splinder.com">Mezmerized</a>.
      </p>
      </div>
      <div style="position: absolute; left: 301px; top: 300px; width:350px;">
      <Blogger>
      <h1><$BlogItemTitle$></h1>
      <$BlogItemAuthor$>, hai dei <$BlogItemComments$>? Scritto il <$BlogDateHeaderDate$>, alle ore <$BlogItemDateTime$>
      <p align="justify"><$BlogItemBody$></p>
      <p align="center"><$BlogItemCategories$></p>
      </Blogger>
      <h1>Paginazione</h1>
      <$BlogPager$>
      <div>
      </body>
      </html>





    Edited by Mezmerized - 25/10/2007, 16:55
     
    Top
    .
  2. |Axel|
        +1   -1
     
    .

    User deleted


    Grande 0-0
     
    Top
    .
  3. .Hell.
        +1   -1
     
    .

    User deleted


    Ti Amo :asd:
     
    Top
    .
  4. Rebell
        +1   -1
     
    .

    User deleted


    dillo chi ti ha dato lo spunto :D
     
    Top
    .
  5. kajin`
        +1   -1
     
    .

    User deleted


    Perfetto *ò*
     
    Top
    .
  6. - DarkShiny -
        +1   -1
     
    .

    User deleted


    ma poi come lo metto sul web? xD nn lo capisco
     
    Top
    .
  7. e n r ì c o
        +1   -1
     
    .

    User deleted


    Grazie, a quando quello per wordpress? xD
    Cma grazie davvero, fatta veramente bene

     
    Top
    .
  8. Maverick ~
        +1   -1
     
    .

    User deleted


    CITAZIONE (.Hell. @ 25/10/2007, 17:28)
    Ti Amo :asd:

    Come non quotarti :asd:
     
    Top
    .
  9. Fr@ncesc@
        +1   -1
     
    .

    User deleted


    Cosa vedo *_* spero sia la volta buona che imparo. Grazie.
     
    Top
    .
  10. Mezmerized
        +1   -1
     
    .

    User deleted


    Grazie, sono contenta che possa essere utile *-*

    CITAZIONE
    ma poi come lo metto sul web? xD nn lo capisco

    Vai sul sito di Splinder e creati un blog. Questa guida è fatta per poter creare template personalizzati su quella piattaforma :D
     
    Top
    .
  11. Clio ~
        +1   -1
     
    .

    User deleted


    Ti ho eletta mia dea personale *ç*
     
    Top
    .
  12. Paxtoon93
        +1   -1
     
    .

    User deleted


    beh... invece di fare tt sta fatica conviene prenderne di già fatti...
     
    Top
    .
  13.     +1   -1
     
    .
    Avatar

    Vivo la mia vita inseguendo
    un impossibile
    ma bellissimo sogno...

    Group
    Team
    Posts
    35,340
    Likes
    +106
    Location
    Livorno ma vivo a Parabiago

    Status
    Anonymous
    si ma infatti la guida è per chi ne vuole uno tutto suo e personalizzato dato che quelli disponibili non sono modificabili ^^
     
    Top
    .
  14. Paxtoon93
        +1   -1
     
    .

    User deleted


    :lol: è sempre utile imparare qualcosina!
     
    Top
    .
  15. !Dark
        +1   -1
     
    .

    User deleted


    ma và bene x altervista?
     
    Top
    .
40 replies since 24/10/2007, 23:26   2040 views
  Share  
.