<$BlogTitle$>

Come realizzare un template

parte grafica

per la parte grafica è molto semplice... innanzi tutto aprire con ps o psp un nuovo file di dimensioni 1024 x 600 con base trasparente e realizzare un "header" tipo questo qui (è molto semplice ma x farvi capire... io preferisco farli a 2 colonne...quella x e descrizioni più piccole e quella x i post più grande esempio. Salvarlo ad esempio template1.png.

Dopo aver realizzato la parte con l'immagine selezionare un stiscietta sottile in fondo a di altezza circa 30 px e copiarla in un nuovo file e salvara ad esempio sfondo.png. ESEMPIO1. esempio2.

HTML

E ora l'osso duro di tutti i nuovi designer di template...capire il codice html iniziamo con la prima parte del codice:

<html> <head> <title> <$BlogTitle$> </title> <body> <style type="text/css"> body { background-color: #000000; background-image: url('QUI IL LINK DELL'IMMAGINE SFONDO.PNG'); scrollbar-face-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #ffffff; scrollbar-3dlight-color: #ffffff; scrollbar-darkshadow-color: #ffffff; scrollbar-arrow-color: #000000; scrollbar-track-color: #ffffff; body{ font-family: arial, tahoma, georgia; font-size: 8pt; color: #ffffff; line-height: 11px; } a:link{color: #ff0042;} a:visited{color: #a0a0a9;} a:hover{color: #ff0042;}

il background-color è il colore dello sfondo del nostro template Le parti scrollbar sono i colori della barra di scorrimento
i font-family sono le famiglie dei font che si utilizzano nel template altro esempio di font famili : Times New Roman, Garamond, georgia
line-height: 11px rappresenta l'altezza di ogni singola riga di testo... se allargate la dimensione del body vi prego di aumentare anche questa se no diventa illeggibile e tutto schiacciato
il tag a:link rappresenta il colore dei link attivi
il tag a:visited rappresenta il colore dei link visitati
il tag a:hover rappresenta il colore de link al passaggio del mouse
lasciare il tag <$BlogTitle$> così come è perchè è un tag splinder. La ista dei tag qui

Continuiamo con il codice:

.testo1 { font: 13pt georgia; color: #a0a0a9; text-align: center; } .tit { font: 10pt georgia; color: #000000; margin-right: 3px; text-align: right; text-transform: lowercase; background-color: #a0a0a9; b { color:#ff0000; } u { color:#ff0000; } i { color:#ff0000; } </style> </head>

i tag .testo1 ecc... servono per cambiare lo stile, il colore, il font la dimensione ecc al titolo degli interventi e delle categorie. Ma andiamo ad analizzare meglio quelli un pò più difficilotti:

border-style è il tipo di pordo che vogiamo mettere al nostro titolo e può essere: solid (solido) e dashed (tratteggiato).
border-top-width: 0px; dimensione del bordo superiore
border-left-width: 0px; dimensione delbordo a sinistra
border-right-width: 0px; dimensione del bosrdo destro
border-bottom-width: 0px dimensione del bordo inferiore

Andiamo avanti con il codice:

<DIV STYLE="position : absolute; left : 0px; top : 31px;"> <img src="QUI IL LINK DEL TEMPLATE.PNG" width="LARGHEZZA IMMAGINE" height="ALTEZZA IMMAGINE"></DIV>

<div style="position: absolute; left: 24; top: 178; width: 215; height: 700"> <p class="tit"> text</p> prova <i>corsivo</i>, <u>sottolineato</u>, <b>grassetto</b><br><br> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <!CREDITS BY Kyiaia -> <p class="tit"> credits</p> <p align="left">template realizzato da <a href="qui il link del tuo blog">tuo nome</a> <br> base realizzata da <a href="http://kyiaia.splinder.com">kyiaia</a> </div>

il tag div style ... rappresenta la posizione e la larghezza della colonna più piccola, quella delle descrizioni per capirci... e cambia a seconda dei tipi di base che si creano
Il tag p class="tit rappresenta lo stile del testo che avevamo scritto prima ed è il titolo di me, love, hate ecc...

<div style="position: absolute;left:290;top:135;width:590; height:600"> <Blogger> <tr><td> <div class="testo1"> <$BlogItemTitle$></div> in: <$BlogItemCategories$><br><br> <br><div align="justify"> <$BlogItemBody$></div><br><br> <div class="testo1"> <$BlogItemAuthorNickname$></div><br><$BlogDateHeaderDate$> hai <$BlogItemComments$> ?</div> <br> </tr></td></table><br> </Blogger> <br> <p align="right"><$BlogPager$></p> <p align="center"> </p></p></div> </div>

<$BlogItemTitle$> è un tag di spinder e rappresenta i titolo del post
<$BlogItemCategories$> le categorie dei post
<$BlogItemBody$> i post
<$BlogDateHeaderDate$> la data del post
<$BlogItemComments$> i commenti dei post

potete cambiare a questa base tutto ciò che rappresenta colori, titoli ecc ecc... quindi potete modificarla come credete anche se la dimensione e il carattere dei font del body preferirei non li modificaste molto... linkatemi sempre nei credits ^__^

Questo è la nostra base finita : QUI

torna alla HOME

credits

tutorial realizzato da kyiaia è vietato copiarne parti o riproduro senza chiedere a me
NON spacciare per tuo!!!