Come creare un template - by Gloriapuffo

Strumenti

Per creare un template da zero sono fondamentali e indispensabili alcuni elementi/programmi:
1) uno spazio web in cui caricare le immagini, personalmente consiglio Photobucket;
2) un programma di editor grafica, (io uso Photoshop e nel tutorial faccio riferimento ai suoi comandi);
3) le immagini che vogliamo utilizzare per la grafica, ricordando dove le abbiamo prese;
4) un programma di editor html - non è indispensabile, ma diciamo che aiuta perchè solitamente evidenza le parole chiave del linguaggio html con colori differenti. Se non lo avete va benissimo il blocco note.

Premessa

Prima di cominciare teniamo ben presente una cosa: il computer è nostro amico, ma fino ad un certo punto.. succede sempre mentre stiamo facendo un qualche lavoro che:
- si impalla, e ci tocca riavviare;
- salta la corrente perchè qualcuno ha deciso di far partir la lavatrice proprio mentre andava anche la lavastoviglie;
- siamo distratti e pigiamo sulla X lassù a destra invece che sul trattino..
morale della favola in nostro sudato lavoro va a ramengo e noi [io specialmente] lividi di rabbia piantiamo lì tutto.
Salvare spesso, quando state facendo un lavoro di grafica, è un MUST!!!

Cominciamo

Apriamo l'editor grafico e creiamo un nuovo file di larghezza massima 778pixel. Perchè questa misura? Un buon template deve essere correttamente visualizzabile sia dagli utenti che adottano una risoluzione 1024x768 sia per coloro che usano quella 800x600. Una grafica con un'immagine troppo grande crea per gli utenti 800x600 la fastidiosissima barra di scorrimento orizzontale.

Io ho scelto questa immagine che era 800x600 e l'ho adattata a 778x584.

A questo punto dobbiamo considerare due cose:
1) abbiamo bisogno della parte dove scrivere i post;
2) una o due parti in cui scrivere le altre cose, tipo chi siamo, cosa ci piace, i link ai blog amici e via dicendo.
Valutiamo la nostra immagine e scegliamo dove potrebbero essere messi senza alterare troppa la fisionomia dell'immagine. Per questa che ho scelto pensavo di mettere la colonna delle info sulla sinistra, tra il bordo e i capelli della fata, mentre quella dei post sotto alla fata stessa.

Seleziono Immagine->Dimensione quadro e modifico l'altezza dell'immagine facendola diventare 600 in modo da avere una barra non colorata sul fondo. Questo spazio ci servirà in seguito.

Ora creo un nuovo livello su cui andrò a lavorare. E' importante non lavorare direttamente sull'immagine in modo da poter tornare indietro se quello che abbiamo aggiunto non ci piace oppure per spostare le cose in un punto diverso dello spazio.

Con lo strumento contagocce scegliamo un colore chiaro che sia presente nell'immagine e usando lo strumento rettangolo arrotondato creiamo sul nuovo livello un rettangolo come questo.

Il rettangolo copre anche la parte senza colore, ma come si può notare non ha gli angoli in basso. Adesso modifichiamo le caratteristiche del livello in questo modo

ottenendo questo risultato

Il rettangolo si vede ancora, ma è diventato molto chiaro e non nasconde l'immagine sottostante.
Clicchiamo sul livello 1, quello con l'immagine, e con lo strumento selezione prendiamo una porzione di immagine larga quanto il rettangolo giallo ma più bassa, perchè vogliamo fargli riempire la banda bianca sotto.

Facciamo copia e incolla e la spostiamo a coprire il bianco.

Per riempire gli spazi bianchi rimasti utilizzate i colori più adatti oppure, come ho fatto io, copiate una striscia lunga quanto l'immagine dal fondo, ed incollatela in un nuovo livello. Poi spostate questo livello sotto a quello che contiene il pezzettino di prima.

Creiamo un nuovo livello, sopra a tutti gli altri, e armati di matita creiamo una specie di "greca". Usiamo la fantasia e i colori che riteniamo più adatti. Io ho deciso di usare i colori dei capelli della fata e ne ho fatta una molto semplice

Ho poi riempito la parte in cui voglio scrivere, quella sotto le gambe della fata, tutta dello stesso colore.

Non ci resta che inserire il titolo o una scritta, sempre se vogliamo, oppure i classici "Post" e "About me" in testa alle rispettive colonne. Per questo template ho deciso di non inserire nessuna parola.

La parte grafice è quesi finita. Salviamo tutto con formato .jpg e poi selezioniamo un'intera striscia di immagine, facendo attenzione a non prendere la parte alta della nostra cornice, ma solo i lati verticali.

Selezioniamo Modifica->Copia elementi uniti ed incolliamo questa striscia in un nuovo file che chiameremo riga e salveremo in formato gif. Questa ci servirà per far si che il nostro blog abbia lo stesso sfondo anche per i post molto lunghi.

La parte prettamente grafica è terminata.. ora passiamo alla creazione del codice per Splinder.

Lo scheletro

Per prima cosa una pagina html è composta da alcuni tag che non possono essere eliminati, altrimenti non funziona nulla del codice che inseriremo dopo.
Una pagina vuota si presenta in questo modo

<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

Il tag <html></html> è un tag indispensabile che deve racchiudere TUTTO il codice che intendiamo scrivere;
il tag <title></title> racchiude il titolo della pagina, è quello che vedete apparire in alto sulla barra della finesta accando al simbolo del vostro browser;
il tag <head>/</head> racchiude il codice che si riferisce agli elementi di stile e alle "caratterizzazioni" della pagina;
il tag <body></body> racchiude il corpo vero e proprio della pagina.
Come poteta notare il tag <title> sta all'interno di quello <head> perchè è una caratterizzazione della pagina stessa.

Lo sfondo

L'immagine che abbiamo creato prima con tanta fatica è la prima cosa da inserire. Ci portiamo nella parte di codice in cui c'è scritto <body> e nella riga sotto scriviamo questo
<div id="immagine" style="position: absolute; top: 0px; left:0px;"><img src="sfondo.jpg" border="0"></div>

<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

</body>
</html>

In questo modo abbiamo creato un livello che si chiama immagine (id=immagine) che sta nella pagina a partire dal primissimo pixel in alto a sinistra (top:0; left:0;) e che contiene il nostro sfondo (img src="sfondo.jpg").
Questa parte di codice sarà cambiata nel momento in cui caricheremo l'immagine nel server, per ora la teniamo così in modo da poter vedere l'anteprima. Salviamo il file con estensione .htm o .html
Se ora apriamo il file salvato vediamo che l'immagine è posizionata nell'angolo in alto a sinistra e che parti della pagina risultano bianche. Dobbiamo "colorarle" col colore più adatto alla grafica. Io ho scelto uno dei tanti verdi dello sfondo.
Nella parte di codice appena sopra alla parola </head> scriviamo
<style>
body {
background-color: 7ECF79;
background-image: url('riga.gif');
background-repeat: repeat-y;
}
</style>

<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>

</body>
</html>

La prima riga indica il colore dello sfondo, la seconda indica l'immagine per lo sfondo e la terza fa in modo che lo sfondo si ripeta solo in verticale.
Ricordatevi di salvare spesso per evitare di perdere il lavoro.

A questo punto dovreste avere nella pagina l'immagine di sfondo, il colore scelto che riempie le parti che prima erano bianche nella pagina (sulla destra) ed la riga, ripetuta in verticale, al di sotto della vostra immagine.
Attenzione: un problema che capita molto di frequente è quello di non riuscire a vedere la riga.
1. la parola url non va cancellata. Non è lì nel codice perchè vi indica "qui ci va l'url dell'immagine", è lì perchè serve!
2. gli apici, anche quelli non sono lì per bellezza ma sono indispensabili!
3. l'immagine è stata salvata in una cartella differente da quella in cui avete salvato il file html e quindi la riga non si vede.. basta spostarla nella cartella giusta et voilà.

Le colonne

A questo punto dobbiamo inserire gli spazi in cui andranno le parole. E' importante dare dei nomi significativi ai livelli in modo da capire subito in che parte del codice siamo se dobbiamo modificare qualcosa che non ci piace.
Posizioniamoci sempre all'interno del tag <body> e scriviamo
<div id="colonna-sinistra" style="position: absolute; top: 94px; left: 42px; width: 245px; height: 506px;">
<p>bla bla bla bla </p>
</div>

<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>

</body>
</html>

Abbiamo appena creato un nuovo livello partendo dalla colonna sinistra: id indica il nome del livello, top: 94px indica a quanti pixel dall'alto sta e left: 42px a quanti pixel di distanza da sinistra, width:245 è la larghezza del livello e infine height l'altezza. Quest'ultimo è opzionale e io non lo metto quasi mai, adesso c'è giusto per completezza d'informazione. Il tag <p></p> racchiude il testo. Nel vostro template appariranno quindi le parole bla bla bla bla.

Ripetiamo il procedimento ma questa volta inseriamo la colonna che servirà a contenere i post del nostro blog. Va inserita sempre all'interno del <body> e dovrà avere un nome e una posizione differenti.

<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>

<div id="post" style="position:absolute; left:329px; top:593px; width:434px; height:81px; z-index:1">
<p>qui finiranno i post del blog</p>
</div>

</body>
</html>

Se avete bisogno della terza colonna non vi resta che ripetere il procedimento appena fatto utilizzando un nome differente per il campo id e posizionando la colonna nel posto in cui preferite.

Un blog di splinder è diviso in 2 parti ben definite, il blocco del post e la/le colonne.
Per essere chiari, se volete che quello che scrivete appaia nel vostro blog il blocco del post è indispensabile, mentre la o le colonne sono del tutto superflue. Non mi è mai capitato di vederne, ma voi potreste creare un blog che contenga solo il blocco del post.

I tag del post

Per prima cosa dobbiamo scrivere il tag che dice a splinder "questo è il blocco del post". Lo facciamo inserendo nella colonna del post il tag <Blogger></Blogger>.

<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>

</Blogger>
</div>

</body>
</html>

Ho levato la scritta "qui finiranno i post del blog" altrimenti ce la ritroviamo ripetuta per ogni post, ma ho aggiunto il commento di non levare la riga. I commenti si scrivono racchiusi tra 
Di seguito trovate una serie di tag che possono essere utilizzati all'interno del blocco del post con le relative spiegazioni

<BlogDateHeader></BlogDateHeader> -> apertura del blocco che racchiude i post dello stesso giorno.
Se utilizzate questo tag tutti i post scritti lo stesso giorno verranno catalogati insieme, mi spiego meglio:
avrete la data in alto una sola volta e sotto tutti i post scritti quel giorno. Qui trovate un esempio dell'effetto.

<BlogDateFooter></BlogDateFooter> -> chiusura del blocco che racchiude i post dello stesso giorno. E' il gemello del tad di sopra e vanno inseriti entrambi se vogliamo che funzionino.

Come usarli: per esempio potreste volere che tutti i post dello stesso giorno vengano incorniciati, in questo caso vi servirà una tabella di cui sfrutterete i bordi come cornice.
Scriviamo
<BlogDateHeader>
<table border="1" bordercolor="#000000"><tr><td>
</BlogDateHeader>

..... tag del post .....

<BlogDateFooter>
</td></tr></table>
</BlogDateFooter>
In questo modo ho creato una tabella di una colonna e una riga al cui interno finiranno i miei post. Lo spessore del bordo è 1 ed è di colore nero.

<$BlogDateHeaderDate$> -> inserisce la data del post;

<$BlogItemTitle$> -> inserirsce il titolo del post, controllate di aver abilitato i titoli nelle impostazioni di splinder;

<$BlogItemBody$> -> testo del post, questo comando non può essere omesso se volete che si vedano i vostri post;

<$BlogItemDateTime$> -> inserisce l'ora di pubblicazione del post, il formato dell'ora può essere modificato nelle impostazioni di splinder;

<$BlogItemNumber$> -> inserisce il numero identificativo del post;

<$BlogItemAuthor$> -> inserisce il nome dell'autore del post - molto utile in caso di blog con più autori;

<$BlogItemAuthorEmail$> -> inserisce l'email dell'autore del post;

<$BlogItemAuthorURL$> -> inserisce l'homepage dell'autore del post;

<$BlogItemPermalink$> -> inserisce il permalink del post, cioè l'url che apre direttamente il post ;

<$BlogItemComments$> -> inseriesce il link ai commenti del post (aperti in finestra popup). La finestra dei commenti mostra i commenti ordinati per data decrescente, cioè dal più recente al più vecchio; consente di cancellare i commenti e visualizzare l'IP dei commenti anonimi (solo per il proprietario del blog); inoltre viene mostrata una casella di testo per scrivere un nuovo commento (solo se l'utente è autorizzato a commentare sul blog). ;

<$BlogItemCommentLink$> -> inserisce il link ai commenti del post (aperti nella stessa pagina). Richiede la presenza del tag <$BlogItemCommentList$>, altrimenti i commenti non vengono visualizzati ;

<$BlogItemCommentList$> -> inserisce la lista dei commenti sotto il post. La lista dei commenti consente anche di cancellare i commenti dall'editor e visualizzare l'IP dei commenti anonimi (solo per il proprietario del blog); inoltre viene mostrata una casella di testo per scrivere un nuovo commento (solo se l'utente è autorizzato a commentare sul blog). ;

<$BlogItemCategories$> -> inserisce le categorie associate al post, facendo clic su una categoria vengono mostrati tutti i post associati a quella categoria.

Ecco come potrebbe essere il nostro codice dopo aver inserito i tag necessari

<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>

<div id="post" style="position:absolute; left:329px; top:593px; width:434px; height:81px; z-index:1">
<Blogger>
<$BlogItemTitle$>
<$BlogItemBody$>
Scritto da <$BlogItemAuthorNickname$> alle <$BlogItemDateTime$> per la categoria <$BlogItemCategories$><br>
Grazie per i <$BlogItemComments$>
</Blogger>
<br><$BlogPager$>
</div>

</body>
</html>

<br> è il tag che impone al testo di andare a capo.
Ok, direi che per il post abbiamo detto quasi tutto. Manca l'ultimo tocco ovvero la paginazione.
La paginazione è un particolare tag che fa si che alla fine della colonna dei post appaiano i numeri delle pagine o meglio i link per far si che il lettore possa andare a leggere i post passati. Ogni blog ha impostato un numero fisso di post che vengono visualizzati nella stessa pagina, nel momento in cui abbiate superato quel numero i vostri vecchi post finiscono nella pagina dopo. Per poterli vedere è necessaria la paginazione.
E' decisamente un tag particolare perchè possiamo considerarlo parte dei tag del blog, ma va fuori dal tag <Blogger></Blogger>. Solitamente si mette subito dopo e il tag è <$BlogPager$>.

I tag delle colonne

All'interno delle colonne possiamo inserire quello che più ci pare, parti di testo, immagini, adesivi, link e tag. Splinder mette a disposizione i tag di uso comune personalizzabili dal pannello di controllo di splinder, per esempio ci sono tag per inserire un contatore visite, per inserire una lista di link a siti esterni, per i commenti recenti o per l'archivio di tutti i post da voi scritti.
Ecco qui una spiegazione molto semplice di alcuni dei tag disponibili:

<$BlogAboutMe$> mostra le informazioni inserite nel vostro profilo. Se hai scelto di non mostrare il profilo dalle opzioni il tag non produce alcuna informazione.

<$BlogCounter$> mostra quante persone hanno visitato il tuo blog.

<$BlogItemCategories$> mostra tutti le categorie in cui sono divisi i post del tuo blog, cliccando sulla categoria appariranno tutti i post ad essa associata.

<$BlogArchive$> mosta la cronoligia di tutti i post. Solitamente appare il giorno attuale e poi le indicazioni dei mesi passati.

<$BlogLinkOut$> mostra l'elenco dei link ad altri siti o blog, inseriti nella pagina Pannello di controllo » Strumenti » Link.

<$BlogRecentComments$> mostra i link degli ultimi commenti scritti sul blog, con autore e post a cui il commenti si riferisce.

<$BlogButtons$> mostra una serie di bottoni che favoriscono il contatto tra gli utenti e la diffusione dei blog nella community Splinder. I bottoni mostrati sono:
* Contattami (apertura del popup di contatto)
* Il mio profilo (apertura del popup del profilo utente)
* Linkami (apertura del Pannello di controllo per inserire rapidamente un link al blog)
* Iscriviti (apertura del Pannello di controllo per inserire rapidamente il blog nei preferiti)

Ecco come potrebbe diventar il vostro blog dopo aver aggiunto i tag della colonna.

<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>

<div id="colonna-sinistra" style="position: absolute; top: 94px; left: 42px; width: 245px; height: 506px;">
<p>
<h1>Qualcosa di me</h1>
<$BlogAboutMe$>

<h1>Blog che leggo</h1>
<$BlogLinkOut$>

<h1>Catalogando i miei pensieri</h1>
<$BlogCategories$>

<h1>Archivio</h1>
<$BlogArchive$>

<h1>Passati di qui</h1>
<$BlogCounter$>
</p>
</div>

<div id="post" style="position:absolute; left:329px; top:593px; width:434px; height:81px; z-index:1">
<Blogger>
<$BlogItemTitle$>
<$BlogItemBody$>
Scritto da <$BlogItemAuthorNickname$> alle <$BlogItemDateTime$> per la categoria <$BlogItemCategories$><br>
Grazie per i <$BlogItemComments$>
</Blogger>
<br><$BlogPager$>
</div>

</body>
</html>

Avrete notato che ho scritto alcune parole comprese tra <h1>e</h1>, vi spiegherò il perchè nel prossimo "capitolo", per ora vi basti sapere che è importante che i titoli delle varie sezioni che volete nella vostra colonna siano scritti all'interno di questo tag. Se per esempio volessimo aggiungere la sezione "amo" e quella "odio" ognuna col rispettivo titolo dovremmo aggiungere nel codice:
<h1>Amo</h1>
Qui scrivo quello che amo.<br>
<h1>Odio</h1>
Qui scrivo quello che odio.<br>

Se avete salvato e provato ad aprire il file htm creato potrete notare che il testo inserito nella pagina è decisamente sgraziato..Tutte le parole scritte all'interno del tag <h1>..</h1> sono in grassetto e decisamente più grandi del resto del testo.

Questo accade perchè nel linguaggio html il tag <h1> </h1> indica un titolo. Noi dobbiamo fare in modo che tutti i titoli diventino del carattere, della dimensione e del colore di nostro gradimento. Dopo faremo lo stesso per tutto il resto del testo e per i link.

I Titoli e il testo

Portiamoci nella parte alta del nostro codice, all'interno dei tag <head></head> e più precisamente all'interno del tag <style>.

<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

h1 {
font-family: Verdana;
font-size: 11px;
color: #DC0814;
text-decoration: none;
}

</style>

</head>

<body>

<div id="colonna-sinistra" style="position: absolute; top: 94px; left: 42px; width: 245px; height: 506px;">
<p>
<h1>Qualcosa di me</h1>
<$BlogAboutMe$>

<h1>Blog che leggo</h1>
<$BlogLinkOut$>

<h1>Catalogando i miei pensieri</h1>
<$BlogCategories$>

<h1>Archivio</h1>
<$BlogArchive$>

<h1>Passati di qui</h1>
<$BlogCounter$>
</p>
</div>

<div id="post" style="position:absolute; left:329px; top:593px; width:434px; height:81px; z-index:1">
<Blogger>
<$BlogItemTitle$>
<$BlogItemBody$>
Scritto da <$BlogItemAuthorNickname$> alle <$BlogItemDateTime$> per la categoria <$BlogItemCategories$><br>
Grazie per i <$BlogItemComments$>
</Blogger>
<br><$BlogPager$>
</div>

</body>
</html>

Quello che ho scritto si può tradurre in questo modo:
h1 { - indica come si chiama il tag di cui vogliamo impostare le caratteristiche. Queste andranno scritte all'interno delle parentesi graffe (per chi non le ha disegnate sulla tastiera si ottengono premendo alt+123 e alt+125) ;
font-family: Verdana; - indica il nome del font che vogliamo usare. Se si usa un font particolare, che non è detto che tutti abbiano installato sul proprio pc, solitamente si scrive anche un font secondario mettendo font-family: nomeFont, nomefont; Nel mio caso non è necessario perchè il verdana è un font presente su tutti i pc.
font-size: 11px; - indica la dimensione del font, più il numero digitato è grande, più sarà grande il carattere.
color: #DC0814; - indica il colore del font. Possiamo esprimere i colori o con il loro nome in inglese o con la loro codifica esadecimale. Programmi come photoshop e paintshop pro vi indicano chiaramente il codice del colore che state usando

text-decoration: none; - indica che il testo non avrà alcuna decorazione. Al posto di none possiamo usare anche bold (grassetto), underline (sottolineato) e overline (sopralineato).
Non dimentichiamoci la parentesi alla fine }
Attenzione: i ; non sono opzionali, sono indispensabili affichè il codice abbia un senso.
Se ora andiamo nuovamente ad aprire il nostro file vedremo che tutti le parole racchiuse nel tag <h1></h1> hanno ubbidito alle nostre istruzioni cambiando colore, carattere e dimensione.

Facciamo la stessa cosa per quello che riguarda il resto del testo scrivendo
p, body, td, tr, div {
font-family: Verdana;
font-size: 10px;
color: #000000;
}
In questo modo non solo quello compreso tra i tag <p></p> ma anche quello che abbiamo scritto al di fuori di tag specifici assumerà il colore nero (#000000), il carattere Verdana di dimensione 10.

C'è un altra cosa utile da sapere per quello che riguarda lo stile del testo, il comando text-align. Lo possiamo usare per definire l'allineamento del testo ed ha quattro possibilità: center, left, right e justify. Se vogliamo definire l'allineamento del testo basta inserire text-align: allineamentoScelto; all'interno della parentesi, se non scrivete nulla il testo si allinea automaticamente a sinistra.

Lo stile dei link

Anche i link hanno bisogno di essere regolamentati, per farlo ci sono dei modi precisi. Per prima cosa dobbiamo distingurere tra link mai visitati, link visitati e link su cui passiamo il mouse.
In linea di massima i link funzionano esattamente come il testo, solo che hanno dei nomi precisi: i link non visitati si indicanon con A:link, quelli visitati con A:visited e il passoggio del mouse con A:hover.

E' sempre bene specificare questi campi all'interno dei tag di stile altrimenti il browser userà i colori che ha impostati di default che, diciamocelo, sono orrendi:

<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

h1 {
font-family: Verdana;
font-size: 11px;
color: #DC0814;
text-decoration: none;
}

p, body, td, tr, div {
font-family: Verdana;
font-size: 10px;
color: #000000;
}

A:link{
text-decoration:none;
color: 000000;
}

A:visited {
text-decoration:none;
color: 000000;
}

A:hover {
text-decoration:none;
color: #FECC29;
}

</style>

</head>

<body>

<div id="colonna-sinistra" style="position: absolute; top: 94px; left: 42px; width: 245px; height: 506px;">
<p>
<h1>Qualcosa di me</h1>
<$BlogAboutMe$>

<h1>Blog che leggo</h1>
<$BlogLinkOut$>

<h1>Catalogando i miei pensieri</h1>
<$BlogCategories$>

<h1>Archivio</h1>
<$BlogArchive$>

<h1>Passati di qui</h1>
<$BlogCounter$>
</p>
</div>

<div id="post" style="position:absolute; left:329px; top:593px; width:434px; height:81px; z-index:1">
<Blogger>
<$BlogItemTitle$>
<$BlogItemBody$>
Scritto da <$BlogItemAuthorNickname$> alle <$BlogItemDateTime$> per la categoria <$BlogItemCategories$><br>
Grazie per i <$BlogItemComments$>
</Blogger>
<br><$BlogPager$>
</div>

</body>
</html>

Cosa sono? e perchè metterli?

Apro una grossa parentesi per parlare dei credits. Prima di tutto cosa sono? Semplice, è l'ammissione da parte vostra che alcune delle componenti del vostro blog, siano esse grafiche o testuali, non sono state create da voi, e quindi riconoscete il merito di quella parte alla persona che l'ha effettivamente creata.
E' importante dare il giusto merito a chi ha creato l'immagine che state usando, che sia essa un'immagine di base e che voi avete rielaborato, o che sia già l'immagine "definitiva" che avete deciso di usare, perchè questa persona ha speso tempo e fatica nella sua creazione. Se ha deciso di pubblicarla da qualche parte e condividerla con voi non significa che voi abbiate il diritto di usarla a vostro piacimento e senza ritegno. Vi piacerebbe se dopo aver passato almeno un paio d'ore a creare la vostre grafica personale e personalizzata per il blog la ritrovaste a soli 10 minuti dalla pubblicazione sul blog di qualcun altro? e magari con scritte cose del tipo "fatta da me"?? penso proprio di no!

Posso usare qualsiasi immagine?

Direi proprio che la risposta è no! Quando spulciate il web alla ricerca di un'immagine da utilizzare dovete fare attenzione a come l'autore ha disposto possa venire usate. Direi che per il 99% di esse è vietato uno scopo commerciale, quindi sognatevi di utilizzarle per fare il logo della vostra ditta o cose simili.
In alcuni casi trovate nei siti in cui sono pubblicate le immagini le condizioni sotto le quali utilizzare. Possono essere scritte in diversi modi.

© Pincopallino 2008 - In questo caso per esempio non è chiaro come e se potete usare l'immagine. E' buona norma contattare l'autore che vi dirà se e in che modo potete usarla.
Esempio pratico: Questa è l'immagine di una mia vecchia grafica

Quando l'ho vista ho detto "è lei, è perfetta" e ho cominciato a immaginare come avrei potuto fare il blog. Mando una mail all'autrice e le spiego che mi piace tantissimo, che vorrei poterla usare come immagine principale per la grafica del mio blog, che intendo riconoscerle ogni merito per lo scatto e che non intendo modificarla nei suoi colori.
Molto gentilmente Donia accetta e mi chiede di inserire nei credits che ho avuto un suo permesso scritto per usare quella foto, e me ne manda una copia senza il copyright stampato nel centro (click)

Licenze Creative Commons - le trovate tutte ben spiegate in italiano qui e in dichiarano chiaramente cosa potete e cosa non potete fare con una certa opera. Questo tipo di licenze esistono anche per opere diverse da quelle grafiche.

Licenze esplicite - sono quelle scritte chiaramente affianco ad una o piu immagini.

E per questa guida?

In passato ho notato che molte persone che hanno utilizzato o utilizzano questo tutorial per creare il loro primo template o che continuano ad usare il mio codice html come guida misteriosamente si SCORDANO di citarlo nei CREDITS.
Questa cosa non mi piace per nulla, non tanto perchè sono alla ricerca di pubblicità, ma è giusto che venga riconosciuto il mio lavoro e che questa guida possa essere utile anche ad altri e non solo a voi...
La cosa mi infastidisce ancor di più quando poi mi arrivano splinder-mail o messaggi perchè qualcosa non va come dovrebbe nella creazione del vostro template! Se volete delle risposte da me citatemi nei credits.
Quando linkate fatelo direttamente a questa pagina citandomi come Gloriapuffo o Gloria.
Ecco un possibile codice da inserire:
Template Tutorial © <a href="http://www.arimi.altervista.org/templateTut/tutorial.htm">Gloriapuffo</a>

Dove metterli

E' buona norma inserire i credits in una delle vostre colonne secondarie perchè se li inserite nel corpo centrale del post rischiate che questi si ripetano ad ogni post - direi poco piacevole come cosa.
Starà poi a voi scegliere a che altezza metterli, se a destra o sinistra, e in che ordine.

Caricare le immagini

Abbiamo quasi finito. Dobbiamo caricare nel nostro spazio web tutte li immagini che ci servono per il blog. Quando dico tutte non intendo solo quelle che servono per la grafica, ma anche tutti i vari adesivi, banner e ammennicoli che vogliamo piazzare nel nostro blog.
Nel mio caso, per esempio, ho dovuto caricare anche tutte e 52 le immagini quadrate che ci sono nella colonnina delle fanlist.
Questa è decisamente una fase pallosa, perchè dipende da fattori esterni a noi, come la velocità della connessione che abbiamo ad internet e la possibilità dello spazio web che abbiamo scelto di farci caricare più immagini contemporaneamente. Portete pazienza e ricordatevi di caricare tutto.

Cambiare i riferimenti

Una volta che abbiamo caricato tutto dobbiamo cambiare i riferimenti alle immagini che abbiamo usato fino ad ora. Questo perchè così splinder potrà andare a recuperare le immagini dove le abbiamo caricate. Se avete scelto photobucket come spazio web capire quale sia il link della vostra immagine è molto facile, vi si presentano 3 tipi di link sotto all'immagine caricata, uno dei quali si chiama direct, è proprio quello che dovete scegliere. Copiate il link e incollatelo nel codice.

<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

h1 {
font-family: Verdana;
font-size: 11px;
color: #DC0814;
text-decoration: none;
}

p, body, td, tr, div {
font-family: Verdana;
font-size: 10px;
color: #000000;
}

A:link{
text-decoration:none;
color: 000000;
}

A:visited {
text-decoration:none;
color: 000000;
}

A:hover {
text-decoration:none;
color: #FECC29;
}

</style>

</head>

<body>

<div id="colonna-sinistra" style="position: absolute; top: 94px; left: 42px; width: 245px; height: 506px;">
<p>
<h1>Qualcosa di me</h1>
<$BlogAboutMe$>

<h1>Blog che leggo</h1>
<$BlogLinkOut$>

<h1>Catalogando i miei pensieri</h1>
<$BlogCategories$>

<h1>Archivio</h1>
<$BlogArchive$>

<h1>Passati di qui</h1>
<$BlogCounter$>
</p>
</div>

<div id="post" style="position:absolute; left:329px; top:593px; width:434px; height:81px; z-index:1">
<Blogger>
<$BlogItemTitle$>
<$BlogItemBody$>
Scritto da <$BlogItemAuthorNickname$> alle <$BlogItemDateTime$> per la categoria <$BlogItemCategories$><br>
Grazie per i <$BlogItemComments$>
</Blogger>
<br><$BlogPager$>
</div>

</body>
</html>

Direi proprio che abbiamo fatto tutto quello che dovevamo fare per creare un template per il nostro blog, non ci resta che caricarlo su splinder.
Cliccate sul nome del vostro blog e scegliete la targhetta Template. A questo punto vedrete il codice del blog che avete al momento in uso. Vi suggerisco di copiarlo tutto e di incollarlo e salvarlo in un file di testo, perchè può tornare molto utile nel caso abbiate delle immagini o adesivi che potreste voler copiare nel nuovo blog.
Una volta salvato il vecchio blog cancellate tutto il codice presente nel riquadro "Template del blog" ed incollateci quello che avete appena creato. Il codice va incollato tutto da <html> a </html>. Prima di salvare le modifiche fate un click su Anteprima del template, giusto per verificare che sia tutto come volete e poi salvate.

Adesso che abbiamo salvato il template su splinder abbiamo proprio finito.

Spero che questa guida vi sia stata utile, se ci sono problemi non fatevi scrupoli e contattatemi via splinder o tramite l'apposito post sul mio blog. Mi raccomando, datemi del tu.
Una precisazione per chi avesse bisogno di aiuto per il blog: quando mi mandate il link del blog io posso vedere solo il codice già elaborato da splinder. Se volete che veda proprio il codice scritto da voi dovete includerlo nella mail come allegato in un file txt.
Attenzione: non incollate il codice direttamente nella mail altrimenti splinder lo interpreta facendomi vedere il risultato e non il codice.

Per la cronaca, qui trovate il mio template completo usato per fare la guida

Ciao a tutti, Gloria

Nel tuo tutorial allinei tutta la grafica a sinistra, come faccio a spostarmi un po' più al centro?

Per ognuno dei div all'interno del codice ci sono dei campi precisi che indicano la posizione. Faccio l'esempio col div dell'immagine ma vale per tutti.
<div id="immagine" style="position: absolute; top: 0px; left:0px;"><img src="sfondo.jpg" border="0"></div>
top indica quanti pixel deve avere di distanza l'immagine dal bordo superiore del browser, left quanti pixel deve avere di disanza dal bordo sinistro del browser. Attualmente l'immagine è a 0 pixel dall'alto e 0 da sinistra. Basta cambiare i numeri e di conseguenza si sposterà l'immagine.
Una volta trovata la posizione giusta dell'immagine basterà centrare di conseguenza i div del testo.

La barra di splinder risulta nascosta dalla grafica, come faccio a metterla a posto?

Come per la domanda precedente basta modificare il campo top del div dell'immagine. Per essere precisi bisogna mettere top:33px; in questo modo la barra di splinder risulterà sopra a tutta la grafica che abbiamo creato.

Se ti dico come lo voglio, puoi creare tu il template per il mio blog?

E' una domanda un po' spinosa. Io ho veramente poco tempo da dedicare alla creazione completa di un template, e quando si tratta di una cosa non per me è anche difficile capirci esattamente, specialmente per la parte grafica.
In linea di principio la risposta è no, anche se possono esserci delle eccezioni.
Nel web ci sono vari siti di grafica che consentono di prelevare gratuitamente template per splinder, ti rimando al mio GT

Come creare un Template per Splinder - by Gloriapuffo

Prima di cominciare

Strumenti

La grafica

Premessa

Cominciamo

Il codice

Lo scheletro

Lo sfondo

Le colonne

Le parti del blog

I tag del post

I tag delle colonne

I colori del testo

I Titoli e il testo

Lo stile dei link

I credits

Cosa sono? e perchè metterli?

Posso usare qualsiasi immagine?

E per questa guida?

Dove metterli

La messa online

Caricare le immagini

Cambiare i riferimenti

Domande frequenti e risposte

Nel tuo tutorial allinei tutta la grafica a sinistra, come faccio a spostarmi un po' più al centro?

La barra di splinder risulta nascosta dalla grafica, come faccio a metterla a posto?

Se ti dico come lo voglio, puoi creare tu il template per il mio blog?

Prima di cominciare

La grafica

Il codice

Le parti del blog

I colori del testo

I credits

La messa online

Domande e risposte

Versione Stampabile

I miei link

Le mie aste