RSS Feed Seguiteci su Twitter! Seguiteci su Facebook!
NEWS: Questo Blog e' rimasto inattivo per più di 18 mesi , quindi possono esserci link non funzionanti o altre problematiche dovute alla mancata manutenzione. Cosa vi piace o non in questo BLOG?, scrivete tutte le vostre recensioni in questa area commenti, provvederemo immediatamente a cancellare il Blog o migliorarlo nelle sue aspettative. Grazie.

Inserire uno JQuery Slider per Blog

Per inserire uno JQuery Slider scorrevole dobbiamo procedere con:
  1. L'inserimento dei codici sul foglio HTML
  2. L'inserimento del codice sul Widget HTML/JavaScript 

Procediamo con l'inserimento del codice sul foglio html, andiamo su Design Modifica HTML, e Espandete i modelli widget (consiglio sempre di salvare una copia del vostro Template prima di modificare HTML), cerchiamo con la ricerca veloce (CTRL+F) il codice ]]></b:skin> e subito prima incolliamo il seguente codice

#jFlowSlide{ background:#f8f8f8; font-family: Georgia; }
#myController { font-family: Georgia; padding:2px 0; width:610px; background:#000000; }
#myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }

.slide-wrapper { padding: 5px; }

.slide-thumbnail { width:300px; float:left; }
.slide-thumbnail img {max-width:300px; }
.slide-details { width:290px; float:right; margin-left:10px;}
.slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
.slide-details .description { margin-top:10px; }

.jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }

.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }


(In questo codice si possono modificare i colori di sfondo.)

Dopodichè cerchiamo </head> e subito prima incolliamo l'altro codice

<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script language='javascript' src='http://sites.google.com/site/freebloggerhelpbiz/freebloggerhelp/jquery.flow.1.2.auto.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#myController&quot;).jFlow({
slides: &quot;#slides&quot;,
controller: &quot;.jFlowControl&quot;, // must be class, use . sign
slideWrapper : &quot;#jFlowSlide&quot;, // must be id, use # sign
selectedWrapper: &quot;jFlowSelected&quot;, // just pure text, no sign
auto: true, //auto change slide, default true
width: &quot;610px&quot;,
height: &quot;235px&quot;,
duration: 100,
prev: &quot;.jFlowPrev&quot;, // must be class, use . sign
next: &quot;.jFlowNext&quot; // must be class, use . sign
});
});
</script>


(In questo codice si possono modificare la larghezza, l'altezza e la velocità di durata, ma prima di tutto scarichiamo http://sites.google.com/site/freeblo...ow.1.2.auto.js, lo modifichiamo come vogliamo noi e lo carichiamo su Google site.)

Adesso clicchiamo su salva modello.

Infine torniamo su Elementi pagina Aggiungi un gadget HTML/JavaScript. E aggiungiamo il codice riportato di seguito

<div class="jflow-content-slider">


<div id="slides">


<!-- Inizio 1 -->
 <div class="slide-wrapper">


<div class="slide-thumbnail">


<img alt="" src="LINK IMMAGINE"/>

</div>

<div class="slide-details">


<span style="font-size: large;"><b> TITOLO DEL POST </b></span>


<div class="description">

TEXT DEL POST

</div>

</div>

<div class="clear"></div>

</div>
 <!-- Fine 1 -->

<!-- Inizio 2 -->
<div class="slide-wrapper">

<div class="slide-thumbnail">

<img alt="" src="LINK IMMAGINE"/>

</div>

<div class="slide-details">

<span style="font-size: large;"><b> TITOLO DEL POST </b></span>

<div class="description">

TEXT DEL POST

</div>

</div>

<div class="clear"></div>

</div>
<!-- Fine 2 -->

<!-- Inizio 3 -->
<div class="slide-wrapper">

<div class="slide-thumbnail">

<img alt="" src="LINK IMMAGINE"/>

</div>

<div class="slide-details">

<span style="font-size: large;"><b> TITOLO DEL POST </b></span>

<div class="description">

TEXT DEL POST

</div>

</div>

<div class="clear"></div>

</div>
<!-- Fine 3 -->

X 4

X 5

X 6

X 7

<!-- È possibile aggiungere diapositive che vuoi di sopra di questa linea -->

</div>

<div id="myController">

<span class="jFlowPrev">Prev</span>

<span class="jFlowControl">1</span>

<span class="jFlowControl">2</span>

<span class="jFlowControl">3</span>

<!-- Aumentare questi numeri con l'aumento nel numero di diapositive di sopra -->

<span class="jFlowNext">Next</span>

</div>

<div class="clear"></div>

</div>


Nell'ultimo codice qua sopra citato le stringhe in rosso vengono sostituite con:
  1. src="LINK IMMAGINE" (con l'URL dell'immagine da inserire)
  2. TITOLO DEL POST / TEXT DEL POST
  3. X 4, 5, 6, 7 per aggiungere altri diapositive.
  4. A continuare su <span class="jFlowControl">3</span> aggiungere altre stringhe in base a quanti diapositivi abbiamo aggiunto ad es. jFlowControl">4/5/6</sp

0 commenti:

Posta un commento

Proponi un'idea, segnalaci un problema.

Entra a far parte di CS3, pubblica i tuoi articoli.

Scrivi un commento!