tutorial html | The graphic soul blog

martedì, 06 gennaio 2009

Andare in amministrazione----> modifica colori e stili----> inserite alla fine questo codice

2° metodi

passando col mouse sopra alla targhetta cambia l'opacità

CODICE

.web a:link img, .web a:visited img {filter:alpha(opacity=30); -moz-opacity: 0.5; opacity: 0.5}
.web a:hover img {filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0}

passando col mouse sopra alla targhetta quest'ultima diventa tipo sfuocata

CODICE

a:hover .s {filter: blur}

thegraphicsoul Ha postato alle10:16
Lasciate dei commenti
In: tutorial html

martedì, 06 gennaio 2009

Ingradire un immagine piccola

Usare nel circuito forum

Inserire questo codice in amministrazione---> gestione codice html---> in cima al forum

CODICE

X applicarlo basta usare questo

CODICE

<a class="thumbnail" href="LINK X CREARE COLLEGAMENTO A UN SITO"target="_blank"><img src="LINK IMMAG CHE APPARE PICCOLA" width="10px" height="11px" border="0"><span><img src="LINK DELLIMMAG CHE APPARE QUANDO SI PASSA IL MAUSE"><br>TESTO CHE APPARIRà INSIEME ALLIMMAG INGRANDITA</span></a>

thegraphicsoul Ha postato alle10:16
Lasciate dei commenti
In: tutorial html

martedì, 06 gennaio 2009

Disattivare il tast destro del mouse

Usare nel circuito

Amministrazione----->gestisci codice html------------> in cima al forum

CODICE

thegraphicsoul Ha postato alle10:15
Lasciate dei commenti
In: tutorial html

martedì, 06 gennaio 2009

Avviso di entrata

Usare nel circuito forumfree e community!

Una finestra che si apre quando aprite la pagini del forum
Inserire questo codice nella sezione: amministrazione--->gestisci codice html---> in cima al forum

CODICE

thegraphicsoul Ha postato alle10:12
Lasciate dei commenti
In: tutorial html

martedì, 06 gennaio 2009

Colorare uno scrollbar

Ecco il sito

http://www.gratislandia.net/scrollbar.htm

thegraphicsoul Ha postato alle10:10
Lasciate dei commenti
In: tutorial html

martedì, 06 gennaio 2009

Immagine in tag-board

Va usato sui circuiti forumfree e forum community^^

Amministrazione----> modifica colori e stili
e infondo inserite questo codice

CODICE

/* IMMAGINE DI SFONDO TAG */

.tag .skin_tbl_border, .tag .mainbg {background-image:url(LINK DIRETTO DELLIMMAG); background-repeat: repeat}

.tag .ww, .tag .aa, .tag .aa .aa {background: inherit; border: 0}

dove sta scritto: LINK DIRETTO DELLIMMAG inserite il link dello sfondo che volete inserire

thegraphicsoul Ha postato alle10:10
Lasciate dei commenti
In: tutorial html

martedì, 06 gennaio 2009

Immagine a collegamento..

Vi insegnerò ad usare questo codice che viene usato e richiesto x i banner ho immagini che portano ad un link...molto molto utile...

Vi faccio un esempio x un banner..
codice
<a href="http://thegraphicsoul.forumfree.net" target="_blank"><img src="http://i34.tinypic.com/2iqoi8g.png" border="0" alt="The Graphic Soul forum"></a>

questo banner guardate il codice sotto...

questo e il codice iniziale...

CODICE

<a href="LINK SITO FORUM BLOG" target="_blank"><img src="LINK IMMAGINE" border="0" alt="The Graphic Soul forum"></a>

Allora prima cosa inseriamo il nostro link del sito/blo/forum dove c'e scritto link sito ecc...
Poi link immagine l'indirizzo della vostra immagine...
(potete caricare le immagini su imageshack,pothobuck ecc..)

Ricordate che i link sito e link delle immagine devono partire cosi...

HTTP://...

Spero di essere stata chiara nella spiegazione!!!

thegraphicsoul Ha postato alle10:09
Lasciate dei commenti
In: tutorial html

venerdì, 12 dicembre 2008

Countdown tutorial html

ciao oggi vi spiego come creare un contdown, avvero un oggettino che vi permette di calcolare i giorni che mancano a un avvenimento per voi particolare. noi calcoleremo i giorni che mancano all'ultimo dell'anno, il 31 dicembre.

prima di tutto salvate questa gif

a questo punto aprite animation shop e la gif appena salvata. poi aprite anche psp e un documento trasparente di 200*150 e mettete la vostra firma in alto. poi prendete lo strumento selezione e con la modalità rounded rectangle fate come in figura

a questo punto prendete lo strumento riempimento e colorate di nero la selezione poi fae seleziona/modifica/contrai mettete come valore un pixel e date l'ok. bene ora con la selezione sempre attiva colorate l'interno della soluzione con questo azzurro #7befff. quindi fate selezione/nessuna selezione

ora andate su animation e selezionate il primo fotogramma della nostra gif. fare copia e incollate come nuovo livello dentro il documento di psp. a questo punto prendete lo strumento spostamento e spostate il fotogramma della gif sulla appena sopra il rettangolino. come in figura.

poi fate tasto destro/copia unione e incollate come nuova animazione su animation shop. ora tornate su psp e tornate indietro fino a che non avete solo il documento con la firma e il rettangolino azzurro e ripetete tutte le operazioni da quando incollate il primo fotogramma con gli altri fotogrammi incollandoli su animation facendo incolla/dopo il fotogramma corrente selezionando sempre l'ultimo della fila. quando avete finito salvate in formato gif.

a questo punto dobbaimo far funzionare il contdown. hostate la vostra gif su un sito di hosting. apriamo frontpage e incolliamo questo codice in modalità codice dopo che avete cancellato quello che c'è scritto

CODICE

<HTML>

<head>
<style type="text/css">
.style1 {
margin-right: 11px;
margin-top: 13px;
}
</style>
</head>

<body>
<SCRIPT LANGUAGE="JavaScript">

</script><BODY onLoad="getTime()">
<div style="position: absolute; width: 214px; height: 148px; z-index: 1; left: 1px; top: 1px;
background-image: url('URL DELL'IMMAGINE'); /*INSERISCI QUI IL LINK DELL'IMMAGINE*/
background-repeat:no-repeat" id="layer1">
<form name=timeForm>
<p>  </p>
<p> </p>
<p align="center"><br>
<input type="texte" name=input1 size=30 border-style="none" style="border-style:solid; border-width:0px; font-style:normal;
font-variant:normal; font-weight:normal; font-size:9px; font-family:Verdana; background-color:#7befff; width: 149px; height: 17px;" class="style1"><br>
<br>
</p>
</form></div>

</body>
</HTML>

poi andate su altervista e caricate l'immagine come spiegato nel tutorial di base.

ora vi spiego un po' il codice

CODICE

qui potete modificate il colore dello sfondo della scritta (background-color), ricordate che deve essere uguale a quello del rettangolino. poi potete anche modificare la dimensione, il carattere della scritta.

poi

CODICE

y2k = new Date("Dec 25 2008 00:00:00");

qui modificate la data del vostro countdown.

il codice per metterlo nei vostri forum è questo

CODICE

ricordatevi di cambiare anche wight e height, ovvero la larghezza e l'altezza dell'immagine

ecco il mio ridultato Countdown

Finito!! se avete dubbi o damande chiedete pure

Luigina1982 Ha postato alle15:20
Lasciate dei commenti (3)
In: tutorial html

venerdì, 12 dicembre 2008

Calendario tutorial html

ciao... ora vi spiegherò come creare un calendario.

per prima cosa dobbiamo creare un'immagine..

io ho fatto questa

per il tutorial usatela pure anche voi. poi per quello a fantasia potete anche usare delle immagini abbastanza chiare per farlo.

ora apriamo frontpage e copiamo questo codice nella zona codice, prima però cancellate tutto quello che c'è scitto e si forma in automatico.

CODICE

<html>

<head>
<meta http-equiv="Content-Language" content="it">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">

-->
;
</style>
</head>

<body topmargin="0" leftmargin="0">

<div align="left" style="width: 910px; height: 183px;">
<div align="center">
<div style="position: absolute; width: 100px; height: 100px; z-index: 1" id="livello1">
</div>
<table cellpadding="0" cellspacing="0" class="main" align="left" style="height: 216px; width: 141px">
<tr>
<td width="150" style="height: 88px" > </td>

</tr>
<tr>

<td style="width:150px; height:1px; text-align:center;vertical-align:top">
<script type="text/javascript" language=JavaScript>



document.write("class='calendar' cellpadding=0 cellspacing=1>");

document.write("<tr> <td colspan='7' style='text-align:center;'><strong>"
+ monthnames[thismonth] + " " + thisyear
+ "</strong></td></tr>");
document.write("<tr>");
document.write("<td align=center class='days'>D</td>");
document.write("<td align=center class='days'>L</td>");
document.write("<td align=center class='days'>M</td>")
document.write("<td align=center class='days'>M</td>");
document.write("<td align=center class='days'>G</td>");
document.write("<td align=center class='days'>V</td>");
document.write("<td align=center class='days'>S</td>");
document.write("</tr>");
document.write("<tr>");
for (s=0;s<startspaces;s++) {
document.write("<td>-</td>");
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
document.write("<td>");
for (c=0;c<linkdays.length;c++) {
if (linkdays[c] != null) {
if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {
document.write("<a href=\"" + linkdays[c][2] + "\">");
linktrue=true;
}
}
}
if (count==thisdate) {
document.write("<span class='today'>");
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
else {
document.write(" ");
}
if (count==thisdate) {
document.write("</span>");
}
if (linktrue)
document.write("</a>");
document.write("</td>");
count++;
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table>");
document.write("</center>");

</script>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>

a questo punto uplodate l'immagine per il vostro calendario con un sito di hosting e incollatelo dove dice URL DELL'IMMAGINE

ora mettetevi in modalità normale e facciamo inserisci/livello, vi apparirà un rettangolino contornato di blu. scrivete li dentro il vostro nick in modo che non copra troppo l'immagine

abbiamo quasi finito. adesso copiate tutto il codice e copiamolo su altervista.. coem spiegato nel tutorial di base, poi salviamolo e avremo il nostro calendario. per distribuirlo nei forum dovete usare questo codice

CODICE

ecco il mio risultato

Calendario

prima di copiare il codice, se avete notato, ci sono dei segnetti /**/ lì vi spiega cosa potete cambiare.

Luigina1982 Ha postato alle15:17
Lasciate dei commenti (1)
In: tutorial html

venerdì, 12 dicembre 2008

Orologio tutorial html

ciao.. oggi vi spiego come fare un orologino.

prendete questa immagine e metteteci la firma con psp.quando farete voi l'orologio a fantasia dovrete creare un rettangolino trasparente dove andrà l'ora

ora apriamo frontpage e incolliamo in modalità codice questo:

CODICE

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body{
background-color:#FFCCCC;
font-family:Verdana,Arial,Sans-serif;
font-size:9px;
}
table{
border-collapse: collapse;
border:0px;
width:130px; /*dimensioni dell'orologio: larghezza -> inserisci le dim dell'immagine che usi*/
height:130px; /*dimensioni dell'orologio: altezza -> inserisci le dim dell'immagine che usi*/
background-image:url(http://i35.tinypic.com/23wtwz9.png); /*inserisci qui il link della tua immagine*/
}
.input {
border-style: none;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px; /*dimensione carattere dell'orologio*/
background-color:transparent;
color :#6a6666; /*colore dei numerini dell'orologio*/
font-weight:bold;
margin-top:0px;
margin-left:0px;
}
</style>

<script type="text/javascript">
function showFilled(Value) {
return (Value > 9) ? "" + Value : "0" + Value;
}
function StartClock24() {
TheTime = new Date;
document.clock.showTime.value = showFilled(TheTime.getHours()) + ":" + showFilled(TheTime.getMinutes()) + ":" + showFilled(TheTime.getSeconds());
setTimeout("StartClock24()",1000)
}
</script>
</head>
<body topmargin="0" leftmargin="0" onLoad="StartClock24()">

<div style="position: absolute; width: 58px; height: 46px; z-index: 1; left: 20px; top: 136px" id="layer1">
<form name="clock">
<p style="text-align: center">
<input type="text" name="showTime" size="9" class="input">
</p>
</form></div>

<table cellpadding="0" cellspacing="0" style="width: 191px; height: 164px">
<tr>
<td style="width:110px; height:99px; text-align:left; vertical-align:top">

<p>

 </td>
</tr>
</table>

</body>
</html>

in modalità codice ci sono le scitte tra /**/ che spiegano cosa potete cambiare. per queston tutorial lasciate pure le impostazioni così. ricordatevi di aggiustare le misure però!! ovviamente dovete (anche nel tutorial) sostituire il link della mia immagine con quella della vostra dopo che avete messo la firma e l'avete caricata su un sito di hosting.

per pubblicare i calendari sui forum usate lo stesso codice del calendario.

ecco il mio Orologio

finito!!

se avete domande o dubbi chiedete pure

Luigina1982 Ha postato alle15:15
Lasciate dei commenti
In: tutorial html

Pagine