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 jQuery Posts Slider sul Blog

Per inserire uno jQuery Posts Slider sul Blog 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 CSS:

#slider {
background:url(http://img857.imageshack.us/img857/4582/picsslidercs3.png);
height: 254px;
width: 600px;
overflow: hidden;
position: relative;
margin: 5px 0;
}


#mover {
width: auto;
position:absolute;
overflow:hidden;
}


.slide {
padding: 20px 0px;
width: 1000px;
float: left;
position: relative;
height:200px;
}


.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 20px;
position: absolute;
top: 20px;
left: 1px;
color: #ac0000;
padding:0px 0px 0px 30px;
margin:0px 0px;
width:200px;
overflow:hidden;
}


.slide h2 a:link, .slide h2 a:visited {
color:#fff;
background-color: transparent;
}


.slide h2 a:hover {
color: #ddd;
background-color: transparent;
}




.slide p {
color: #999;
position: absolute;
top: 100px;
left: 1px;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 200px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}


.slide img {
position: absolute;
top: 20px;
left: 375px;
background:#fff;
padding:10px 10px;
}


#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 115px;
right: 23px;
color: #AC0000;
padding: 3px 8px;
font-size: 12px;
text-transform: uppercase;
z-index: 1000;

(In questo codice si possono modificare i colori di sfondo, le dimensioni larghezza/altezza e cambiare immagine dove vedete la stringa in rosso.)

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

<script src='https://sites.google.com/site/cercasoluzione3/cerca/Slider-jquery_1.js' type='text/javascript'/>
<script src='https://sites.google.com/site/cercasoluzione3/cerca/Slider-java_1.js' type='text/javascript'/>

(Le strighe in rosso sono i fogli di style Java)
Adesso clicchiamo su salva modello.

Infine torniamo su Elementi pagina Aggiungi un gadget HTML/JavaScript. E aggiungiamo il codice riportato di seguito
<!-- Slider -->

<center>
<div id='slider'>
<div id='mover'>


<div class='slide'>
<h2><a href='http://www.cercasoluzione3.blogspot.com/' title='CercaSoluzione3'>C.S.3</a></h2>
<p>Descrizione da inserire...</p>
<img alt='CercaSoluzione3' height='100xp' src='http://4.bp.blogspot.com/-9q196fHRYeY/TeN1l1cBP-I/AAAAAAAAANU/d_IRx8S2LfE/s1600/Widget-Blog-CS3.png' width='100xp'/>
</div>


<div class='slide'>
<h2><a href='Url del Post' title='Titolo del Post'>Titolo Post</a></h2>
<p>
Descrizione da inserire...</p>
<img alt='Nome immagine' src='URL iMMAGINE'/>
</div>


<div class='slide'>
<h2><a href='Url del Post' title='Titolo del Post'>Titolo Post</a></h2>
<p>
Descrizione da inserire...</p>
<img alt='Nome immagine' src='URL iMMAGINE'/>
</div>



<div class='slide'>
<h2><a href='Url del Post' title='Titolo del Post'>Titolo Post</a></h2>
<p>
Descrizione da inserire...</p>
<img alt='Nome immagine' src='URL iMMAGINE'/>
</div>



</div>
<!-- /Mover -->
</div>
</center>
<!-- /Slider -->

(Qua inserite l'URL, immagini, titolo e descrizione...potete cambiare le dimensioni dell'immagine tramite height='100xp' / width='100xp')

Se avete dubbi o ci sono degli errori non esitate a contattarmi, grazie. 

0 commenti:

Posta un commento

Proponi un'idea, segnalaci un problema.

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

Scrivi un commento!