-
Dark Scania+1
.User deleted
Scusate se la posto qua ma non so dove metterla ^^
Questa guida è stata scritta con pazienza da me.Vietata la copia.
Ho messo i colori agli HTML per facilitare la guida,nei codici HTML non appariranno colorati!
Salve a tutti!Oggi vi spiegherò come inserire una tabella slide con effetto fade.
Se non sapete cos'è vi faccio vedere cos'è:
Eccola
(Ovviamente ci saranno più tipi di tabelle)
Ed io vi insegnerò come crearne una per il vostro forum!
Parte 1:I codici
Allora:per iniziare inseriamo questo codice in Amministrazione->Grafica->Colori e StiliCODICE/* Inizio stili Tabella Slide con effetto fade */
.slide_table .title a {display: block; float: left; text-align: left}
.slide_table {width: 100%}
.slide_table .mback {cursor: pointer}
.slide_table .title {font-size: 11px}
.slide_table .title a {margin-right: 15px}
.slide_table .credits {float:right; text-align:right}
input#orologio {font-weight: normal}
/* Fine stili Tabella Slide con effetto fade */
Poi Andiamo in Amministrazione->Grafica->Codici HTML->Nella HomepageHTML<!-- Inizio Slide Script con effetto fade (ForumFree compatibile) -->
<script type="text/javascript"><!--
// Inizializziamo le funzioni della tabella, ricordarsi di configurarla adeguatamente prima di inserirla sul forum
mainboard = new slider('mainboard', 'web', 'Mary's Little World');
//--></script>
<div class="slide_table">
<table class="skin_tbl" align="center" cellpadding="0" cellspacing="0"><tr onclick="mainboard.close()"><td class="mleft_top"></td><td><table class="mback" width="100%" cellpadding="0" cellspacing="0"><tr><td class="mback_left"></td><td class="mback_center">
<!-- Titolo Tabella -->
<div class="mtitle">Bacheca</div>
</td><td class="mback_right"></td></tr></table></td><td class="mright_top"></td></tr><tr id="mainboard"><td class="mleft"></td><td><table class="mainbg" style="text-align:center;width:100%" cellpadding="4" cellspacing="1">
<tr>
<td class="title" colspan="1">
<!-- Link Tab -->
<a href="#" title="web" onclick="mainboard.show(this);return;">Home</a>
<a href="#" title="pannello1" onclick="mainboard.show(this);return;">Pannello1</a>
<a href="#" title="pannello2" onclick="mainboard.show(this);return;">Pannello2</a>
<a href="#" title="pannello3" onclick="mainboard.show(this);return;">Pannello3</a>
<a href="#" title="pannello4" onclick="mainboard.show(this);return;">Pannello4</a>
<!-- Orologio -->
<input id="orologio" class="title" size="30" readonly="readonly">
</td>
</tr>
<tr title="RIGA1">
<td class="ww">
<!-- Pannello Predefinito -->
<div id="web"><h2>Home</h2><p>
<!-- Inizio Contenuto Pannello -->
Contenuto home
<!-- Fine Contenuto Pannello -->
</p></div>
<!-- Pannello Aggiuntivo -->
<div id="pannello1" class="nascosta"><h2>Pannello1</h2><p>
<!-- Inizio Contenuto Pannello -->
Contentuto pannello1
<!-- Fine Contenuto Pannello -->
</p></div>
<!-- Pannello Aggiuntivo -->
<div id="pannello2" class="nascosta"><h2>Pannello2</h2><p>
<!-- Inizio Contenuto Pannello -->
Contenuto pannello2
<!-- Fine Contenuto Pannello -->
</p></div>
<!-- Pannello Aggiuntivo -->
<div id="pannello3" class="nascosta"><h2>Pannello3</h2><p>
<!-- Inizio Contenuto Pannello -->
Contenuto pannello3
<!-- Fine Contenuto Pannello -->
</p></div>
<!-- Pannello Aggiuntivo -->
<div id="pannello4" class="nascosta"><h2>Pannello4</h2><p>
<!-- Inizio Contenuto Pannello -->
Contenuto pannello4
<!-- Fine Contenuto Pannello -->
</p></div>
</td></tr>
<tr><td class="ww">
<div class="credits" style="float:left">
<!-- se vuoi inserisci qui un messaggio personale -->
<!-- fine messaggio personale -->
<!-- Nota Bene, e' vietata la rimozione dei crediti di seguito -->
</div><div class="credits" style="padding-right:4px"><b><a href="http://ffmagazine.forumfree.it/?t=48148627" title="Creata da Bowser e [Antonio]">Tabella Slide con effetto Fade 1.0.0</a></b></div></td>
</tr>
</table></td><td class="mright"></td></tr><tr><td class="mleft_bottom"></td><td><table class="msub" width="100%" cellpadding="0" cellspacing="0"><tr><td class="msub_left"></td><td class="msub_center"> </td><td class="msub_right"></td></tr></table></td><td class="mright_bottom"></td></tr></table><br><br>
</div>
<!-- Fine Slide Script con effetto fade (ForumFree compatibile) -->
Parte 2:Configurazione
Ok adesso la configureremo.
Notate questa parte della tabellaHTML<a href="#" title="web" onclick="mainboard.show(this);return;">Home</a>
<a href="#" title="pannello1" onclick="mainboard.show(this);return;">Pannello1</a>
<a href="#" title="pannello2" onclick="mainboard.show(this);return;">Pannello2</a>
<a href="#" title="pannello3" onclick="mainboard.show(this);return;">Pannello3</a>
<a href="#" title="pannello4" onclick="mainboard.show(this);return;">Pannello4</a>
Questi sono i pannelli della tabella.Soffermiamo la nostra attenzione su quei Home,Pannello1,Pannello2,Pannello3,Pannello4colorati in nero. Sono il nome dei pannelli della tabella,vanno quindi modificati a nostro piacimento(potrete anche toglierne,aggiungerne;quanti ne volete voi!)
Ad esempio al posto di Pannello1 potremmo mettere il pannello delle affiliazioni e così via...
Poi guardiamo quei web,pannello1,pannello2,pannello3,pannello4 colorati in verde:sono l'ID del pannello,in parole povere sono il collegamento tra il pannello ed il suo contenuto a voi non serve modificarli se non volete aggiungere altri pannelli
Sottoparte 2.2:Aggiungere pannelli alla tabella
Questa parte è difficilina...quindi state attenti.HTML<a href="#" title="web" onclick="mainboard.show(this);return;">Home</a>
<a href="#" title="pannello1" onclick="mainboard.show(this);return;">Pannello1</a>
<a href="#" title="pannello2" onclick="mainboard.show(this);return;">Pannello2</a>
<a href="#" title="pannello3" onclick="mainboard.show(this);return;">Pannello3</a>
<a href="#" title="pannello4" onclick="mainboard.show(this);return;">Pannello4</a>
Riprendiamo questa parte della tabella ed eseguiamo queste azioni:
<ol>- Copiare l'ultima parte del codice precedentemente evidenziato cioè
HTML<a href="#" title="pannello4" onclick="mainboard.show(this);return;">Pannello4</a>- Modificare l'ID cioè pannello4(sempre quello scritto in verde) in pannello5
- Modificare il nome cioè Pannello4 (quello scritto in nero)in uno a piacere
- Prendiamo questa parte della tabella(questa parte è il contenuto del pannello)
HTML<div id="pannello4" class="nascosta"><h2>Pannello4</h2><p>
<!-- Inizio Contenuto Pannello -->
Contenuto pannello4
<!-- Fine Contenuto Pannello -->
</p></div>
Modifichiamo "pannello4" con "pannello5"(Sempre quello scritto in verde)- ModifichiamoPannello4(Sempre quello scritto in nero) con il nome a piacere che avete scelto prima
Se avrete eseguito correttamente l'operazione il risultato sarà questoHTML<a href="#" title="web" onclick="mainboard.show(this);return;">Home</a>
<a href="#" title="pannello1" onclick="mainboard.show(this);return;">Pannello1</a>
<a href="#" title="pannello2" onclick="mainboard.show(this);return;">Pannello2</a>
<a href="#" title="pannello3" onclick="mainboard.show(this);return;">Pannello3</a>
<a href="#" title="pannello4" onclick="mainboard.show(this);return;">Pannello4</a>
<a href="#" title="pannello5" onclick="mainboard.show(this);return;">Pannello5</a>
EHTML<div id="pannello5" class="nascosta"><h2>Pannello5</h2><p>
<!-- Inizio Contenuto Pannello -->
Contenuto pannello5
<!-- Fine Contenuto Pannello -->
</p></div>
Sottoparte 2.3:Togliere pannelli alla tabella
Se non avete modo di usare tutti i pannelli della tabella potete toglierli.Questa parte è molto semplice!
Ri-riprendiamo (
) il codice di primaHTML<a href="#" title="web" onclick="mainboard.show(this);return;">Home</a>
<a href="#" title="pannello1" onclick="mainboard.show(this);return;">Pannello1</a>
<a href="#" title="pannello2" onclick="mainboard.show(this);return;">Pannello2</a>
<a href="#" title="pannello3" onclick="mainboard.show(this);return;">Pannello3</a>
<a href="#" title="pannello4" onclick="mainboard.show(this);return;">Pannello4</a>
I pannelli che non abbiamo usato dobbiamo eliminarli!
Es.Non ho usato il quarto pannello?Cancelliamo la parte:HTML<a href="#" title="pannello4" onclick="mainboard.show(this);return;">Pannello4</a>
Fatto!
Se avrete terminato correttamente l'operazione il risultato sarà questo:HTML<a href="#" title="web" onclick="mainboard.show(this);return;">Home</a>
<a href="#" title="pannello1" onclick="mainboard.show(this);return;">Pannello1</a>
<a href="#" title="pannello2" onclick="mainboard.show(this);return;">Pannello2</a>
<a href="#" title="pannello3" onclick="mainboard.show(this);return;">Pannello3</a>
Parte 3:Il corpo
Avete notato quei codici?Osserviamoli!HTML<!-- Pannello Predefinito -->
<div id="web"><h2>Home</h2><p>
<!-- Inizio Contenuto Pannello -->
Contenuto home
<!-- Fine Contenuto Pannello -->
</p></div>
<!-- Pannello Aggiuntivo -->
<div id="pannello1" class="nascosta"><h2>Pannello1</h2><p>
<!-- Inizio Contenuto Pannello -->
Contentuto pannello1
<!-- Fine Contenuto Pannello -->
</p></div>
<!-- Pannello Aggiuntivo -->
<div id="pannello2" class="nascosta"><h2>Pannello2</h2><p>
<!-- Inizio Contenuto Pannello -->
Contenuto pannello2
<!-- Fine Contenuto Pannello -->
</p></div>
<!-- Pannello Aggiuntivo -->
<div id="pannello3" class="nascosta"><h2>Pannello3</h2><p>
<!-- Inizio Contenuto Pannello -->
Contenuto pannello3
<!-- Fine Contenuto Pannello -->
</p></div>
<!-- Pannello Aggiuntivo -->
<div id="pannello4" class="nascosta"><h2>Pannello4</h2><p>
<!-- Inizio Contenuto Pannello -->
Contenuto pannello4
<!-- Fine Contenuto Pannello -->
</p></div>
Questi sono i codici che determinano il contenuto della tabella!Bisogna solo modificare quei Contenuto Home,Contenuto pannello1,Contenuto pannello2,Contenuto pannello4 e così via;nel contenuto che volete dare a quel pannello.Qui credo che non vi serva aiuto!
FINE
La guida è finita.... se volete chiedermi qualcosa scrivetelo qui sotto!
(I font rossi saranno visibili in nero ed i font neri saranno visibili in rosso per un errore di CSS) Scusate
. - Copiare l'ultima parte del codice precedentemente evidenziato cioè
-
blader<< .
User deleted
ottima guida,non capisco perchè la hai postata in news 
xD
. -
Dark Scania .
User deleted
perchè non sapevo dove metterla D: . -
Lionel Messi™ .
User deleted
non mi funziona
. -
elbarto98 .
User deleted
in che senso? cosa nn ti funziona? .
Inserire e configurare una Tabella Slide con Effetto Fade |
