Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
2 septembre 2014 2 02 /09 /septembre /2014 16:21


 


1. Liste défilante de textes avec des liens

On a parfois des listes à afficher, un peu longues, et pour lesquelles on souhaite faire des liens.
Ces liens peuvent mener vers d'autres pages de votre blog, ou bien vers d'autres sites internet.

L'avantage d'une liste défilante avec liens est :

* le gain de place si la liste est longue,

* comme pour toutes les animations, l'attraction sur les visiteurs. (Il est prouvé que l'oeil est d'abord attiré par le mouvement.)


 
2. Comment faire une liste défilante avec des liens

2.1 Faire une liste avec des liens


Le plus simple est de faire d'abord votre liste, en prenant soin d'aller à la ligne après chaque élément.

Vous ferez aussi sa mise en forme : typo, couleur, taille du texte, alignement...



2.2 Vous ajoutez ensuite les liens sur chaque élément.

Pour mémoire,
cliquez ici pour voir comment faire des liens hypertexte.

Vous avez alors au minimum un code HTML sous cette forme :


<a href=”adresse de la page liée n 1 ”>Texte de votre lien 1</a></br>
<a href=”adresse de la page liée n 2”>Texte de votre lien 2</a></br>



Code complet de liste liée avec mise en page

<a href="http://adresse page liee 1.html"><span style="font-family: comic sans ms,sans-serif;"><span style="font-size: 12pt;"><span style="color: #0000ff;">I</span><span style="color: #0000ff;"><span style="color: #0000ff;">ndex</span> de tous les articles</span></span></span></a><br /><span style="color: #0000ff;"><span style="font-family: comic sans ms,sans-serif;"><span style="font-size: 12pt;">

<a href="
http://adresse page liee 2.html"><span style="color: #0000ff;"><span style="font-family: comic sans ms,sans-serif;"><span style="font-size: 12pt;">Rubrique</span></span></span><span style="color: #0000ff;"><span style="font-family: comic sans ms,sans-serif;"><span style="font-size: 12pt;"> "Pour bien demarrer"</span></span></span></a>


2.3 Ajouter ensuite la balise de défilement

Avant votre code HTML de votre liste, vous ajoutez :


<marquee behavior="scroll" direction="up" height="xxx" width="xxx" scrollamount="x" scrolldelay="x"
onmouseover="this.stop()" onmouseout="this.start()"

<p>

puis vous trouvez les éléments de votre liste avec leur mise en forme et leurs liens, comme en chapitre 2.2

* Après, vous ajoutez :

</p>
</marquee>



2.4 Paramètres du défilement

Pour revoir les différents
paramètres de la balise de défilement Marquee, cliquez ICI.


2.4.1 Sens et vitesse de défilement

N'oubliez pas de paramétrer le défilement : vitesse, sens....  Le sens le plus utilisé pour ce type de liste est "up".

2.4.2 Conseil de paramétrage supplémentaire

Ajouter les paramètres qui permetent d'arrêter le défilement au survol de la souris. Ces apramètres sont vivement conseillés dans le cas d'une liste défilente avec liens, et en aprticulier si votre vitesse de défilement est élevée.

Sinon, votre visiteur risque de faire un clic non pas sur l'élement de la liste de son choix mais sur un élément au dessous.


Paramètres à ajouter :

onmouseout="this.start()" onmouseover="this.stop()"


3. Code complet d'une liste défilante avec liens


<p style="text-align: center;"><marquee scrolldelay="1" scrollamount="2" width="400" height="100" direction="up" onmouseout="this.start()" onmouseover="this.stop()">

<div style="text-align: left;"><a href="
http://www.over-blog.com/com-1109493945/123Miam_Miam.html"><span style="font-family: comic sans ms,sans-serif;"><span style="font-size: 12pt;"><span style="color: #0000ff;">I</span><span style="color: #0000ff;"><span style="color: #0000ff;">Index de tous les articles</span></span></a><br />

<span style="color: #0000ff;"><span style="font-family: comic sans ms,sans-serif;"><span style="font-size: 12pt;"><a href="
http://faireunblog.over-blog.com/pages/5_articles_a_lire_pour_demarrer_votre_blog-2051604.html"><span style="color: #0000ff;"><span style="font-family: comic sans ms,sans-serif;"><span style="font-size: 12pt;">Rubrique</span></span></span><span style="color: #0000ff;"><span style="font-family: comic sans ms,sans-serif;"><span style="font-size: 12pt;"> "Pour bien d&eacute;marrer"</span></span></span></a></span></span></span><span style="color: #0000ff;"><span style="font-family: comic sans ms,sans-serif;"><span style="font-size: 12pt;"><br />

autres éléments de ma liste.....
<br />
</div>
</marquee></p>




 


 

  * 5 articles a lire pour demarrer votre blog
* Initiation au langage HTML
* Tout pour modifier et embellir vos textes
* Tout savoir sur les images 
* Des gadgets
* Votre blog ne ressemblera pas aux autres
* Mes astuces
* Référencements et indexations
* Index des articles


 

                                    Rendez-vous sur Hellocoton !                                                        

 

 

Partager cet article

Repost 0

commentaires

tiot 07/04/2013 00:53


salut


c'est très intéressant


bonne journée

Nadine Quinn 06/04/2013 22:39


C'est très bien mais la migration a commencé; est ce que cet article peut être mis sur la nouvelle version d'overblog.


Bon week-end


Nadine

Aurelie 08/04/2013 16:08



Je ne sais pas, je n'y suis pas encore... essayez



Tristan 15/08/2010 14:07



Ce que je cherche, c'est comment faire un lien mot un peu quand tu clique sur un texte et que ce soit un lien.



Aurelie 16/08/2010 14:13



La réponse à ta question est ici :


http://faireunblog.over-blog.com/article-mettre-des-liens-en-texte-39593955.html



Chantal74 25/01/2010 23:17


Super tous ces conseils.. merci, c'est une chouette idée
voilà qui va me servir.. trop mignon aussi le petit chat.
bonne nuit
chantal


bricabrocamoi 25/01/2010 17:00



Merci de ton passage. Bonne soirée. $$$



mariellen 24/01/2010 20:11


super, c'est justement ce dont j'avais besoin, bsious Aurélie $$


Aurelie 25/01/2010 15:13


Il fallait demander ! Bises


Louly cot cot cot 24/01/2010 16:12





Gros bisous + clic $$$


krystele 24/01/2010 08:34



BROUM BROUM........................................


.........................tut tut !!!.....................................................


.........................J'arrive en camion chargé de com's..........


.........................Rien que pour toi .....................................


.........................Te souhaiter un tres bon dimanche


.................|"""""""""""""""""""""""""""""""|""|||____


.................|.............¤BISOUS¤.............|||....|""....__.......


.................|___________________________|_|__|,,


........................."((...))..((..))"^^^^^^^^^^^^^^^^((..))


......................... krystele



JANY 23/01/2010 22:52


bonsoir,
j'espère que tu vas bien et que tu passes un excellent week-end, je viens te souhaiter une très bonne nuit. gros bisous.
Jany.


Aurelie 25/01/2010 15:10


Merci a toi et je viens chez toi..


cerisette et l'art 23/01/2010 21:01


bon week end
bisous $$$$$$$$


Présentation

  • : Faire un blog
  • Faire un blog
  • : Ce blog vous aide à vous lancer pour faire votre blog : plateforme, mise en page, décoration, gadgets...
  • Contact

Vous Cherchez Quoi ?

Bienvenue !

 

PancarteSmiliz.pngCe blog a pour objet de vous aider à faire votre blog. C'est facile, et possible sans être informaticien !

J'ai 2 autres blogs très différents, et je souhaite mettre mon expérience à votre service. N'hésitez pas à me déposer vos commentaires et questioxxns. 
Si vous débutez, commencez par l' Index des articles , rubrique "Pour bien démarrer". 

 

Inscrivez votre site sur ma Top Liste et améliorez votre référencement.  

Mon logo sur votre site

Si j'ai contribué à l'amélioration de votre blog, merci d'y mettre mon logo :
Site Faire Un Blog

Code à coller :

<a href="http://faireunblog.over-blog.com/" target="_blank"><img height="65" width="85" src="http://sd-1.archive-host.com/membres/up/42016049459753927/PancarteSmiliz.png" alt="Site Faire Un Blog" /></a>

 

 

Date du jour

 

 

 

Géolocalisation

formation