Actualité informatique
Test comparatif matériel informatique
Jeux vidéo
Astuces informatique
Vidéo
Télécharger
Services en ligne
Forum informatique
01Business

|-  INTERNET


|||-  

Blog créer barre avec images qui défile grâce à des flèches

 

1 utilisateur anonyme et 141 utilisateurs inconnus
Ajouter une réponse
 

 
Page photos
 
     
Vider la liste des messages à citer
 
 Page :
1
Auteur
 Sujet :

Blog créer barre avec images qui défile grâce à des flèches

Prévenir les modérateurs en cas d'abus 
LinkinPlay
linkinplay
Bébé forumeur (De 10 à 49 messages postés)
  1. Posté le 03/08/2015 à 23:04:23  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Bonsoir à tous,
Je suis une blogueuse, encore novice en la matière donc vous m'excuserez si je pose des questions un peu bêtes ^^
Je souhaiterais, dans le cadre du changement de design de mon blog, créer une sorte de barre avec plusieurs images, qui défilent manuellement grâce à des flèches. Voici un exemple bien illustré: http://stylesuzi.com/
(En fait, j'adore cette barre, je veux quelque chose de très similaire.)
Voilà j'espère vraiment que quelqu'un saura me répondre !
Merci d'avance à vous pour vos réponses.
 :)

  1. config
tintin10
Habitué (de 5 000 à 9 999 messages postés) Développeur
  1. Posté le 04/08/2015 à 17:22:40  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Bonjour. La barre que tu cites correspond à ce bout de code :
Code :(Double-cliquez pour supprimer les numéros de ligne)
  1. <IFRAME SRC="http://snapwidget.com/sc/?u=c3R5bGVzdXppfGlufDEwMHwzfDN8fG5vfDV8bm9uZXx8eWVzfG5v&ve=040215" TITLE="Instagram Widget" CLASS="snapwidget-widget" ALLOWTRANSPARENCY="true" FRAMEBORDER="0" SCROLLING="no" STYLE="border:none; overflow:hidden; width:960px; height:100px"></IFRAME>

La barre est donc une page à part entière. Il te suffit donc d'insérer ce code dans ta page (avec les styles qui vont avec), et de changer les images selon ton besoin.


---------------
Configuration matérielle : voir ce lien
Merci de respecter les règles du forum
(Publicité)
linkinplay
Bébé forumeur (De 10 à 49 messages postés)
  1. Posté le 05/08/2015 à 10:16:08  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Salut et tout d'abord pour ta réponse.

Je vois, mais ce code doit être inséré où précisément dans le code HTML? En dessous de "head"?


Quand j'essaye pour ce cas-ci d'ailleurs, on m'affiche ce message :
Impossible de charger l'aperçu du modèle : Erreur d'analyse XML, ligne 5, colonne 100 : The entity "ve" was referenced, but not declared..



Message édité par LinkinPlay le 05/08/2015 à 10:21:51
  1. config
tintin10
Habitué (de 5 000 à 9 999 messages postés) Développeur
  1. Posté le 05/08/2015 à 18:02:11  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Il doit être inséré quelque part dans la balise "BODY". "HEAD" est réservé à des méta-informations.
Tu peux me dire où s'affiche ce message d'erreur ? Fais attention aux "IFRAME" : il faut absolument que leur contenu provienne du même domaine que ton site.


---------------
Configuration matérielle : voir ce lien
Merci de respecter les règles du forum
linkinplay
Bébé forumeur (De 10 à 49 messages postés)
  1. Posté le 05/08/2015 à 22:25:15  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
D'accord, mais comment je repère BODY dans le HTML? Avec Ctrl + F ? Si oui j'inclus le code n'importe où ?
Voici d'ailleurs le début de la partie body (si c'était bien à chercher avec Ctrl + F) :



Capture 4Voir l'image en grand0 vote

En fait, je ne sais pas si le code que tu m'as donné dans ton premier message correspondait exactement au contenu de la barre du blog que je t'avais montré où s'il s'agit d'un code que je dois remplir. Le message d'erreur s'est affiché ici :


Capture 5

Désolée pour la confusion, mais j'y comprend pas grand chose (pas encore en tout cas^^).
Encore merci pour ton aide :)

(Publicité)
Profil : Equipe sécurité
totoftotof
Célèbre sur tout le forum (de 30 000 à 99 999 messages postés)
  1. Posté le 06/08/2015 à 06:01:07  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Le titre de ce sujet a été édité par Totoftotof

  1. config
tintin10
Habitué (de 5 000 à 9 999 messages postés) Développeur
  1. Posté le 06/08/2015 à 17:46:04  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Pour répondre à ta question, je dois d'abord t'expliquer un peu le principe du H.T.M.L..
Le H.T.M.L. (Langage HyperTexte par Balises) permet de définir la structure d'une page. Tu constates dans le code diverses balises, dont les noms sont juste après les "<". Je parle bien de structure, car théoriquement, tout ce qui est stylistique (les couleurs, les polices, la disposition des éléments…) est déporté dans ce qu'on appelle une feuille de style en cascade (C.S.S.).
Une page H.T.M.L. est toujours construite de la manière suivante :
Code :(Double-cliquez pour supprimer les numéros de ligne)
  1.  <HEAD>
  2.    …
  3.  </HEAD>
  4.  <BODY>
  5.    …
  6.  </BODY>
  7. </HTML>

"HEAD" (pour en-tête) permet de gérer les méta-informations : il n'y a donc jamais de contenu à proprement parler, mais plutôt des choses pour gérer ce contenu. On y inclut en particulier des scripts, des feuilles C.S.S., des informations sur l'encodage, la gestion du cache… bref, plein de choses, en fonction des besoins.
"BODY" (pour corps) permet de mettre l'ensemble du contenu affichable. C'est donc ici qu'on va insérer notre barre.

Théoriquement, tu devrais pouvoir insérer le code à peu près n'importe où : disons que, surtout pour des questions de lisibilité, en fonction de là où tu veux que ta barre s'affiche, il faut essayer d'y inscrire son code à un endroit "logique". Comme décrit précédemment, ce sont les styles C.S.S. qui pourront déterminer la position, si besoin en était. Constatons à ce titre deux choses sur le bout de code que j'ai montré : les attributs "CLASS" et "STYLE".
L'attribut "CLASS" permet d'appliquer les styles d'une classe C.S.S. donnée.
L'attribut "STYLE" permet de donner un style ne valant que pour l'objet sur lequel cet attribut est apposé. C'est strictement équivalent à créer une classe C.S.S. utilisée uniquement par cet objet.

Sur ta deuxième capture, je ne vois pas le message d'erreur, c'est normal ?


---------------
Configuration matérielle : voir ce lien
Merci de respecter les règles du forum
linkinplay
Bébé forumeur (De 10 à 49 messages postés)
  1. Posté le 06/08/2015 à 20:26:37  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Salut, et merci de suivre avec moi les choses étape par étape :)

Je comprend la structure du HTML.
En ce concerne la partie Body, j'ai essayé d'y placer le code (qui commençait avec IFRAME) que tu m'as indiquée.
Voici le premier message d'erreur (c'était normal que tu ne vois pas le message d'erreur dans mon message précédent, je t'avais juste indiqué où le message s'affichait, désolée^^): Capture 6Voir l'image en grand0 vote


Quand j'essaye d'ajouter le point virgule, j'obtiens après ce deuxième message d'erreur :

Capture 7Voir l'image en grand0 vote

Voilà, j'espère que tu pourras m'aider à y voir plus clair, et encore merci.
Message édité par LinkinPlay le 06/08/2015 à 20:28:42
(Publicité)
  1. config
tintin10
Habitué (de 5 000 à 9 999 messages postés) Développeur
  1. Posté le 07/08/2015 à 04:34:16  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Je pense voir d'où ça vient : on a un drôle de souci sur le forum où des caractères foireux invisibles s'ajoutent lors des copier-coller.
Sur ton code, ils apparaissent très bien, sous la forme de gros points (regarde à la ligne 759) : il te faut les supprimer. Ces caractères ne plaisent apparemment pas à l'analyseur de syntaxe.
Normalement, cela devrait te permettre d'éviter d'ajouter un point-virgule ; d'ailleurs, cet ajout est illogique, puisqu'il est à l'intérieur d'un attribut, et ne change donc rien au problème.


---------------
Configuration matérielle : voir ce lien
Merci de respecter les règles du forum
linkinplay
Bébé forumeur (De 10 à 49 messages postés)
  1. Posté le 07/08/2015 à 10:07:11  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Bonjour,
il semblerait que ce ne soit pas ça. En effet, j'ai supprimé tous les points comme ceci :

Capture 8
Toujours les deux mêmes messages d'erreurs, dans le même ordre que je t'ai indiqué dans mon autre message :/

  1. config
tintin10
Habitué (de 5 000 à 9 999 messages postés) Développeur
  1. Posté le 07/08/2015 à 18:13:06  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Remplace les guillemets par des apostrophes, toutes les autres balises sont comme ça, apparemment.


---------------
Configuration matérielle : voir ce lien
Merci de respecter les règles du forum
(Publicité)
linkinplay
Bébé forumeur (De 10 à 49 messages postés)
  1. Posté le 07/08/2015 à 19:04:03  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Salut,
ça ne marche malheureusement pas. Je constate que le lien qui pose problème
http://snapwidget.com/sc/?u=c3 [...] ;ve=040215
(le point virgule manquant ou la partie "ve" ) correspond à la barre que je souhaite avec les flèches (mais je n'ai pas encore mis mes propres photos) ).
Serait-ce possible de créer d'abord ma propre barre d'image et de remplacer alors ce lien?

  1. config
tintin10
Habitué (de 5 000 à 9 999 messages postés) Développeur
  1. Posté le 07/08/2015 à 19:21:18  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
C'est peut-être le "&" qui pose un souci. Essaie de le remplacer par "&amp;".


---------------
Configuration matérielle : voir ce lien
Merci de respecter les règles du forum
linkinplay
Bébé forumeur (De 10 à 49 messages postés)
  1. Posté le 07/08/2015 à 19:28:59  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Oooh ça marche enfin!
Par contre, comme je te l'ai dit, ce sont les images de l'autre blogueuse qui s'affichent, pas les miennes. Comment puis-je insérer mes photos s'il te plait ?

Encore merci pour ton aide :)
Message édité par LinkinPlay le 07/08/2015 à 19:44:44
(Publicité)
  1. config
tintin10
Habitué (de 5 000 à 9 999 messages postés) Développeur
  1. Posté le 07/08/2015 à 19:46:04  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
C'est là que ça risque de se corser un petit peu. Comme tu le constates, on insère un "IFRAME" : ce genre d'objet forme un cadre qui permet d'afficher le contenu d'une autre page Web.
Si tu remplaces l'ensemble du lien par http://www.google.fr, tu verras la page d'accueil de Google s'afficher en lieu et place de ces images.

Si on regarde de plus près ton lien, on voit qu'il se dirige sur SnapWidget (v. ici). Visiblement, c'est par là que tu devrais pouvoir créer une barre identique, avec tes propres images.
Il semble que ce soit fortement lié au site de partage social d'images Instagram. Ne l'utilisant pas, je ne saurais t'indiquer si c'est réellement ce que tu recherches.


---------------
Configuration matérielle : voir ce lien
Merci de respecter les règles du forum
linkinplay
Bébé forumeur (De 10 à 49 messages postés)
  1. Posté le 07/08/2015 à 21:05:29  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Je vois.
Je suis en train de trifouiller un peu sur snapwidget. J'ai en effet un compte Instagram donc j'essaye de voir ça.
En fait, il y a plusieurs types de widget et je ne sais pas laquelle correspond à celle effet "barre d'images avec flèches pour faire défiler".

Je vous tiens au courant :)

linkinplay
Bébé forumeur (De 10 à 49 messages postés)
  1. Posté le 07/08/2015 à 21:29:34  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
J'y suis arrivée, merci infiniment de votre aide.

J'aurais une (dernière promis^^) question si vous le voulez bien.
Si un paramètre que l'on a réglé (la couleur du titre de mon blog, à l'en tête dans mon cas) ne s'applique qu'à l'accueil du blog, et non pas dans les autres pages (par exemple une des catégories de mon menu) où dois-je me diriger pour régler le problème?

  1. config
tintin10
Habitué (de 5 000 à 9 999 messages postés) Développeur
  1. Posté le 08/08/2015 à 07:45:02  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Comment as-tu réglé le paramètre ? Normalement, ça doit jouer sur un style C.S.S., il faudrait donc appliquer le même style partout, peut-être en passant sur chaque page.
Je ne sais pas comment tu construis ton blog (j'ai l'impression que tu passes par un équivalent de WordPress), donc c'est un peu difficile à dire comme cela.
Message édité par Tintin10 le 15/08/2015 à 12:23:05

---------------
Configuration matérielle : voir ce lien
Merci de respecter les règles du forum
linkinplay
Bébé forumeur (De 10 à 49 messages postés)
  1. Posté le 09/08/2015 à 20:03:45  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
En effet, je suis sur Blogger!

La vérité, je ne sais plus trop, je m'y perds un peu ... j'avais suivi un tutoriel, maintenant j'essaye de rattraper la chose en allant dans cette partie, "ajouter un code CSS":


Capture 9Voir l'image en grand0 vote

Le code d'en bas correspond à celui du titre, dont j'ai voulu changer la couleur en rose foncé.
Le code d'en haut correspond à celui de la barre de navigation (menu), quasiment même problème j'ai voulu changer la police l'épaisseur, je vois les modifications sur la partie "aperçu" comme ceci :

Capture 10Voir l'image en grand0 vote

Mais quand j'enregistre et je regarde le blog en lui même, les modifications ne sont pas sauvegardées (sauf pour le titre où la couleur est là à l'accueil mais quand je clique par exemple sur l'un des onglets, "favorites" par exemple)!


Capture 11Voir l'image en grand0 vote

Au passage, j'ai bien attendu 24h pour voir si les modifications seraient enregistrées, rien du tout :/

  1. config
tintin10
Habitué (de 5 000 à 9 999 messages postés) Développeur
  1. Posté le 10/08/2015 à 05:08:04  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Peux-tu regarder cela ?
Message cité 1 fois

---------------
Configuration matérielle : voir ce lien
Merci de respecter les règles du forum
linkinplay
Bébé forumeur (De 10 à 49 messages postés)
  1. Posté le 14/08/2015 à 18:45:10  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 

Tintin10 a écrit :

Peux-tu regarder cela ?
Afficher plus
Afficher moins

Désolée pour le retard, j'étais en plein déménagement!
Je vais regarder ça toute suite, merci.

  1. config
tintin10
Habitué (de 5 000 à 9 999 messages postés) Développeur
  1. Posté le 14/08/2015 à 18:47:40  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Pas de souci, prends ton temps pour t'installer.


---------------
Configuration matérielle : voir ce lien
Merci de respecter les règles du forum
linkinplay
Bébé forumeur (De 10 à 49 messages postés)
  1. Posté le 15/08/2015 à 12:08:35  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Merci pour ta patience,
Alors, oui j'ai regardé ça et je connaissais cette technique depuis un moment. Mais justement comme je te l'ai dit, ce qui s'affiche dans mon aperçu ne s'affiche pas dans mon blog (j'utilise le CSS personnalisé pour un choix de police plus grand et non pas les polices proposées).

  1. config
tintin10
Habitué (de 5 000 à 9 999 messages postés) Développeur
  1. Posté le 15/08/2015 à 12:24:08  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Ah, dans l'aperçu ça fonctionne, mais pas sur le vrai site ? Par hasard, sur ton navigateur, as-tu essayé de vider le cache ?


---------------
Configuration matérielle : voir ce lien
Merci de respecter les règles du forum
linkinplay
Bébé forumeur (De 10 à 49 messages postés)
  1. Posté le 15/08/2015 à 19:21:10  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Exactement, c'est cela!
Non, comment puis-je vider le cache s'il te plait (Chrome)?

  1. config
tintin10
Habitué (de 5 000 à 9 999 messages postés) Développeur
  1. Posté le 15/08/2015 à 19:23:04  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
https://support.google.com/chr [...] 5582?hl=fr


---------------
Configuration matérielle : voir ce lien
Merci de respecter les règles du forum
linkinplay
Bébé forumeur (De 10 à 49 messages postés)
  1. Posté le 30/08/2015 à 17:47:35  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Salut et désolée pour cet énorme retard, mon installation en France m'a pris pas mal de temps.
Sinon, j'ai enfin réouvert le blog, mais le problème dont je te parlais (couleur du titre qui est devient noir quand on change de page) me dérange pas mal.
Voici le blog en question pour voir de quoi je parle.

http://uneplumebavarde.blogspo​t.com/

Merci bien de votre aide!

Saloua

  1. config
tintin10
Habitué (de 5 000 à 9 999 messages postés) Développeur
  1. Posté le 31/08/2015 à 13:10:04  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Bonjour. J'ai compris d'où ça venait : quand tu navigues dans les menus, ton titre devient un lien, et change de couleur.
Il faut donc agir sur une classe C.S.S. du genre ".title a".


---------------
Configuration matérielle : voir ce lien
Merci de respecter les règles du forum
linkinplay
Bébé forumeur (De 10 à 49 messages postés)
  1. Posté le 02/09/2015 à 10:06:19  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Bonjour,

D'accord mais comment puis-je faire cela? Quand j'effectue la recherche de .title a grâce à Ctrl+F je ne trouve rien.

  1. config
tintin10
Habitué (de 5 000 à 9 999 messages postés) Développeur
  1. Posté le 02/09/2015 à 14:51:55  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Cherche déjà si, dans les classes C.S.S., tu en as une qui gère le "a". Tente le mode de développement de ton navigateur, accessible par F12, pour avoir des précisions sur les classes actuellement employées.


---------------
Configuration matérielle : voir ce lien
Merci de respecter les règles du forum
 Page :
1

Aller à :
 

Sujets relatifs
images invisibles sur certains mails ? Perte de la barre de favoris Google Chrome
Créer un Favicone moteur de recherche ne trouve pas un blog existant
Trouver les informations d'un site ou d'un blog Recherche rédacteur blog art de vivre
Choix de Blog problème maj blog
je cherche modérateur et rédacteur pour blog et forum Publier depuis Word dans mon blog Wordpress
Plus de sujets relatifs à : Blog créer barre avec images qui défile grâce à des flèches

Les 5 sujets de discussion précédents Nombre de réponses Dernier message
Référencement sur site dédiée aux Web radio Pro et amateur ! 0
Hébergeur Français 3
Image sur page Web 3
reparation ordinator Luxembourg 2
migrer vers php 5.5 4