Les Ficelles d'Anna K. - Aide et astuces pour créer et personnaliser un blog
| Accueil | Publication | Flux RSS | Accès Mobile | Newsletter | Recommander | Contact |
|
|
Pour accéder plus rapidement au sommaire correspondant à cet article, cliquez sur le lien :
publié dans : Effets d'Ecriture et de Texte - Tous blogs
Grâce à ce script NoobSlide, vous pouvez faire défiler du texte à l'aide de boutons.
Voir Sample 8
Etape 1 :
Allez sur NoobSlide
Tout en bas de la page, cliquez sur Download
Vous venez d'enregistrez un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire Vers...
Etape 2 :
Dans l'administration de votre blog, Documents - Autres Fichiers :
Sur votre PC :
Dans l'administration de votre blog, Documents - Autres Fichiers - répertoire NoobSlide :
Lors de la conception de ce slideshow, en HTML, collez
Vous modifiez :
En rouge, les adresses de vos fichiers js et css : vous avez noté leur adresse à l'étape 4
En vert, les titres et textes de votre slideshow
Voir Sample 8
Etape 1 :
Allez sur NoobSlide
Tout en bas de la page, cliquez sur Download
Vous venez d'enregistrez un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire Vers...
Etape 2 :
Dans l'administration de votre blog, Documents - Autres Fichiers :
- créez un répertoire Noobslide
- uploadez-y les fichiers :
- thumb_invisible.gif
- thumbs_mask.gif
- notez leur adresse
Sur votre PC :
- ouvrez le bloc-note
- appelez le fichier style.css
- modifiez-y les adresses des fichiers :
- thumb_invisible.gif
- thumbs_mask.gif
- enregistrez le fichier sous le même nom
Dans l'administration de votre blog, Documents - Autres Fichiers - répertoire NoobSlide :
- enregistrez les fichiers :
- style.css
- _mootools.js
- _class.noobSlide.js
- web.css
- notez leur adresse
Lors de la conception de ce slideshow, en HTML, collez
<head>
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/_web.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/_mootools.js"></script>
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/_class.noobSlide.js"></script>
<script type="text/javascript">
window.addEvent('domready',function(){
//SAMPLE 8
var hs8 = new noobSlide({
box: $('box8'),
startItem: 1,
items: $ES('h3','box8'),
size: 480,
handles: $ES('span','handles8'),
buttons: {previous: $('prev8'), play: $('play8'), stop: $('stop8'), playback: $('playback8'), next: $('next8') },
onWalk: function(currentItem,currentHandle){
//style for handles
this.handles.extend(handles8_more).removeClass('active');
$$(currentHandle,handles8_more[this.currentIndex]).addClass('active');
//text for "previous" and "next" default buttons
$('prev8').setHTML('<< '+this.items[this.previousIndex].innerHTML);
$('next8').setHTML(this.items[this.nextIndex].innerHTML+' >>');
}
});
//more "previous" and "next" buttons
hs8.addActionButtons('previous',$ES('.prev','box8'));
hs8.addActionButtons('next',$ES('.next','box8'));
//more handle buttons
var handles8_more = $ES('span','handles8_more');
hs8.addHandleButtons(handles8_more);
//
hs8.walk(0)
});
</script>
</head>
<body>
<div id="cont">
<h1>noobSlide - mootools</h1>
<!-- SAMPLE 8 -->
<h2>Sample 8</h2>
<div class="sample sample8">
<p class="buttons" id="handles8">
<span>Pane 1</span>
<span>Pane 2</span>
<span>Pane 3</span>
<span>Pane 4</span>
</p>
<div class="mask1">
<div id="box8">
<div>
<p class="buttons"><span class="prev"><< Previous</span> <span class="next">Next >></span></p>
<h3>1. Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
<p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem.</p>
</div>
<div>
<p class="buttons"><span class="prev"><< Previous</span> <span class="next">Next >></span></p>
<h3>2. Quisque aliquet accumsan</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
<p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi.</p>
</div>
<div>
<p class="buttons"><span class="prev"><< Previous</span> <span class="next">Next >></span></p>
<h3>3. Duis consequat laoreet</h3>
<ul>
<li>Duis consequat laoreet libero.</li>
<li>Nullam scelerisque porta arcu.</li>
<li>Praesent ut tortor quis nunc vehicula interdum.</li>
<li>Cras ultrices venenatis justo.</li>
</ul>
</div>
<div>
<p class="buttons"><span class="prev"><< Previous</span> <span class="next">Next >></span></p>
<h3>4. Aenean consectetuer</h3>
<p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
</div>
</div>
</div>
<p class="buttons">
<span id="prev8"><< Previous</span> | <span id="next8">Next >></span>
</p>
<p class="buttons">
<span id="playback8"><Playback</span>
<span id="stop8">Stop</span>
<span id="play8">Play ></span>
</p>
<p class="buttons" id="handles8_more">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</p>
</div></div>
</body>
</html>
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/_web.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/_mootools.js"></script>
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/_class.noobSlide.js"></script>
<script type="text/javascript">
window.addEvent('domready',function(){
//SAMPLE 8
var hs8 = new noobSlide({
box: $('box8'),
startItem: 1,
items: $ES('h3','box8'),
size: 480,
handles: $ES('span','handles8'),
buttons: {previous: $('prev8'), play: $('play8'), stop: $('stop8'), playback: $('playback8'), next: $('next8') },
onWalk: function(currentItem,currentHandle){
//style for handles
this.handles.extend(handles8_more).removeClass('active');
$$(currentHandle,handles8_more[this.currentIndex]).addClass('active');
//text for "previous" and "next" default buttons
$('prev8').setHTML('<< '+this.items[this.previousIndex].innerHTML);
$('next8').setHTML(this.items[this.nextIndex].innerHTML+' >>');
}
});
//more "previous" and "next" buttons
hs8.addActionButtons('previous',$ES('.prev','box8'));
hs8.addActionButtons('next',$ES('.next','box8'));
//more handle buttons
var handles8_more = $ES('span','handles8_more');
hs8.addHandleButtons(handles8_more);
//
hs8.walk(0)
});
</script>
</head>
<body>
<div id="cont">
<h1>noobSlide - mootools</h1>
<!-- SAMPLE 8 -->
<h2>Sample 8</h2>
<div class="sample sample8">
<p class="buttons" id="handles8">
<span>Pane 1</span>
<span>Pane 2</span>
<span>Pane 3</span>
<span>Pane 4</span>
</p>
<div class="mask1">
<div id="box8">
<div>
<p class="buttons"><span class="prev"><< Previous</span> <span class="next">Next >></span></p>
<h3>1. Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
<p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem.</p>
</div>
<div>
<p class="buttons"><span class="prev"><< Previous</span> <span class="next">Next >></span></p>
<h3>2. Quisque aliquet accumsan</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
<p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi.</p>
</div>
<div>
<p class="buttons"><span class="prev"><< Previous</span> <span class="next">Next >></span></p>
<h3>3. Duis consequat laoreet</h3>
<ul>
<li>Duis consequat laoreet libero.</li>
<li>Nullam scelerisque porta arcu.</li>
<li>Praesent ut tortor quis nunc vehicula interdum.</li>
<li>Cras ultrices venenatis justo.</li>
</ul>
</div>
<div>
<p class="buttons"><span class="prev"><< Previous</span> <span class="next">Next >></span></p>
<h3>4. Aenean consectetuer</h3>
<p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
</div>
</div>
</div>
<p class="buttons">
<span id="prev8"><< Previous</span> | <span id="next8">Next >></span>
</p>
<p class="buttons">
<span id="playback8"><Playback</span>
<span id="stop8">Stop</span>
<span id="play8">Play ></span>
</p>
<p class="buttons" id="handles8_more">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</p>
</div></div>
</body>
</html>
Vous modifiez :
En rouge, les adresses de vos fichiers js et css : vous avez noté leur adresse à l'étape 4
En vert, les titres et textes de votre slideshow
Publicité
Présentation
: Les ficelles d Anna K.
: 26/06/2006
: Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur
Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de
design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer
de la musique, des gadgets, des compteurs, des astuces de référencement...
: 26/06/2006
: Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur
Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de
design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer
de la musique, des gadgets, des compteurs, des astuces de référencement...
Recherche Rapide Sur le Site
Sommaires
Déco d'Hiver
Déco de Noël
Dernières Astuces
-
Hiver - Mettre une congère
Les congères sont ces amas de neige que l'on voit en bas des toits. On va donc...
-
Créer votre signature manuscrite
Pour personnaliser vos articles, il peut être sympa de les signer "manuellement". Si vous...
-
Hiver - Neige sur le blog
Puisque la neige sur le blog est le grand thème d'actualité : voici des idées. ...
-
Convertir vos images en 3D - Make3D
Il est préférable de prendre une photo de paysage, puisqu'on va lui donner de la profondeur. ...
-
Surligner les colonnes de vos tableaux au survol de la souris - TableClothes - Privilège
Passez la souris sur les cellules a1 ...
-
Design 24 - nuit étoilé - largeur fixe - Spécial pavé de pub
Ce design est destiné aux débutants qui n'y connaissent pas grand chose ni en CSS, ni en logiciel...
-
De la musique libre de droit sur Google - Privilège
Sur Google ce widget dont le design est modifiable <script...
-
Diffuser la télévision sur votre blog - Privilège
Sur Google Choix de chaines de plusieurs pays. Ce widget a un design...
-
Encadrer la date
Vous rajoutez dans le CSS, le contenu en rouge suivant : .date { border:1px...
-
Encadrer "Resultats de vos recherches" dans la page Recherche
Dans le CSS Global, vous rajoutez .searchResultsTitle {border:2px solid...
Publicité
Coin Rencontre
Espace Connexion Internet
Achetez sur le Net!
| Articles les plus populaires | L'Univers des Ficelles |
|
|
Commentaires