HO MESSO QUESTO SFONDO SCHIFOSO PERCHE' ERA SUCCESSO UN CASINO COL TESTO E NON SI LEGGEVA UN CORNO...ALMENO COSI' SI LEGGE!!! :'(
Buon Primo Maggio Popolo! Oggi sono di nuovo qui per postare un beeeelliiiiisimo tutorial sui templates. Quelli che ci sono in giro non sono molto chiari...per niente anzi. Io ho imparato da poco, e perciò so perfettamente cosa serve ai principianti. Poi mi fate vedere cosa vi è venuto fuori, e chiedete se c'è qualche problema o se qualcosa non è chiaro...sarò felice di aiutarvi, se posso. Il codice base ve lo fornisco io, non importa se lo copiate, però mettetemi nei credits almeno del primo template che realizzate, ok? Avverto che metterò le parti estrapolate dai codici in grassetto, e quelle che dovrete modificare in rosso. So let's start!
1. ANTEPRIMA:
Chiaramente, per prima cosa bisogna realizzare l'anteprima del template, ossia la parte grafica. Per farvi vedere, realizzerò un template nuovo proprio ora! L'anteprima potrete farla con un qualsiasi programma di grafica [anche con paint, per dire]. Fate un'immagine nuova, uno spazio bianco su cui lavorare. Mettete lo sfondo del colore che volete e poi incollate l'immagine e disegnate due colonne. Ecco qua quello che ho appena fatto io: click! Ma non è finita qui! Infatti dovete copiare una piccola fascia in fondo al template, che servirà perchè le colonne siano lunghe lunghe ^^...ecco un esempio: click!
1. CODICE:
Aprite un editor html...il più comune, che tutti hanno e che io uso è il Blocco Note di Windows! Mi raccomando però: non utilizzate ASSOLUTAMENTE Microsoft Word…è un programma un po’ bastardo, in quanto mette pezzi di html dove vuole lui. -.-‘ Poi ciccate sul link che adesso metto, dove trovate il template che ho appena realizzato. Visualizzate il codice [visualizza à html per il vecchio explorer e pagina à html per il nuovo explorer]. CLICK! Dunque, copiatelo sul vostro editor html. Procediamo ora passo per passo a vedere questo codice.
All’inizio, tra le freccette, troviamo una semplice nota introduttiva che chiaramente nel template non comparirà. Potete cambiarla a vostro piacimento. Bene, ora c’è la parte del titolo: <title><$BlogTitle$></title> = questo indica che nella barra all’inizio della pagina apparirà il titolo che la persona che prende il template ha impostato come titolo del suo blog. Tradotto, questo non c’è da cambiarlo. Poi troviamo la scritta cursor, e poi crosshair. Sarebbe la scelta del cursore, e crosshair è il nome di quello che vedete nel mio template [quella dove prima avete preso il codice]. Riguardo ai cursori disponibili, posso fornirvi uno schema riassuntivo qui: click! Ecco arrivati allo sfondo:
</head>
<body>
<div id="immagine" style="position: absolute; top: 0px; left:0px;"><img src="http://i176.photobucket.com/albums/w169/aLeRoCkS_17/m54084979.jpg" border="0"></div>
<style type="text/css">
Al posto dell’url che ho inserito io, mettete l’url della vostra anteprima, che potrete avere caricandola su www.imageshack.us o su www.photobucket.com [in tal caso dovrete però prima registrarvi]. Se non vi è chiaro di quale anteprima parlo, ciccate sull’url che ho messo io e vedrete XD.
body { background-color:#FFFFFF; background-image:
url(http://i176.photobucket.com/albums/w169/aLeRoCkS_17/fasciafiocco.jpg); background-repeat: repeat-y;
Ok…la prima cosa evidenziata in rosso è il codice del colore di sfondo, in questo caso bianco. Dovrete impostarlo uguale al colore di sfondo utilizzato nell’anteprima del vostro template. Questo ci dà lo spunto per aprire il discorso colori. I colori sono indicati con dei codici detti esadecimali. Sono uguali in tutto il mondo, e sono costituiti da un # e sei cifre seguenti. In ogni caso, non è un problema, perché su internet è pieno di tabelle che danno questi codici, ad esempio questa: click! Bene. La seconda cosa rossa è un altro indirizzo: quello della piccola fascia che vi ho fatto fare prima. Caricate anche quella e inserite l’url nell’apposito spazio.
scrollbar-face-color: #000000;
scrollbar-highlight-color: #66FF66;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #66FF66;
scrollbar-track-color: #FFFFFF;
Questo è invece il codice che determinerà lo stile delle vostre scroll, ossia le freccette a destra che vi permettono di scorrere la pagina. Qui vi conviene fare direttamente delle prove cambiando i colori, ma una raccomandazione: chiaramente scegliete colori che si adattino al colore della foto, delle colonne, dello sfondo ecc. che sono nella vostra anteprima.
font-family: tahoma;
color: #000000;
line-height:11px;
text-align:center;
margin: 5px;
font-size: 7pt;}
Questo codice indica lo stile del testo presente nel blog. La prima voce è il nome del font, la seconda il colore del font, la terza è lo spazio tra le righe di testo [anche qui fare delle prove modificando il numero o, se vi piace come l’ho distanziate io, lasciate così], la quarta è l’allineamento [per centrarlo, center; per la sinistra, left; per la destra, right e per giustificarlo, justify]. Poi la quinta voce non modificatela e la sesta è la grandezza del font [fate sempre delle prove per vedere la grandezza che vi ci piace].
a:link { font-weight: none; text-decoration: underline bold; color: #66FF66;}
a:visited { font-weight: none; text-decoration: underline bold; color: #66FF66;}
a:hover { font-weight: bold; text-decoration: underline; color: #000000; border-bottom: 2px solid #66FF66; cursor: w-resize; }
Eccoci al codice per I link. Ci sono infinite possibilità. Nella prima parte, a:link, si definisce come apparirà il link senza che ci si passi sopra col mouse e senza che ci si clicchi. font-weight sarebbe, in pratica, se il testo è grassetto o no. Se lo volete normale, lasciate none com’è già impostato, sennò mettete bold e sarà grassetto. In text-decoration è in questo caso impostata la sottolineatura consueta. Ovvero, il testo contenente il link sarà sottolineato. Non solo, sarà anche una sottolineatura spessa, in grassetto [grazie a bold]. Se la volete normale, basta cancellare bold. Infine, color indica al solito il colore del testo. Per la voce a:visited vale lo stesso di prima…questo indicherebbe come appare il testo quando avete già visitato il link. a:hover invece ci indica come sarà il testo quando ci passiamo sopra col mouse. Generalmente, questa è una parte che si modifica abbastanza spesso, e che dà molto spazio alla fantasia. Solo le ultime due voci tra le graffe sono diverse da quelle di a:link e a:visited. La prima, indica in questo caso una sottolineatura colorata in grassetto e un cambio del colore del testo al passaggio del mouse. Ci sono però infiniti altri modi di divertirsi con i link. Vi so solo tre altri tipi di lik che di solito io uso, ma quando sarete bravi sarete anche capaci di realizzarne di vostri. Per visualizzarli, sostituiteli a border-bottom: 2px solid #66FF66 e vedete cosa vi viene fuori.
filter: glow(Color=#FF99CC, Strength=2); height:5
border-bottom: #6600CC 2px dashed; border-top: #6600CC 2px dashed
filter:fliph
Vorrei dare un’ulteriore indicazione. Le voci in cui compare border, le trovate spesso seguite da solid [che determina una linea normale], ma si può anche mettere dashed [linea tratteggiata] e dotted [linea a puntini]. Riguardo allo spessore della riga, modificate il numero della voce px [in questo caso impostata a 2].
h2 {
font-family: Tahoma;
color: #000000;
text-align: center;
line-height: 8px;
font-size: 6pt;
background-color: #66FF66;
padding-left: 1px;
border-bottom: 2px dashed #FFFFFF;
text-transform: uppercase
}
h1 {
font-family: Tahoma;
color: #000000;
text-align: center;
line-height: 8px;
font-size: 6pt;
background-color: #66FF66;
padding-left: 1px;
border-bottom: 2px dashed #FFFFFF;
text-transform: uppercase
}
Questi sono i codici per lo stile dei titoletti, sia delle sezioni della colonna piccola, sia dei titoli dei post della colonna grande. Vale sempre la stessa storia, le sole voci nuove e modificabili sono background-color, border-bottom e text-transform. La prima è lo sfondo della casella del titoletto, che se volete potete anche non mettere sostituendo al codice del colore none, oppure semplicemente cancellando la voce. Insomma, fate un po’ di prove e vedete come vi piace. La seconda voce riguarda il bordino in basso, che in questo caso io ho impostato come tratteggiato. Potete avere anche il bordino alto aggiungendo la voce border-top. L’ultima voce di quelle che ho citato prima riguarda il tipo di testo: con uppercase il testo è per forza tutto maiuscolo, ma se non volete che sia così basta scrivere none o cancellare l’intera voce.
textarea {
font-family: Tahoma;
font-size: 10px;
border: 1px solid #66FF66;
filter: Chroma(Color=#FFFFFF);
background-color: #66FF66;
Ecco a voi lo stile della textarea: il box che vedete nella prima sezione a destra mio template [al solito linkato all’inizio]. Come al solito trovate stile e dimensione del font, e poi il bordo, che come al solito potete anche mettere punteggiato o tratteggiato e a cui potete cambiare colore. Infine, troviamo al solito il colore di sfondo. Fate un po’ di prove e scegliete voi.
b {cursor: w-resize}
u {border-bottom: 2px solid #66FF66;
cursor: nw-resize;}
i {cursor: help}
Questo serve a definire il testo quando è grassetto, sottolineato o corsivo. La prima voce è per il grassetto. Io ho cambiato solo il cursore, ma potete anche farlo di un altro colore [aggiungendo sempre la voce color], cambiare font [aggiungendo la voce font-family] o mettere il text-transform: uppercase o quello che volete. Vale lo stesso per la voce seguente, quella del testo sottolineato: in questo caso io ho messo una sorta di doppia sottolineatura colorata più spessa, che come al solito potrà essere anche tratteggiata o punteggiata. O anche impostato un cursore diverso. L’ultima voce è per il testo corsivo, a cui ho solo cambiato cursore, ma se volete potete aggiungere anche quelle cose che ho scritto per la prima voce.
Dopo questo lasciate invariato il resto del codice fino anche non arrivate qui:
<-- CODICE SPOSTAMENTO COLONNA POST -->
<div id="box" style="position:absolute; top:447px; left:242px; width:281px; z-index:2; border: 0px solid #FA9293; overflow-x: hidden; padding: 1px; height:1218px">
Come scritto sopra, questo è il codice per spostare la colonna dei post. Modificate i valori in rosso facendo delle prove per far entrare bene la colonna nelle linee da voi disegnate. top è la distanza dall’alto, left la distanza da sinistra, right la distanza da destra e width la larghezza della colonna.
Poi scorrete di nuovo fino a qui:
<-- CODICE SPOSTAMENTO COLONNA TITOLETTI -->
<div style="position:absolute; top:71px; left:534px; width:154px; z-index:2; border: 0px solid #FA9293; padding: 1px; height:402px">
Questo è la stessa storia di prima, solo che si riferisce alla colonna dei titoletti.
Poi inizia il codice delle sezioni della colonna dei titoletti. Qui modificatele a vostro piacimento, ma modificatele per favore, non copiate pari pari le mie è_é. Metto un esempio per farvi capire:
<h2>me</h2>
parla di te<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
<br></br>
Quello tra <h2> e </h2> è il titolo, il resto in rosso da modificare è quello che comparirà nella sezione. Soprattutto, cambiate la sezione dei credits alla fine…levate i miei e mettete i vostri. Comunque, come dicevo prima, linkatemi lo stesso almeno nel primo template perché vi ho fornito il codice è_è! Non per vantarmi, ma l’intero codice non ve lo regala nessun altro ù_ù!
N.B. Vi do alcuni tag html da utilizzare. Per rendere il testo sottolineato:
<u>text</u>
Grassetto:
<b>text</b>
Corsivo:
<i>text</i>
Per andare a capo: <br>
Bene…ci ho impiegato degli anni ma ho finito! Puff…pant…sono stata dettagliatissimaaaa!!! Se avete problemi chiedete, e ripeto: fatemi vedere quello che ne cavate fuori! Ciao ciao!
EDIT:
MI SONO ACCORTA CHE QUALCUNO NON METTE I MIEI CREDITS NEI TEMPLATE CREATI. NON SAPETE COME SI FA? VE LO DICO IO ANCHE QUESTO...NELLA SEZIONE DEI CREDITS AGGIUNGETE LA RIGA COPIATA DA QUI DENTRO PER FAVORE:
What does it matter to ya?Here's the forum.
When ya got a job to do,
ya got to do it well.
You got to give the other fella hell.
Se prendete un template, non cancellate la sezione dei credits in fondo e non ridistribuite i nostri codici.
Nei templates potete modificare soltanto i titoli e i contenuti delle sezioni. Nient'altro. Per qualsiasi problema o modifica chiedete all'autore. Quando prelevate qualcosa lasciatecelo scritto nei commenti, per favore. Ci farà piacere andare a vedere i nostri lavori sui vostri blog. Possibilmente rihostate icons e blends. Se avete bisogno di una mano con i codici, chiedete nei commenti o via mp alle designers. Critiche ben accette, purchè argomentate ed educate. Quando mandate un'e-mail al blog per favore mandate anche un mp al nick Aletta17. Richieste aperte e sempre considerate, purchè postate nell'apposita sezione del forum (x). Mai nei commenti o via mp. La sezione delle affiliazioni è chiusa. Se siete nostri vecchi affiliati, ci scusiamo per il disagio. Potete tranquillamente toglierci dalla vostra lista, si intende. Noi lavoriamo gratis per voi. Evitate perciò di prenderci per i fondelli, umpf.
![[c] Aletta17 only 4 L&L Graphic](http://i176.photobucket.com/albums/w169/aLeRoCkS_17/banner3-copia222.gif)
![[c] Aletta17 only 4 L&L Graphic](http://i176.photobucket.com/albums/w169/aLeRoCkS_17/bannerrrr.png)
![[c] Aletta17 only 4 L&L Graphic](http://i176.photobucket.com/albums/w169/aLeRoCkS_17/llgraphic.png)
![[c] Aletta17 only 4 L&L Graphic](http://i176.photobucket.com/albums/w169/aLeRoCkS_17/blinkiellg.gif)
