Comment mettre un texte défilant sur Blogger ?

Mettre un texte défilant sur Blogger et le positionner sur la page 

 En tapant les mots clès "Texte Défilant" dans votre moteur de recherche préféré, vous trouverez rapidement conseils et outils pour insérer le code Html  dans un widget Blogger et obtenir l'effet recherché. Seulement voilà, vous pouvez être tentés de ne pas voir défiler ce texte sur toute la largeur de la page ou vouloir y ajouter des couleurs, changer la taille, ajouter une bordure, un fond... et c'est là que la tâche se complique....

Un texte défilant avec des news de votre blog  permet de :

#  Retenir les lecteurs quelques instants de plus sur votre blog

# Etablir une communication plus interactive qui attire l'oeil

# Montrer au premier regard que le blog continue d'être en vie

 

 Un texte défilant attrayant est plus efficace :

C'est ce que nous allons voir dans cette partie un peu plus technique, mais surtout les trucs et astuces qui permettent de rendre la configuration plus simple.

C'est Parti !

Comme toujours faites une sauvegarde de votre blog ou travaillez sur un blog test.

Utiliser un générateur de texte défilant :

# Ici pour une version basique sur le site de l'université de Caen: Générateur de texte défilant

ou ici

# Pour une version plus sophistiquée sur TextSpace.net


Vous pourriez vouloir en rester là et c'est très bien ! Mais parfois pour adapter la configuration au design de votre blog ou à la mise en page vous pouvez être amenés à modifier l'écriture générée....

Améliorer la configuration en modifiant le (x)html:

 

Liste des attributs à utiliser :

# La syntaxe du code à insérer pour faire un texte défilant est la suivante : 

< marquee Attributs > Votre Texte </marquee

# Les Attributs qui peuvent être insérés sont les suivants (séparés par un espace) :

Align=	Permet d’aligner un texte par rapport à une marque "top" Texte aligné en haut "middle" Texte aligné en haut "bottom" Texte aligné en bas
Behaviour=	Permet de définir le comportement du texte dans une marque  "scroll" Passage du texte "slide" Texte arrive et s'arrête "alternate" Texte gauche/droite
Bgcolor=	Spécifie la couleur de fond d’une marque "#rrggbb" Couleur de fond du marquee
Direction=	Indique la direction de défilement du texte "right" Texte arrive par la droite "left" Texte arrive par la gauche "up" Texte du bas vers le haut "down" Texte du haut vers le bas
Height=	Permet de définir la hauteur (en pixels) d’une marque  "nombre (ou) pourcentage" Hauteur de marquee
Hspace=	Spécifie l’espace horizontal (en pixels) entre le texte et le bord gauche ou droit de la marque "nombre"
Vspace=	Spécifie l’espace vertical (en pixels) entre le texte et le bord supérieur ou inférieur de la marque "nombre"
Loop=	Introduit une boucle qui permet de repasser le texte dans la marque  "nombre//infinie" Nombre de boucle : x: nombre de défilements : -1 pour 1 seule : 1 pour continue : infinite
Scrolldelay=	Définit un délai entre deux apparitions du texte "nombre" Délais en millisecondes
Scrollamount=	Permet de paramétrer (en pixels) l’intervalle entre deux apparitions du texte minimum 1 "nombre" Vitesse
Width=	Définit la largeur (en pixels) du marquee    nombre (ou) pourcentage"

Ce qui donne

  Exemples de textes défilants avec leurs codes pour une utilisation sur Blogger :

 (Rappel : Le code est à placer dans un Widget html)

# Pour une utilisation sur toute la largeur du Blog

Votre texte ici

 

<marquee direction="left" behavior="alternate" scrollamount="6" style="height:20px;width:400px;background-color:#ffffff;font-family:Arial;font-size:12pt;color:#000000;border-width:1;border-style:dotted;border-color:#000000; " > Votre texte ici</marquee>

 # Pour une utilisation sur une barre latérale



Votre texte ici

 

<marquee direction="up" behavior="scroll" scrollamount="6" style="height:100px;width:200px;background-color:#ffffff;font-family:Arial;font-size:12pt;color:#000000;border-width:1;border-style:dotted;border-color:#000000;text-align:center; " > Votre texte ici</marquee>

< En modifiant les valeurs height et width vous jouez sur la hauteur et la largeur de l'encadré. 

C'est à l'aide de ces modifications que vous allez positionner exactement le widget comme vous le souhaitez à droite ou à gauche ou centré sur votre page. Si cela ne fonctionne pas, vous pouvez insérer juste avant la balise marque d'ouverture le code suivant : <p align=right> ou <p align=leftt>

 # Avec des variantes dans le texte et un fond transparent

Votre Texte Ici !

[ Et puis là aussi ]

Et c'est fait pour aujourd'hui !

<p align=right><br /><br /><marquee direction="up" behavior="scroll" scrollamount="3" style="height:170px;width: 300px;font-family:Arial;font-size:14pt;color:#0fc0f4;font-weight:bold;text-align:center; " > Votre Texte Ici !<br /> <p style="text-align: center;"><span style="font-size: small;"><strong><font color="#a40b00">[ <u>Et puis là aussi</u> ]</font></strong></span><br /> <p style="text-align: center;"><span style="font-size: x-large;"><strong><font color="#00cccc">Et c'est fait pour aujourd'hui !</font></strong></span><br /></marquee></p>

Maintenant  vous pouvez aussi utiliser ce texte défilant en y insérant des liens cliquables, en citant des articles similaires de votre blog, ou des liens affiliés (si cela vous intéresse).

Ah ! Vous prenez aussi des vacances ou vous faites une cassure !?  

Cette utilisation du texte défilant est peut être bien  une belle solution pour indiquer au lecteur votre absence...  Et si votre blog est d'habitude actualisé quotidiennement par des articles vous pourrez y indiquer plus facilement l'emplacement pour un fil d'actualité Rss que vous pourrez insérer pour se substituer à vos articles quotidiens. Ce que nous verrons dans un prochain Tuto...

Et voilà ... encore un peu plus de fait aujourd'hui !

Mais vous, qu'en pensez-vous ? Pour ou contre l'utilisation d'un générateur ? 

Préférez-vous plutôt écrire la configuation ?

Un article de Dajaltosa