Affichage des articles dont le libellé est Gadget. Afficher tous les articles
Affichage des articles dont le libellé est Gadget. Afficher tous les articles

jeudi 20 janvier 2011

Gadget PAGES pour accéder à une page de contact

But : Accéder à une page de contact depuis un menu affiché sur le blog. C'est le cas dans ce blog, avec la page de contact accessible depuis le menu horizontal supérieur.

Cela se fait en deux étapes, décrites ci-dessous :

Etape 1 :  Créer la page de contact
  • Dans votre espace BlogSpot, accéder à "Publication d'un message"
  • Puis "Modifier les pages", puis "Nouvelle page"
    Il faut bien comprendre que l'on va créer une page qui ressemble en tous points à un message, mais la différence c'est qu'elle n'est pas liée dynamiquement au blog. Elle n'apparaît donc pas automatiquement dans la liste des messages, lors de l'affichage de l'accueil du blog. Pour voir cette nouvelle page, la seule solution est de créer un lien direct vers cette page. Blogspot pemet de créer 10 pages de message ayant cette caractéristique.
  • Saisir le contenu de votre page de contact avec des informations de mail, d'adresses, de plan (ne pas mettre vos coordonnées réelles !)
Etape 2 : Publier la page
  • Là, vous publiez votre page : Il vous est alors proposé 3 choix ...
    • si vous souhaitez intégrer un gadget page en mode horizontal (1), ou vertical (2), ou ne pas utiliser de gadget (3).
      • Si vous avez choisi d'utiliser le gadget page, celui-ci est automatiquement intégré dans votre structure de blog.
      • A vous de choisir son emplacement, en haut horizontalement ce qui crée une ligne d'onglets, ou en colonne verticalement ce qui crée un menu vertical.
        • La position du gadget se retouche via l'onglet "Présentation" par un simple cliqué-glissé du gadget vers la zone d'accueil qu'on souhaite.



    • Si vous n'avez pas choisi d'utiliser ce gadget, votre page est inaccessible, tant que vous n'aurez pas créé un lien vers elle. Ceci est expliqué dans les lignes qui suivent.
    Accès à une page sans utiliser le gadget "Pages"
    • On peut accéder à une page de message, sans passer par le gadget "Pages"
    • Pour cela, il faut créer dans un message par exemple, un lien direct vers l'url de la page
    • C'est faciles achant que l'url d'une page est formée de la façon suivante :
               nom_du_blog.blogspot.com/p/nom_de_page.html
      • Ainsi, dans ce blog, la page de contact, a pour adresse :
           pjece.blogspot.com/p/contact.html
           et voici un exemple de lien pour y accéder : Nous contacter
    • Pour déterminer sans erreur l'adresse d'une page, on l'affiche au moins une fois via le gadget "PAGES", puis lorsque le blog est affiché sur Internet, on survole à la souris dans le menu des pages l'onglet qui permet d'y accéder et on lit en bas de l'écran l'url qui s'affiche.
    --- --- --- compléments --- --- ---
    Pour information, sachez qu'il existe d'autres techniques pour créer des pages de contact. Comme par exemple, en créant une page avec un formulaire de contact et une page de remerciement pour l'internaute qui vous a contacté. Voir la technique.

    Gadget CHAMP de RECHERCHE en page principale

    But : Permettre à l'internaute de retrouver les messages dans votre blog, sur la base de mots clés qu'il saisit dans une zone de recherche.

    Méthode 1 : Prévu par BlogSpot, c'est donc très simple.
    • Il suffit de rajouter dans la présentation de votre blog le gadget "Champ de recherche".
    Méthode 2 : Insérer un code HTML spécifique dans un gadget HTML/JAVASCRIPT
    • Sur cette page, vous trouverez l'exemple d'un code HTML à intégrer.
    • Vous le copiez, et vous rajoutez dans la présentation de votre blog, un gadget HTML/JAVASCRIPT dans lequel vous collez le code HTML en question, après l'avoir personnalisé.
    A vous de jouer...

    Gadget LIBELLES pour classer les messages

    But : Organiser les messages que l'on écrit dans le blog, en les classant par catégories, appelées libellés.

    Préambule : Il faut bien comprendre qu'un blog peut rapidement contenir des dizaines de messages, et qu'il est difficile pour l'internaute de s'y retrouver. Donc, le principe des "libellés" va permettre de classer ces messages par catégorie (c'est à dire par libellé). Ensuite, on proposera sur le blog une liste de tous les libellés, l'internaute pourra alors en choisir un, et le blog affichera la liste de tous les messages correspondant à ce libellé.

    Impératif : Il faut associer un libellé à chaque message que l'on crée. Pour cela :

    • Lors de la création du message, ou lors de sa modification
      • Accéder, sous le message, à la zone "Libellés"
      • Saisir un nouveau libellé, ou afficher les libellés et en choisir un (ou plusieurs, ce qui est possible)
    • Publier
    Ajouter le gadget "Affichage des libellés"
    • C'est ce gadget qui se charge d'afficher la liste des libellés pour l'internaute
    • Dans Blogspot, accéder à l'onglet "Présentation"
    • Choisir un élément dont l'emplacement vous convient, et faire "Ajouter un gadget"
    • Choisir le gadget "Libellés", nommer le et paramétrer le
    • Enregistrer le gadget, puis enregistrer la structure de la présentation
    • Tester son fonctionnement
      • Le clic d'un libellé provoque l'affichage de tous les messages ayant ce libellé
      • L'affichage va du plus récent au plus ancien

    Pourquoi plusieurs libellés pour un même message ?
    Tout d'abord, on peut associer plusieurs libellés à un même message, tout simplement en les séparant par une virgule.
    A quoi cela sert ? Cela permet d'accéder à un même message par plusieurs critères. En effet, il est parfois difficile de classer un message qui peut concerner deux thèmes différents. En associant à ce message 2 libellés correspondant chacun à un thème, on se donne plus de facilité pour retrouver le message.

    Url associée à l'ensemble des messages d'un même libellé
    • Pour information, l'url associée à un libellé donné est du type :
      nom_du_blog.blogspot.com/search/label/nom_du_libelle
    Cette url permet d'afficher l'ensemble des messages ayant le libellé en question. Les messages sont afffichés en commençant par le plus récent en terme d'ordre de publication.

    Les libellés sont-ils obligatoires ?

    • Il n'est pas obligatoire d'associer un libellé à tout message.
    • MAIS un message sans libellé ne pourra pas être accessible via le gadget "Affichage des libellés".
    • Par contre, il reste accessible par le gadget "Archives du blog"

    Gadget HTML pour l'heure exacte

    But : Insérer l'heure de l'horloge parlante,

    • pour la rendre visible sur la page d'accueil de votre blog
    • comme vous pouvez l'observer sur mon blog http://pjece.blogspot.com 


    Manipulations :
    • Récupérer le code HTML de l'applet (applet = petite application web, ici celle qui affiche l'heure)
      • Accéder au site http://www.horlogeparlante.com/
      • Dans le menu de gauche, accéder à "Heures et services" puis "L'horloge sur votre site"
        • Configurer l'horloge : étapes 1 à 4 en s'aidant de l'aperçu proposé
        • Obtenir le code : Etape 5, et copier le code proposé.
    • Revenir à votre blog, en conception, et accéder au lien "MISE EN PAGE"
      • Choisir la zone où sera le gadget de l'horloge et alors activez "Ajouter un gadget"
      • Choisir le gadget "HTML / JAVASCRIPT",  qui permet d'insérer du code HTML.
        Très pratique, car  on peut mettre tout ce qu'on veut dès lors que c'est du langage HTML
      • Saisir un titre (non obligatoire) qui apparaîtra au dessus du gadget sur la page.
        • Coller dans la zone "Contenu" le code HTML copié depuis le site de l'horloge parlante
        • Enregistrer le gadget, puis enregistrer la structure de la présentation
        • Tester en affichant la page d'accueil de votre blog.
        • SI L'AFFICHAGE EST TRONQUE,
          • En LARGEUR : ajuster la largeur de votre blog, via la personnalisation de votre modèle
          • En HAUTEUR :  en mode conception, à partir de la mise en page, vous pouvez "modifiez" le gadget Horloge que vous avez inséré.
            Dans l'écran du gadget, dans la zone de code HTML, repérez information height : "...px" qui traduit la hauteur en pixels de votre horloge à l'écran. Changez cette valeur en saisissant par exemple 100 ou  plus. Testez.

    Gadget LISTE de LIENS en page principale

    But : Il s'agit d'afficher quelques liens que vous jugez utiles. Ils figureront sur une colonne du site (si vous avez choisi une présentation avec colonnes).

    Marche à suivre
    • Dans Blogspot, onglet "Présentation"
    • Choisir dans la structure de la page une zone et activer "Ajouter un gadget"
    • Choisir le gadget "Liste des liens"
    • Compléter l'écran avec les liens que vous jugez utiles
    • Valider, tester.
    Petit défaut de ces liens, obligeant à faire de la haute couture ...
    • Comme vous le remarquez, ces liens ne s'ouvrent pas dans une nouvelle fenêtre.
    • Il va falloir compléter le code HTML avec la mention target='_blank'. Votre oeil de lynx a sûrement remarqué que ce sont des apostrophes qui encadrent le mot _blank alors que dans ce type de complément Html, nous avions jusqu'à maintenant toujours utilisé des guillemets. BRAVO, quelle acuité visuelle ! Il se trouve que dans la page de code Html où nous devons intervenir, ce sont les apostrophes qui sont utilisées et non les guillemets, et on s'adapte donc.
    Allons-y ... et soyez précis, rigoureux, juste, attentif, concentré, ... comme d'habitude quoi !
    • Dans BlogSpot, onglet "Présentation", puis "Modifier le code HTML"
    • ESSENTIEL : Cocher la petite case carrée nommée "Développer des modèles de gadget"
    • Dans la grande page HTML, il faut retrouver la zone correspondant au gadget "Liste des liens", (se dit widget linklist en anglais )
      • Pour cela, rechercher le mot "linklist" (utiliser la commande CTRL F et ses boutons associés Précédent / Suivant pour vous approcher de la bonne ligne)
      • Ca y est vous avez repéré la ligne <b: widget id='Linklist' ...qui signale le gadget recherché
      • 6 ou 7 lignes dessous, repérer l'instruction
        <a expr:href='data:link.target>
      • Compléter l'instruction comme suit
        <a target='_blank' expr:href='data:link.target'>
        , en notant que le rajoût en rouge est encadré par des espaces de chaque côté.

    • Puis "Enregistrer le modèle" et tester la bonne ouverture des liens.