Come vi avevo già preannunciato in questo post ho trovato un carinissimo slideshow da inserire facilmente all'interno del nostro blog.
Ho dovuto apportare un bel po' di modifiche per renderlo più... carino e anche per aggiustare qualche errorino che mi dava :)
L'originale è qui, mentre quello modificato da me lo potete vedere in questo demo.
>Niente paura!!! Partite sempre dalla concezione che se ce l'ho fatta io, potete farcela anche voi!!!
Aprite da Modello -> Modifica HTML e incollate sotto <head> queste due righe
<script src='http://code.jquery.com/jquery-latest.min.js'/>
<script src='http://jj4me.altervista.org/slide-js/bjqs-1.3.min.js'/>
<script src='http://jj4me.altervista.org/slide-js/bjqs-1.3.min.js'/>
Scorrete la pagina fino a trovare il tag di chiusura di 'body', ovvero </body> e incollate subito prima i codici qui sotto.
/***********************************************
* Coding by www.designsimonas.com please do not remove my credits
***********************************************/
<script>
jQuery(document).ready(function($) {
$('#banner-slide').bjqs({
height : 300, // altezza dello slideshow
width : 620, // larghezza dello slideshow
animtype : 'fade',
animduration : 450,
animspeed : 5000, // durata dello slideshow in millesimi di secondi
automatic : true,
showcontrols : true,
centercontrols : true,
nexttext : '',
prevtext : '',
showmarkers : true, // Show individual slide markers
centermarkers : true, // Center markers horizontally
// interaction values
keyboardnav : true, // enable keyboard navigation
hoverpause : true, // pause the slider on hover
// presentational options
usecaptions : true, // show captions for images using the image title tag
randomstart : false, // start slider at random slide
responsive : false // enable responsive capabilities (beta)
});
});
</script>
<script src='http://jj4me.altervista.org/slide-js/libs/jquery.secret-source.min.js'/>
<script>
jQuery(function($) {
$('.secret-source').secretSource({
includeTag: false
});
});
</script>
* Coding by www.designsimonas.com please do not remove my credits
***********************************************/
<script>
jQuery(document).ready(function($) {
$('#banner-slide').bjqs({
height : 300, // altezza dello slideshow
width : 620, // larghezza dello slideshow
animtype : 'fade',
animduration : 450,
animspeed : 5000, // durata dello slideshow in millesimi di secondi
automatic : true,
showcontrols : true,
centercontrols : true,
nexttext : '',
prevtext : '',
showmarkers : true, // Show individual slide markers
centermarkers : true, // Center markers horizontally
// interaction values
keyboardnav : true, // enable keyboard navigation
hoverpause : true, // pause the slider on hover
// presentational options
usecaptions : true, // show captions for images using the image title tag
randomstart : false, // start slider at random slide
responsive : false // enable responsive capabilities (beta)
});
});
</script>
<script src='http://jj4me.altervista.org/slide-js/libs/jquery.secret-source.min.js'/>
<script>
jQuery(function($) {
$('.secret-source').secretSource({
includeTag: false
});
});
</script>
All'interno di questi codici potete fare alcune modifiche, che ho evidenziato con le spiegazioni in italiano.
Passiamo ora agli stili, cioè l'aspetto dello slideshow.
Cercate un posticino fra i codici del CSS per inserire questi:
/* Basic jQuery Slider essential styles */
ul.bjqs {
position:relative;
list-style:none;
padding:0;
margin:0;
overflow:hidden;
display:none;
border:1px solid #ddd;
}
li.bjqs-slide {
position:absolute;
display:none;
}
ul.bjqs-controls {
list-style:none;
margin:0;
padding:0;
z-index:9999;
}
ul.bjqs-controls.v-centered li a {
position:absolute;
}
ul.bjqs-controls.v-centered li.bjqs-next a {
right:-10px;
background: #c0dcda url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMAiG1s61GRjAkOzHllXuhtmsmN1RxfQyihPT2kLwiTSDl_-vN8frUzn2XEC2J-fuaYV93BbVMqpz7iPtM8WZ_db2bHOnbPD8JBdIJk1WA7aFe0tfIjqyxfi1pcWD2A47o3Y3ZBlddmtzd/s1600/arr-n.png)no-repeat center center;
color:#fff;
font-weight:bold;
padding:5px;
width:20px;
height:20px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
ul.bjqs-controls.v-centered li.bjqs-prev a {
left:-10px;
background: #c0dcda url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIkJQuaIPi60FWED9QypxTX6BilmqIpNxRUl637UiQ0E5QaGwVyyw-IfWBJoz9hpWPIpE53Ea1SqgzaVdIVoVX-NMllNkL3ovdnDJSP1X0cmbW_69tpYP-0AVweKkqEQYx7U_D492-L9v2/s1600/arr-p.png)no-repeat center center;
color:#fff;
font-weight:bold;
padding:5px;
width:20px;
height:20px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
ol.bjqs-markers{
list-style: none;
padding: 0;
margin: 0;
width:100%;
}
ol.bjqs-markers.h-centered {
text-align: center;
}
ol.bjqs-markers li {
display:inline;
}
ol.bjqs-markers li a {
display:inline-block;
background:#ccc;color:#fff;
padding:5px 10px;
margin:2px 5px;
}
ol.bjqs-markers li.active-marker a, ol.bjqs-markers li a:hover {
background:#999;
color:#fff;
}
p.bjqs-caption {
display:block;
width:100%;
margin:0;
padding:2%;
position:absolute;
bottom:0;
text-align: center;
background:#555;
color:#fff;
opacity:0.7;
font-size:12px;
text-transform:uppercase;
}
ul.bjqs {
position:relative;
list-style:none;
padding:0;
margin:0;
overflow:hidden;
display:none;
border:1px solid #ddd;
}
li.bjqs-slide {
position:absolute;
display:none;
}
ul.bjqs-controls {
list-style:none;
margin:0;
padding:0;
z-index:9999;
}
ul.bjqs-controls.v-centered li a {
position:absolute;
}
ul.bjqs-controls.v-centered li.bjqs-next a {
right:-10px;
background: #c0dcda url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMAiG1s61GRjAkOzHllXuhtmsmN1RxfQyihPT2kLwiTSDl_-vN8frUzn2XEC2J-fuaYV93BbVMqpz7iPtM8WZ_db2bHOnbPD8JBdIJk1WA7aFe0tfIjqyxfi1pcWD2A47o3Y3ZBlddmtzd/s1600/arr-n.png)no-repeat center center;
color:#fff;
font-weight:bold;
padding:5px;
width:20px;
height:20px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
ul.bjqs-controls.v-centered li.bjqs-prev a {
left:-10px;
background: #c0dcda url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIkJQuaIPi60FWED9QypxTX6BilmqIpNxRUl637UiQ0E5QaGwVyyw-IfWBJoz9hpWPIpE53Ea1SqgzaVdIVoVX-NMllNkL3ovdnDJSP1X0cmbW_69tpYP-0AVweKkqEQYx7U_D492-L9v2/s1600/arr-p.png)no-repeat center center;
color:#fff;
font-weight:bold;
padding:5px;
width:20px;
height:20px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
ol.bjqs-markers{
list-style: none;
padding: 0;
margin: 0;
width:100%;
}
ol.bjqs-markers.h-centered {
text-align: center;
}
ol.bjqs-markers li {
display:inline;
}
ol.bjqs-markers li a {
display:inline-block;
background:#ccc;color:#fff;
padding:5px 10px;
margin:2px 5px;
}
ol.bjqs-markers li.active-marker a, ol.bjqs-markers li a:hover {
background:#999;
color:#fff;
}
p.bjqs-caption {
display:block;
width:100%;
margin:0;
padding:2%;
position:absolute;
bottom:0;
text-align: center;
background:#555;
color:#fff;
opacity:0.7;
font-size:12px;
text-transform:uppercase;
}
Il background (ossia lo sfondo) che trovate scritto in grassetto è quell'azzurrino dietro le freccine (che sono invece un'immagine): questo background potete cambiarlo, personalizzando il colore a seconda dello stile grafico del vostro blog.
Oppure potete cancellare il background e lasciare/modificare solo la freccina.
Anche gli altri background potete cambiarli, se non vi piace il grigio :)
Ed ora, dopo aver pensato agli script e agli stili, andiamo ad inserire il codice HTML dello slideshow!
Andate in Layout e scegliete il gadget HTML/Javascript e incollate il seguente codice:
<div id="banner-slide">
<ul class="bjqs">
<li><a href='URL-POST'><img src="URL-IMMAGINE" title="" /><p class='bjqs-caption'>INSERISCI IL TESTO O IL TITOLO DEL POST</p></a></li>
</ul>
</div>
<br/><br/><br/>
<ul class="bjqs">
<li><a href='URL-POST'><img src="URL-IMMAGINE" title="" /><p class='bjqs-caption'>INSERISCI IL TESTO O IL TITOLO DEL POST</p></a></li>
</ul>
</div>
<br/><br/><br/>
Copiate e incollate il blocco racchiuso in <li></li> per creare più slide.
Alla fine ho dovuto aggiungere gli spazi <br/> perchè avevo notato che si andava a sovrapporre con il primo post.
PER APPROFONDIRE
- Se volete eliminare i numeri dei post che compaiono sotto lo slideshow, allora aggiungete display:none; all'interno del blocco appartenente a ol.bjqs-markers.
- Se volete eliminare le freccine ai lati, fate la stessa cosa ma all'interno dei blocchi appartenenti a ul.bjqs-controls.v-centered li.bjqs-next a e ul.bjqs-controls.v-centered li.bjqs-prev a.
- Se desiderate che non capaia la descrizione all'interno della striscia grigia, allora vi basterà inserire l'immagine senza alcun testo descrittivo.
- Se volete cambiare la dimensione dello slideshow, allora dovete modificare i valori di width e height all'interno dello script. Ricordate di creare immagini della stessa dimensione per una migliore visualizzazione.
Spero di non aver scordato nulla, ma se così fosse, o se avete problemi nell'installarlo, potete sempre lasciare un commento qui sotto :)
.jpg)
Interessante, devo provarlo! Anche eventualmente per un sito. Finora usavo Cycle, che è anch'esso una libreria di Jquery, ma non sempre sono riuscita a lavorarci come volevo. Molto probabilmente per limiti miei, per carità... però proviamo l'alternativa.
RispondiEliminaGrazie mille Simona!
Cycle non lo conosco, ma gli darò un'occhiata... questo credimi l'ho semplificato tanto e ora risulta semplicissimo da usare!!!
EliminaAnche le descrizioni delle immagini erano limitate, ma per come le ho scritte io ora si possono scrivere dei poemi (anche se non ce n'è bisogno) :D
Ohhhh, che meraviglia! Bellissimo, grazie Simona!
RispondiEliminaDate le mie scarse competenze potrò farlo soltanto quando avrò un'intera settimana di ferie, ma sicuramente prima o poi mi lancerò in questa avventura!
vedrai che sarà semplicissimo, nel caso io sono qua ;)
EliminaInteressantissimo! Grazie Simona!
RispondiEliminaDi niente Mary :)
EliminaHo provato ad inserirlo nel blog per mettere in evidenza alcuni dei post più importanti...beh mi piace davvero :D
RispondiEliminaÈ bellissimo, anche le immagini che hai scelto per i post lo sono :)
EliminaGrazie Silvia :)
EliminaMi piace tantissimo! Grazie Simona per il tempo e le energie che hai dedicato al codice per renderlo funzionante! Io non ho mai amato gli slideshow perche' possono rivelarsi instabili a seconda del browser usato dal lettore ma devo dire che come hai semplificato il codice tu mi piace tanto!
RispondiEliminaE nel tuo header fa proprio una bella figura quindi tanti complimenti! Ora mi salvo quest'articolo assieme agli ultimi due o tre che mi ero persa perche' ogni tuo post e' un tesoro!
Buon sabato, Alex
Grazie mille Alex, non sai quanto mi fanno piacere le tue parole *_*
EliminaCiao! Mi hai risolto un problemone :) Io però vorrei togliere i numeri sotto la slideshow...sai come posso fare?
RispondiEliminaCiao Lia! Per togliere i numeri devi sostituire, nello script prima della fine del tag 'body', 'true' con 'false' lì dove sta scritto
Eliminashowmarkers : ....
centermarkers : ....
E' così che ho fatto ;)
Mi piace un sacco, ma nel mio probabilmente sposterebbe troppo in basso la lettura dei contenuti appena si apre la home…ma se funzionasse potrei inserirlo al posto dell'Header del blog…pensi che funzionerebbe?
RispondiEliminaBeh la grndezza delloslideshow puoi sempre determinarla tu, può essere anche una semplice striscia di massimo 100px di altezza... comunque, sì funzionerebbe lo stesso nell'header, sostituendo il logo :)
EliminaCi sono riuscito ma non mi soddisfa ancora:
RispondiEliminacome si fa a ridurre la dimensione del numero di slide sotto lo slideshow in modo autonomo dalla dimensione del testo (ho visto che se aumenti la dimensione del testo dello slide show aumentano anche i numeri)?
E' possibile invece di visualizzare il numero di slide poterci scrivere qualcosa?
Come si fa a cambiare la forma/ridurre le dimensioni del quadratino che contiene il numero di slide?
L'immagine nello slide show non prende tutto lo spazio nello slide show ma è leggermente spostata, ha un bordo a sinistra ed in alto, qual'è la stringa nella quale devo agire per posizionare l'immagine correttamente?
Grazie
Allora per quanto riguarda la grandezza del font dei numeri, cerca negli stili 'ol.bjqs-markers li ' e inserisci nelle parentesi 'font-size:...px;' prima del 'px' inserisci in numero la grandezza edl font...
Eliminaper le immagini, invece ti consiglio come si fa di solito per avere delle immagini perfette (così come faccio io) creale almeno 5px più piccole della misura del container dello slideshow.
Per quanto riguarda la grandezza dei numeri il ridimensionamento sono riuscito a farlo funzionare a metà: solo sul numeretto della slide "attiva" (quella visualizzata al momento), i numeretti delle altre restano non ridimensionati. Eppure font-size=10px l'ho messo ovunque XD
Eliminaol.bjqs-markers.h-centered {
text-align: center;
font-size:10px;
}
ol.bjqs-markers li {
display:inline;
font-size:10px;
}
ol.bjqs-markers li a {
display:inline-block;
background:#000;color:#fff;
padding:5px 10px;
margin:2px 5px;
font-size:10px;
}
ol.bjqs-markers li.active-marker a, ol.bjqs-markers li a:hover {
background:#fff2cc;
color:#000;
font-size:10px;
}
Per quanto riguarda l'immagine non è cambiato praticamente nulla facendola più piccola di 5 px. La dimensione del mio box è 1066 x 200, ho fatto dunque le immagini da 1061x195, dovrebbere essere corretto giusto?..e invece resta il solito vistoso bordo a sinistra e a destra di una 30ina buona di px.
Se volessi avere nello slide show un font dei caratteri diverso da quello del Testo Schede (modificabile da Personalizza>Avanzato>Testo Schede), come devo fare?
Allora, sai dove sta pure il problema? Tu lo hai inserito in Layout, sotto il gadget delle pagine?
EliminaPerchè ti consiglio di inserirlo manualmente, come ho fatto io, direttamente nel codice HTML del tuo template...
cerca il tag 'div class=main-outer' e subito sotto inserisci il codice dello slideshow...
prova così e fammi sapere, se dovessi avere ancora problemi, se vuoi, posso modificarlo io per te :)
Sì ho inserito l'ultimo step di codice in Layout con un widget "Configura Java/HTML".
EliminaHo cercato con CTRL+F ma non trova alcun 'div class=main-outer'
PS: ho notato che nei tuoi commenti appare il drappetto verdino Author, se volessi inserire qualcosa di simile come si fa?......sono una bella rottura di scatole lo so XD.
figurati non c'è problema :)
EliminaPer l'immagine devi procedere così:
nel codice HTML, negli stili, troverai un blocco che inizia così:
/* Comments
----------------------------------------------- */
Subito sotto trovi scritto questo casino di codice:
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
Non spaventarti di metterci mano...
Ti mostro il mio codice, così ti dico cosa andare a modificare...
.comments .comments-content .icon.blog-author {
position:absolute;
top:-7px;
right:5px;
width:17px;
height:76px;
background: url(URL_TUA_IMMAGINE) no-repeat top right;
}
Una volta creata l'immagine saprai le sue dimensioni, quindi potrai cambiare i valori di width e height.
La posizione dell'immagine è data nel background (perchè è un'imm. di sfondo), quindi da top right, ossia in alto a destra, e anche da dai valori di top: e right:... tu puoi cambiarli a tuo piacimento :)
Ovviamente questo mio codice deve andare a sostituire quelle già esistente.
Molto semplice, l'ho testato ed è venuto al primo colpo, grazie mille :)
Elimina( a proposito come si fa a cambiare il colore dello sfondo della zona commenti, non credo di averlo mai mappato e in Personalizza non mi sembra ci sia la possibilità di farlo, il mio c'ha un coloraccio :\?)
Continuo ad avere difficoltà con lo slideshow, non riesco proprio a trovare 'div class=main-outer' , probabilmente avendo un diverso template si chiama in un altro modo o che so io.
In che zona circa dovrebbe trovarsi? Mi daresti altro codice che sta intorno a 'div class=main-outer' , tante volte riesco a pescarlo cercando una linea di codice.
Grazie
Allora quando vai in 'Modifica HTML' , accanto al tasto 'salva modello' trovi 'vai al widget', cliccaci su e ti viene fuori una lista di tutti gli elementi presenti nel tuo template... clicca su 'pagelist' e ti dovrebbe far arrivare sul blocco delle pagine ceh sta nel div 'tabs'... scorri un po' giù e troverai 'main-outer', che c'è di sicuro perchè l'ho visto nel tuo codice ;)
Eliminadimenticavo il background dei commenti (mi stai dando tanti spunti per dei tutorial, grazie :D)...
Eliminainserisci questo codice negli stili:
.comment {background:#fff;}
dimmi poi se funziona..
Perfettissimo, trovato subito cercando in 'pagelist', inserito il codice là sotto e con un colpo si è sistemato tutto: l'immagine è andata ok e i numeretti sono tutti della dimensione desiserata.
EliminaSegnalo che ogni volta che si cambia qualcosa sull'HMTL relative a questa porzione di codice (come cambiare le immagini, aggiungere nuove slide) in automatico nella sezione Layout si creano due widget Java/HTML contenenti l'ultima porzione di codice di questo tutorial (quello relativo alle immagini delle slide appunto) ed aggiornando la pagina del blog tornano i difetti di prima (immagine spostata, numeri enormi nel mio caso), per ovviare ciò bisogna andare in Layout e rimuovere questi due widget che blogger ha creato da solo e riaggiornando il blog tutto torna perfetto. Niente di terribile, ma è normale che faccia così?
Inserito con successo anche la stringa .comment {background:#fff;}..però non ho risolto del tutto il problema, perchè lo sfondo del commento è diventato bianco (grazie al coddice appena inserito) ma la cornicetta del box commenti è rimasta grigio topo (prima dell'inserimento anche lo sfondo commenti era grigio topo http://i39.tinypic.com/5e9y6d.jpg) . Per cambiare anche il box esterno quello come si fa?
Se vuoi cambiare il background a tutto il blocco dei commenti devi modificare il blocco 'comments' con questo codice: .comments {background: #fff; }
Eliminaovviamente con questo ti uscirà bianco, tu poi lo cambi come vuoi :)
Ottimo, grazie :D
EliminaBuongiorno, complimenti per il blog.
RispondiEliminaAnch'io ho provato a implementare questo slide show ed anche a me aggiungendolo nel codice HTML invece che in Layout migliora da alcuni errori che mi dava; però facendo ciò mi si si è spostato tutto lo slideshow a sinistra (non è più centrato col blog). Come lo sistemo?
Inoltre è possibile utilizzare questo slideshow in qualche modo all'interno di un post? Perchè avevo provato ad usare quello di Picasa, ma il risultato che dà non mi piace per nulla, questo è decisamente migliore.
Grazie
Buongiorno e grazie mille per i complimenti :)
EliminaHo fatto una prova, ma purtroppo non riesce a supportare due slideshows.
Per centrare invece lo slideshow, devi aggiungere <center>
prima del'div' di apertura e </center> dopo il 'div' di chiusura dello slideshow... spero di essere stata chiara :)
Risolto, grazie. Era semplicissimo non c'avevo proprio pensato :)
EliminaPeccato per il secondo slide show :(
Sono ancora io :D, domandina:
RispondiEliminaquesto slide show ha una porzione (di default in basso orizzontale) nella quale scrivere del testo che descriva la locandina attiva. E' possibile far sì che questa "banda testo" sia visibile ("si attivi")solo quando si passa la freccetta del mouse sopra allo slideshow?
Grazie
Ciao! Certo è possibile :)
EliminaAgli stili, all'ultimo blocco trovi p.bjqs-caption devi aggiungere visibility:hidden; prima della parentesi di chiusura.
Poi aggiungi questo codice subito sotto:
li.bjqs-slide:hover p.bjqs-caption {
visibility:visible;
}
Se ci sono problemi fammi sapere ;)
Perfettissimo, fantastica come sempre, funziona splendidamente;)
EliminaGrazie
wow grazie a te!!! :D
EliminaComplimenti per il blog, sono nuova follower, e vorrei piano piano fare un reistyle del blog.
RispondiEliminaIo sono informatica ma di web, html e css so' ben poco. terrò a mente questo post, lo voglio provare?, domandona, ma lo posso mettere nella hone del blog sopra all'elenco dei post? blogger lo permette?
il mio blog è http://semplicementeoggi.blogspot.it/
ciao Erica, grazie per esserti unita al mio blog ^_^
EliminaCerto che puoi aggiungerlo, nel demo è proprio sopra i post ;)
Mi è sorta una domanda, sarebbe possibile personalizzare lo slideshow per mostrare in automatico i post più popolari o anche quelli meno popolari (che potrebbero prendere più visibilità )? ciao
RispondiEliminaPurtroppo i link ai post si possono inserire solo manualmente
EliminaUhm...avevo messo un commento ma non lo vedo, chiedo scusa se compare doppio! Dicevo: stavo per fare la stessa domanda...se io volessi mettere lo slide nella sidebar con i 5 post piu letti ? Devo creare le 5 immagini, una per ogni post e caricarle sul sito di hosting, e poi inserire url del post e immagine di riferimento dentro a href='URL-POST'><img src="URL-IMMAGINE" etc etc no ? Non c'e' un modo per farlo come dire...in automatico,giusto ?
EliminaEsatto! Ancora non ho trovato come inserirli automaticamente, ma ci "lavorerò" su ;)
EliminaOoook grazie!! Nel frattempo provo a farlo...inizio adesso...addio :DDD
Eliminaahahahah 'addio' è bellissima :D
Elimina:P e' che lo so, mi ci metto e smetto di fare tutto il resto :D E soprattutto ci sono delle cose che mi danno dei problemi e che ti dovrei chiedere...ma posso stare a rompere tutte le volte che decido di mettere in pratica uno dei tuoi utilissimi tutorial ? :P
Eliminaok dai sarò buona....avevo 10 domande/problemi e ne ho risolti 8 da sola, smanazzando html e css. Me ne rimangono 2: vorrei togliere i numeri e mettere una scritta tipo post piu letti o una cosa del genere...qual'e' la parte di codice da andare a modificare? Ho cancellato e annullato varie volte per vedere se indovinavo ma niente :D
EliminaOk, di questo ci vuole per forza una pillola di tutorial :D
Elimina(potrebbe essere una nuova linea da seguire...queste delle pillole :P)
Invece per il titolo ti basterà inserirlo nel titolo del gadget :D
Ahhhhhhh fatto! :) Evviva la pillola, la aspetto :) Per il discorso del titolo...non farci caso, sono scema :D E' un gadget, e ho gia' cambiato tutti gli altri titoli con un'immagine,giorni fa. Devo fare la stessa cosa....non so perche non mi e' venuto in mente, mi si sara' fritto il cervello a furia di html e css vari :D Grazie dell'aiuto, e' venuto prooooprio carino :) !
EliminaComunque per togliere i numeri (te lo dico in anticipo) devi inserire display:none; negli stili dove trovi scritto ol.bjqs-markers li a al posto di display:inline-block ^_^
EliminaCiao Simona, stavo provando ad inserirlo nel blog. La mia domanda è: quando dici "trovate un posticino nel css cosa intendi di preciso? @_@
RispondiEliminaCiao Federica! Qui puoi vedere come trovare lo spazio dove inserire il css:
Eliminaguarda qui!
Grazie mille Simona! Appena posso ci dedico un pomeriggio; vediamo che combino ehehe! :3
EliminaRieccomi come previsto! eheh ora che ti ho trovata non mi scappi piu :P e grazie per la costante pazienza... sto provando a mettere lo slideshow... ho inserito tutto il necessario e impostato le dimmensioni 200x200 perchè vorrei metterla nella sidebar di destra ... il problema è che proprio non mi appare :( cosa posso aver sbagliato? ho inserito tutto nel modello HTML tranne l'ultima parte con tutti gli URL che ho messo in un widget che ho posizionato direttamente nella sidebar, potrebbe essere questo l'errore? grazie mille! :) nel frattempo ti posto sulla nostra pagina... non vogliamo essere egoisti e tenerti tutta per noi! ;)
RispondiEliminaGrazie mille!!! Bellissimo il vostro blog ♥
EliminaLo slideshow è quello alla fine del blog, esatto?
Tu comunque hai cambiato le dimensioni nello script? non negli stili
Ma sai che ho notato che non si riescono ad inserire i commenti??? Non avete dato il consenso?
EliminaComunque la grafica della campagna pubblicitaria è strabellissima!!!!!!!!!!!! *_*
Ciao Simona! grazie :) :) si lo slideshow per ora l ho posizionato li sotto cosi non da fastidio perchè non riesco a metterlo dove vorrei... hai una soluzione per me? cioè come dovrei fare a posizionarlo in formato quadrato in un widget nella sidebar? i commenti li avevo tolti perchè avevo inserito quelli di facebook ma poi visto il problema con la ripetizione dei commenti ho eliminato anche quello in vita di soluzioni definitive...intanto purtroppo non riceviamo molti commenti per cui non è un grave problema per ora ;) purtroppo non sono un genio in html e da sola non riesco a farcela!!
EliminaHo realizzato il video tutorial per il box sotto ogni post, dagli un'occhiata ;)
EliminaPerfetto grazie mille!! appena ho un attimo mi ci metto! :) per favore fammi sapere anche se riesci a risolvere l'altro problema (slideshow) perchè non c'è verso... grazie e a presto!
RispondiEliminaImprovvisamente non mi compare più lo slideshow, non credo di aver cancellato alcuna riga di codice, perchè ho verificato e nel Modifica HTML ci sono tutte le stringhe di questo tutorial.
RispondiEliminaChe fare per rintracciare l'errore velocemente?
Grazie
Hai notato se è da quando hai inserito la finestra popup di facebook che ti dà questo errore?
EliminaE' sì il problema è proprio quello, se rimuovo il widget del popup facebook lo slide show torna.
EliminaNon sono compatibili?
Non c'è un modo per tenere attivi entrambi?
Posso passarti il codice che sto usando io in questo momento e provare a vedere se va bene :)
Eliminainviami un'email così ti rispondo inserendo il codice.
Cara Simona!
RispondiEliminaPremetto che sono un preistorico digitale.
Sto navigando da mesi alla ricerca di una soluzione a questa domanda:
Si può realizzare all'interno di un singolo post una slideshow in blogspot?
Non chiedo di realizzare la slideshow come intestazione del blog, ma di dotare ogni post di una slideshow. Al momento so inserire solo foto in sequenza statica, ovvero una sotto l'altra.
Se puoi darmi qualche indicazione te ne sarei grato.
Scusa se ti rispondo solo ora, ma ti chiedo un paio di giorni di pazienza. Sono influenzata tanto da non riuscire a parlare e a stare davanti al computer...mi spiace ma per darti una risposta corretta devo fare una prova. Comunque da una risposta che avevo dato su mi sa che non è possibile.... perdonami se ti sembro rinco ma tre giorni di febbre sopra i 39 han lasciato il segno -.-
EliminaIntanto auguri di veloce miglioramento!
EliminaHo letto solo dopo il commento precedente. Comunque se non é troppo impegno ti chiederei di valutare se ci fosse comunque una possibilità.
A presto
auguroni
Rieccomi, non del tutto in forma, ma eccomi qua :D
EliminaDunque ho provato, ma confermo...non supporta due slideshow, perchè nel codice è ben definito un 'id' che deve essere unico, di conseguenza anche inserendone due o tre, ne viene visualizzato solo uno... mi spiace
Grazie Simona!
EliminaAllora niente slideshow nei post, pazienza. Grazie 1000 per il tuo aiuto, e complimenti per il blog.
Ciao
luigi
Cara Simona,
RispondiEliminaho provato ad inserire lo slideshow e ci sono quasi riuscita, tranne il per fatto che l'immagine all'interno non ricopre perfettamente il riquadro, pur avendo fatto le stesse dimensioni. Come potrei fare? ho sbagliato qualcosa nei passaggi? ti lascio il link del blog così puoi passare per dare un occhiata.... http://ildiariodellamoda1.blogspot.com/
un grazie anticipato per l'aiuto <3
Ciao Enza, allora per eliminare lo spazio (dovuto ai settaggi del blocco in cui l'hai inserito, che è lo stesso delle pagine) bisogna andare ad eliminare il 'padding', ecco come!
EliminaInserisci questo codice nel CSS:
li.bjqs-slide a {padding:0 !important;}
Aggiorna la pagina, ricaricala (perchè a volte non si vedeno subito i cambiamenti, causa cache) e poi fammi sapere se ha funzionato!
Questo commento è stato eliminato dall'autore.
EliminaSei un genio grazie mille! ha funzionato perfettamente, in realtà ho un altro piccolo dubbio e spero tu possa aiutarmi... vorrei centrare i titoli dei gadjet nella sidebar e proprio non ci riesco, come potrei fare? E il carattere dei titoli deve per forza essere uguale a quello delle date dei post? cmq grazie sei gentilissima <3
EliminaPer la richiesta di centrare i titoli lo già risolta grazie cmq per il disturbo, però vorrei riuscire ad avere più spazio tra il titolo e il widget corrispondente, perchè ora mi si presenta appiccicato come potrei fare?
RispondiEliminaspero tu possa rispondermi se non sono di disturbo.... :D
Se vuoi distanziare i gadget, puoi dare un'occhiata qui, e anzichè inserire un valore in negativo lo dai in positivo (in pratica levando solo la meno).
EliminaSe vedi ceh i gadget sono ancora troppo vicini aumenta il valore del numero ;)
no, non è che voglio distanziare i gadget tra di loro ma vorrei distanziare il gadget di google+ dal suo titolo corrispondente spero che mi sia fatta capire, se vuoi dai un occhiata per vedere, perchè il titolo dove ho scritto google+ è troppo attaccata alla sua immagine si potrebbe distanziare o no?
Eliminahttp://ildiariodellamoda1.blogspot.com/
ok, ora ho capito :)
Eliminaaggiungi questo codice al CSS:
#PlusBadge1 h2 {margin-bottom:15px;}
Sei grande!!! E' proprio ciò che chiedevo grazie mille, ho provato a scriverti nella sezione "proponi un tutorial", ma non mi visualizza il commento. Vorrei aggiungere al mio blog la barra in alto fissa che segue tutto il blog quando scendi (come la tua verde), ma non so proprio come fare potresti aiutarmi? un bacione <3
EliminaGrazie Enza ^_^
EliminaPer la barra in alto puoi seguire questo mio tutorial ;)
PAGINE FISSE IN ALTO
si ero andata già a vedere ma al posto delle pagine vorrei mettere una scrittura come hai fatto tu e il rettangolino cerca nel blog si può fare? come faccio? grazie per la tua pazienza :D
EliminaBeh in questo caso allora devi seguire il tutorial nella creazione del 'div' in alto al blog, e poi all'interno crei un altro div di almeno 20/30 px più stretto rispetto alla larghezza dell'intero blog.
EliminaIn questo ultimo elemento inserisci ciò che vuoi ;)
Quindi quale tutorial dovrei seguire? perchè è da poco che sto sperimentando i codici e non sono molto brava con queste cose, potresti fare un breve tutorial? sempre se puoi grazie cmq ^-^ :D
EliminaOk, farò un tutorial appositamente per questo ;)
EliminaGrazie, ti adoro, sei gentilissima... <3 <3
EliminaAppena fai il tutorial puoi mandarmi il link tra questi commenti così vado diretta
EliminaQuesto commento è stato eliminato dall'autore.
RispondiEliminaSimo ho del tempo libero in questi giorni e mi sto dedicando alla nuova grafica del blog... Faccio le prove su un "blog prova" visibile solamente a me prima di metterlo nel mio blog ufficiale... Ho dato un occhiata a tutti i tuoi tutorial sono fantastici, questo lo adoro ma so di già che combinerò pasticci :) ti farò sapere :*
RispondiEliminaPs: un informazione (che non centra con questo tutorial) spesso vedo in alcuni lavori di grafica, degli effetti "a macchia d'acquerello" quale programma potrei utilizzare? immagino photoshop, ma io cerco qualcosa di più semplice... suggerimenti? un bacione e grazie
Ciao Simona, grazie per i complimenti :D :*
EliminaUn programma alternativo a photoshop potrebbe essere GIMP, che ha pure una vasta gamma di 'pennelli' (sono quelli le macchie d'acquerello) da poter recuperare sul web. E' gratuito, è una vita che non lo uso...è stato il mio primo programma di grafica :D
Ti ingrazio Simo :D ci proverò :*
EliminaCiao. Torno all'arrembaggio sempre sullo slideshow XD.
RispondiEliminaVisto che ho cambiato la veste grafica del sito e quindi sconvolto anche lo slideshow precedente, volevo sapere i numeri sotto che indicano il numero di "diapositiva" e le freccette come si fanno ad eliminar?
Grazie
Ciao! Guarda prova prima a cambiare da 'true' a 'false' le opzioni di comando, ovvero queste:
Eliminashowcontrols : true,
showmarkers : true, // Show individual slide markers
Funziona, grazie.
EliminaHa tolto però solo i numeri ma lo spazio da essi occupato (cioè la distanza fra lo slideshow e il resto del blog che ha sotto) è rimasto invariato, non è diminuito togliendo la visibilità dei numeri. Si può regolare manualmente a piacimento?
Grazie
Ciao!
RispondiEliminaE' molto bello, però come dovrei fare se volessi che automaticamente nello slideshow andassero ad esempio gli ultimi 3 post, senza doverli però inserire manualemnte ogni volta?
oppure c'è uno slideshow che fa questo "lavoro"?
Grazie per questo articolo!!! =)
Ciao, come si centra questo slideshow con il blog?Perchè mi viene lievemente spostato a sinistra.
RispondiEliminaInoltre leggo nel codice che ha un effetto fade nella transizione fra una slide e l'altra, si può cambiare con un' altra transizione (ad esempio mettere una Down Up ecc)?
Grazie
Ciao! Rispondo sia per Fabio Ballati che per I.M. Marche, poiché ahimé la risposta è uguale per entrambe le domande...
RispondiEliminaNo, questo tipo di slideshow, che ho reperito dal web, ha funzioni abbastanza limitate.
Ho trovato anche altri tipi dis cript che permettono sia l'inserimento degli ultimi post, sia diversi effetti di transizione, spero e conto di riuscire a soddisfare tutte le richieste a breve, perchè davvero sto accumalandone troppe :(
Ciao simona, ho provato ad inserire lo slideshow nel mio blog di prova ma guarda com'è diventato?? Eppure non ho modificato nulla.. le freccine si sono spostate verso destra, e in più si sono duplicati i numeri verso il basso..
RispondiEliminaCiao! Ho visto che lo hai inserito sotto il menu...prova a trascinarlo proprio sopra il gadget del Blog
Eliminammmm, un pò meglio, il problemino dei numeri si è risolto, ma le freccine sono sempre per i fatti loro. Inoltre come posso riuscire a centrare lo slideshow?
Eliminahttp://polpadigranchioprova.blogspot.it/
Ciao Simona,
RispondiEliminaposso chiederti un favore, perché sono giorni che navigo nel buio e magari tu mi potresti aiutare!
Se io volessi far apparire lo slide esclusivamente nella homepage cosa dovrei fare?
Perchè ho capito come funziona per i wadget e tutto, ma non so trovare la soluzione a questo!! :)
Grazie mille anticipatamente, e scusa per il disturbo!
Ylenia!
Rieccomi! Ho appena risolto, così ti ho tolto anche un impiccio!!
EliminaIn realtà è stato più facile del previsto!!
Grazie comunque per il tutorial dello slide!! Fantastica come sempre :)
Ciao cara ci ho provato ma c'è qualcosa che non va....non vedo l'immagine....dove avrò sbagliato? 8((
RispondiEliminaciao! guarda sto per inserire un altro tipo di slideshow, più bello...mi occorre solo un pochino di tempo :D
EliminaSimona alla fine ce l'ho fatta....ci ho messo un po' ma fatto!!! Grazie degli utilissimi consigli....
EliminaAspetto il nuovo slideshow!
Ciao, grazie mille per questo tutorial!
RispondiEliminaL'ho messo nel mio blog e mi piace.
Vorrei solo chiederti un paio di cose:
1. Se sia possibile cambiare il font nei titoli;
2. Quando l'ho inserito si è creato parecchio spazio sotto lo slideshow: è possibile ridurlo?
Grazie mille :)
Ciao Paola, perdonami se rispondo solo ora, non avevo vistoil tuo commento :(
Elimina1. Sì puoi cambiare il font cercando negli stili che hai aggiunto (è l'ultima voce) 'p.bjqs-caption '...aggiungi il CODICE 'font-family:FONT CHE PREFERISCI;'
2. nel codice dello slideshow, dove inserisci proprio le immagini, trovi alla fine dei tag che indicano proprio un andare a capo ovvero <br> eliminali!
ciao Simona! intanto complimenti per il tuo lavoro, perché i tuoi tutorial e i tuoi consigli sono utilissimi.
RispondiEliminaHo inserito lo slideshow e leggendo tutti i commenti sono già riuscita a risolvere tutti i problemi che incontravo eccetto un paio:
1- lo vorrei sopra i post anziché centrato come appare ora (io ho inserito i codici direttamente nell'html del modello perché con il gadget l'immagine non era ben centrata nello slider)
2- quando faccio il refresh della pagina del blog lo slider non sempre si vede
Grazie per l'aiuto.
Ciao Laura!
EliminaAllora mi sembra che il primo punto tu l'abbia risolto.. invece per il secondo hai ragione!
Non capisco il perchè... la prima che mi viene in mente è che forse c'è qualche altro script che va in conflitto...
in realtà sono riuscita a cambiare posizione ma lo slider non viene visualizzato correttamente (c'è una line bianca in alto). Per quanto riguarda lo script non saprei proprio come intervenire...non sono molto brava con l'html...
EliminaMa si può rendere visibile solo in homepage? Non riesco a capire come. :(
RispondiEliminaSì, si può mettere, ma bisogna inserirlo in un codice, all'interno dell'HTML...bisognerebbe farci un tutorial, perchè non riuscirei a spiegartelo così ;)
EliminaE' possibile inserire qualcosa di simile in un post o in una pagina statica, anzichè in home? :)
RispondiEliminaAiuto!! è possibile che io non ci riesca??? da me non va!!! il tuo sito è magnifico, l'ho scoperto solo ora e ieri ci ho fatto mezzanotte sopra!! questo tutorial è proprio quello che cercavo... ma da me non funziona!!
RispondiEliminaQuesto commento è stato eliminato dall'autore.
RispondiEliminaSiiiiiii... non ci posso credere, ce l'ho fatta :-D GRAZIE, il tuo aiuto è preziosissimo :-)
RispondiEliminaVorrei chiederti un'altra cosa, che se non ho guardato male, non hai ancora trattato...
come posso inserire le social icons e il cerca sopra all'header?
Grazie ancora!
Ciao Marika! Sono felice che tu ce l'abbia fatta! :D
EliminaPer inserire i social icons sopra l'header, ti basta andare in Modifica HTML e, premendo CTRL+F, cerca il div 'header-wrapper'... subito prima incolli il codice delle icone :)
Baci ;*
Grazie! Ma non me lo trova, trovo solo 'header-inner'.
EliminaIl codice che inserisco è quello del gadget giusto?
E per aggiungere anche il cerca?
Grazie mille! :-)
Ok, dovresti cercare un po' più su di header-inner.
Eliminabeh, per la casella di ricerca è un po' diverso, bisogna inserire un form... è più complicato da spiegare in un semplice commento.
Ehm.. Ho provato, ma io non riesco a installarlo..
RispondiEliminaHo seguito passo passo tutto il tuo tutorial ma non ci riesco... :-(
Ciao! Grazie tante per tutti gli aiuti che dai! Qualche tempo fa avevo messo uno slideshow nel mio blog, ma avevo il solito problema di centrarlo e dargli le giuste dimensioni, ho risolto mi pare, copiando un semplice codice CSS in cui aggiustavo altezza e larghezza, tuttavia adesso modificando il blog questi codici si sono cancellati, come posso ricentrarlo?
RispondiEliminaLo slideshow è quello dei gadget di blogger, vorrei semplicemente spostarlo più a destra, tempo fa ci ero riuscita con un codice CSS ma adesso non lo ricordo più
EliminaCiao! Io vorrei adattarlo alla sola colonna di sinistra del mio blog. La larghezza totale del blog è 900 px, di cui 600 a sinistra e 300 a destra... Che larghezza devo impostare per le immagini? In teoria 600, ma se voglio un piccolo bordo bianco?
RispondiEliminaGrazie!
Il bordo bianco potresti farlo direttamente alle immagini...non so se tu usi un programma di grafica...se invece vuoi fare un bordo attraverso il CSS, e mettiamo che sia di 10px, allora devi impostare la dimensione meno i 10px, ad esempio se l'immagine dello slide è 600*300px tu la farai 590*290px...
EliminaIn caso puoi dare un'occhiata anche all'altro slideshow che ho pubblicato QUI.
Alla fine l'ho fatto usando questo e mi piace.
EliminaPerò vorrei sistemare una cosa, scusa se te lo linko: http://antigapalavra.blogspot.it/p/home.html
Al di là del bordino bianco, come faccio a eliminare quello spazio che si crea a sinistra? Pensavo di dover mettere qualche -20px o simili nel margin ma non cambia nulla...
Anche tutto quello spazio che si crea in basso, se possibile.
EliminaLe distanze, in questo caso sono dettate dagli stili predefiniti di Blogger...dovrei vedere a quale gadget appartiene (in termini di codici) e dargli nuove indicazioni...
Eliminaper lo spazio inferiore ti rimando a questo commento:
http://www.socutethings.com/2013/12/inserire-uno-slideshow-semplice-nel.html?showComment=1421255441473#c2076452556330397580