Allora ecco cosa devi fare ^_^, segui il video tutorial (questa volta lascio il link, ma inserisco il video nella pagina dei video tutorial, che trovate tramite il menu in alto):
http://youtu.be/iby9C_DfFLA
CONSIGLIO! Non inserirlo in un post o in una pagina, ho notato che il sistema di blogger, sfasa il codice, però funziona benissimo con il gadget ;)
Codice da inserire nel foglio di stile, ovvero il CSS:
/* Pannello Slide
----------------------------------------------- */
#datacontent {
padding: 0px 5px;
width:98%;
margin: 0 auto;
display: block;
}
#datacontent ul.navigation {
list-style: none;
margin: 0px auto;
padding:0px;
display: block;
background: none;
}
#datacontent .navigation li {
float: left;
border:0px;
text-align:center;
}
#datacontent .navigation li a {
padding: 2px 0.5em; margin-left: 4px; font: 11px verdana; background: #ee7f90; border-top: 1px solid #ee7f90; border-left: 1px solid #ee7f90; border-right: 1px solid #ee7f90; border-bottom: none; text-decoration: none; -moz-border-radius: 6px 6px 0 0; border-top-left-radius: 6px 6px; border-top-right-radius: 6px 6px;top: 1px;
}
#datacontent .navigation li a:hover{
color:#fff; top: 2px; position: relative; background: #ee7f90; border-top: 1px solid #ee7f90; border-left: 1px solid #ee7f90; border-right: 1px solid #ee7f90; border-bottom: none;
}
#datacontent .navigation li a.selected {
color: #ee7f90; font: 11px verdana; font-weight: bold; background: #fff; border-top: 1px dashed #ee7f90; border-left: 1px dashed #ee7f90; border-right: 1px dashed #ee7f90; border-bottom: 0px dashed #fff; -moz-border-radius: 6px 6px 0 0; top: 1px; position: relative; border-top-left-radius: 6px 6px; border-top-right-radius: 6px 6px;
}
#datacontent .panels {
overflow: hidden;
margin-bottom:20px;
border:1px dashed #ee7f90;
width:98%;
}
#datacontent .panelsInner {
overflow: hidden;
}
#datacontent .panel {
padding: 10px 5px;
color: $(body.text.color);
background:#fff;
font-size: 12px;
font-weight: normal;
margin:0;
}
.panel a img {
background: none repeat scroll 0 0 #F8F7F1;
border: 1px solid #FFFFFF;
box-shadow: 0 0 5px 2px #DDDDDD;
padding: 5px;
margin:3px;
}
.panel a:hover img{
background:#FDFDFB;
border:1px solid #c6b6b6;
-moz-box-shadow:0 0 5px 2px #d0bfbf;
-webkit-box-shadow:0 0 5px 4px #d0bfbf;
box-shadow:0 0 5px 4px #d0bfbf;}
Codice da inserire dove vuoi che appaia il pannello:<div id="datacontent">
<ul class="navigation">
<li><a href="#pannello1">pannello1</a></li>
<li><a href="#pannello2">pannello2</a></li>
<li><a href="#pannello3">pannello3</a></li>
</ul>
<div class="panels">
<div class="panel" id="pannello1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div>
<div class="panel" id="pannello2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div>
<div class="panel" id="pannello3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div>
</div>
</div>
Lo script:<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
$('.navigation').each(function () {
var $links = $(this).find('a'),
panelIds = $links.map(function() { return this.hash; }).get().join(","),
$panels = $(panelIds),
$panelwrapper = $panels.filter(':first').parent(),
delay = 500,
heightOffset = 20; // we could add margin-top + margin-bottom + padding-top + padding-bottom of $panelwrapper
$panels.hide();
$links.click(function () {
var link = this,
$link = $(this);
// ignore if already visible
if ($link.is('.selected')) {
return false;
}
$links.removeClass('selected');
$link.addClass('selected');
if ($.support.opacity) {
$panels.stop().animate({opacity: 0 }, delay);
}
$panelwrapper.stop().animate({
height: 0
}, delay, function () {
var height = $panels.hide().filter(link.hash).css('opacity', 1).show().height() + heightOffset;
$panelwrapper.animate({
height: height
}, delay);
});
});
$links.filter(window.location.hash ? '[hash=' + window.location.hash + ']' : ':first').click();
});
</script>
.jpg)
Carinissimo questo pannello slide! :D delizioso! Mi era venuto un colpo quando ho trovato il tuo blog oscurato! ho pensato "nooooooo come faccio senza Simooooooo" Grazie per essere passata da me :D buon week end :-*
RispondiEliminagrazie sei dolcissima *_*
EliminaDavvero davvero carinissimo!
RispondiEliminaConcordo con Little Fairy!
Grazie!
Mary
grazie mary ♥
EliminaCiao! Innanzi tutto complimenti per il blog, per la completezza e la semplicità delle spiegazioni!!!
RispondiEliminaVeramente complimenti.
Sto curando un paio di blog ed ho provato ad inserire il gadget a scomparsa che hai suggerito, ti chiederei però se potresti aiutarmi a modificare il colore del pannello da rosa ad azzurro o blu.
Ho localizzato il punto da modificare, ma il codice del colore non so dove andarlo a recuperare.
Ti ringrazio
a presto
Luca
ciao Luca e grazie mille per i complimenti, anche se cerco di dare una mano a chi non è molto ferrato in fatto di codici per blog, però non mi sento una cima, lo faccio veramente per passione :D...
EliminaPer quanto riguarda i colori ti lascio il link di una pagina in cui puoi trovare tutti i codici RGB esadecimali, e cliccandoci sopra puoi vedere in anteprima il colore selezionato.
A presto!!!
Quanto spieghi bene a voce! Sai la cosa più bella???...fai sembrare tutto facile e fai fare cose impensabili per una super beginner!
RispondiEliminagrazie Cécile sei troppo gentile *_*
EliminaCiao Simona, grazie mille per il tuo aiuto finalmente sono riuscita ad inserire il pannello yuppiiii.. :)
RispondiEliminaVolevo chiederti, come posso inserire una foto o dei disegnini nella descrizione??
Grazie in anticipo.. BACIIIII
ciao ti commento anche qui perchè probabilmente su youtube non mi arriverebbe la notifica...
RispondiEliminaciao complimenti per il tutorial sei stata chiarissima...
ho solo un problema (probabilmente ho sbagliato qualcosa, per fortuna ho fatto la prova nel 'blog di prova' )
ho inserito il pannello e tutti i codici come dici di fare... ora se tipo visualizzo il mio blog e clicco sopra un pannello (es pannello01) la schermata mi scende fino a coprire la linea dei pannelli.. praticamente la schermata si ferma alla scritta dentro il pannello... non mi piace questa cosa che la schermata di muova e "scenda" ... ho sbagliato qualcosa di grossolano ? mi piaceva moltissimo questa idea dei pannelli a scomparsa nel blog se mi aiuti mi rendi felice :))))
Ciao Consuelo :D
EliminaSi avevo visto il commento su youtube, ma non avevo avuto ancora il tempo di risponderti ;)
mm... a dire il vero non ho ben capito dov'è che si ferma....dici a metà?
Se invece non ti piace il movimento che fa 'sali e scendi' è lo script che gli dà questa funzione... bisognerebbe cambiare proprio codice...
Comunque se tu inserisci di nuovo il codice mi fai vedere com'è l'effetto, che magari capisco meglio :D
si va bhe io vedo solo ora la risposta.. comunque grazie
Eliminaho risolto il problema praticamente ho cancellato tutto e l'ho rifatto da capo e ora viene perfetto...
l'unica cosa che vorrei cambiare sono le tonalità il rosa non ci dice niente nel mio blog che è sul verde.... ma questo ci penso da sola, almeno credo di riuscirci... grazie mille e complimenti è una figata unica !!!